Firebase Storage image does not upload properly - firebase

Question

am trying to send an image that I take from phone to Firebase storage. the first function gets the image with the image picker plugin and passing the path return in as argument for the upload function.the image uploads to cloud storage but however in the panel the type is application/octet-stream and the image does not show
String download_path;
var imageFile;
picker() async{
File theImage = await ImagePicker.pickImage(
source: ImageSource.gallery);
imageFile = theImage;
var theimagepath = theImage.path;
setState(() {
imageFile = theImage;
});
}
Future<Null> uploadFile(String myfilepath)async{
final RegExp regExp = RegExp('([^?/]*\.(jpg))');
final filename = regExp.stringMatch(myfilepath);
final Directory tempDir = Directory.systemTemp;
final File thefile = await File('${tempDir.path}/$filename').create();
final StorageReference sref = FirebaseStorage.instance.ref().child('storeFolderName').child(filename);
final StorageUploadTask uploadTask = sref.putFile(thefile);
final Uri downloadUrl = (await uploadTask.future).downloadUrl;
download_path = downloadUrl.toString();
print('download url printed : $download_path');
}
IconButton(
icon: Icon(Icons.cloud_done),
onPressed: (){uploadFile(imageFile.toString());
},
),
log output:
D/Surface (18601): Surface::setBufferCount(this=0x9272d800,bufferCount=4)
D/GraphicBuffer(18601): register, handle(0x97ee29c0) (w:480 h:854 s:480 f:0x1 u:f02)
D/GraphicBuffer(18601): register, handle(0x97ee2e40) (w:480 h:854 s:480 f:0x1 u:f02)
D/GraphicBuffer(18601): register, handle(0x8ea20140) (w:480 h:854 s:480 f:0x1 u:f02)
W/System (18601): ClassLoader referenced unknown path: system/framework/mediatek-cta.jar
I/System.out(18601): e:java.lang.ClassNotFoundException: com.mediatek.cta.CtaHttp
I/System.out(18601): [OkHttp] sendRequest<<
D/GraphicBuffer(18601): register, handle(0x8ea21040) (w:480 h:854 s:480 f:0x1 u:f02)
W/System (18601): ClassLoader referenced unknown path: system/framework/mediatek-cta.jar
I/System.out(18601): e:java.lang.ClassNotFoundException: com.mediatek.cta.CtaHttp
I/System.out(18601): [OkHttp] sendRequest<<
I/flutter (18601): download url printed : https://firebasestorage.googleapis.com/v0/b/cloud-fs-demo.appspot.com/o/storeFolderName%2FIMG_20180711_080138.jpg?alt=media&token=6fb05871-04df-458d-93bc-1951cd122770
E/[EGL-ERROR](18601): __egl_platform_cancel_buffers:644: surface->num_buffers(4)

Answer 1

It doesn't really make sense to me that if you have the file why send the path to the file? What seems to be the error is that it doesn't find the location of the file. Instead, I would do something like this:
String download_path;
var imageFile;
picker() async{
File theImage = await ImagePicker.pickImage(
source: ImageSource.gallery);
imageFile = theImage;
var theimagepath = theImage.path;
setState(() {
imageFile = theImage;
});
}
Future<Null> uploadFile(File myFile)async{
final StorageReference sref =
FirebaseStorage.instance.ref().child('storeFolderName').child(myFile.toString());
final StorageUploadTask uploadTask = sref.putFile(myFile);
final Uri downloadUrl = (await uploadTask.future).downloadUrl;
download_path = downloadUrl.toString();
print('download url printed : $download_path');
}
IconButton(
icon: Icon(Icons.cloud_done),
onPressed: (){uploadFile(imageFile);
},
),

Answer 2

I have the same issue. The auto detect mime type doesn't seems to work, so I end up using the mime package and sending the mime type in StorageMetadata.

Answer 3

I also face this issue and after two days finally solve this by adding metaData, contentType. What interesting that in my case the same code work for android but was wrong for iOS.
so here is a code snippet which I use:
final File selectedImage = await ImagePicker.pickImage(
source: ImageSource.gallery,
);
filePath = selectedImage.path;
currentFile = selectedImage;
final StorageReference storageRef =
FirebaseStorage.instance.ref().child('images');
final StorageUploadTask task = storageRef.child('myImage.jpeg').putFile(selectedImage, StorageMetadata(contentType: 'image/jpeg'));
await task.onComplete; // do something
So without StorageMetadata of putFile method the images is uploading as application/octet-stream (only on iOS). But with metaData work just fine for me. Hope that was helpful.