Store image uploaded by user into Flutter Web as an actual .jpg file

Question

I am using the flutter_web_image_picker package to allow the user to select -and then upload to Firebase- an image.

However, the package returns an image widget, which I can display, but I cannot upload to Firebase. Therefore, I am trying to read the package's code and update it to fit my needs.

In general, I think the packages main functionalities are:

It gets the file

//...
final reader = html.FileReader();
reader.readAsDataUrl(input.files[0]);
await reader.onLoad.first;
final encoded = reader.result as String;

Then it 'strippes' it

final stripped = encoded.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');
final imageName = input.files?.first?.name;
//...

To finally return it as a Widget:

final imageName = imageName;
final imageData = base64.decode(stripped);
return Image.memory(imageData, semanticLabel: imageName);

As I said, it works perfectly, however, I need to adapt it to my needs:

I would like to get the image as a .jpg file so that I can upload it to Firebase.

Is any of the variables above the actual .jpg file? Is there any transformation that I should perform to get a .jpg file?

Thanks!

Answer 1

I based my answer on this post.

Basically, on the flutter_web_image_picker package, before the code I posted, there were a few lines that get an actual html file:

final html.FileUploadInputElement input = html.FileUploadInputElement();
input..accept = 'image/*';
input.click();
await input.onChange.first;
if (input.files.isEmpty) return null;

Then using firebase's pacakge, I uploaded the image as follow:

import 'package:firebase/firebase.dart' as fb;
fb.StorageReference storageRef = fb.storage().ref('myLocation/filename.jpg'); 
fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(input.files[0]).future;
    
Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
return imageUri;