Flutter web - Upload Image File to Firebase Storage

Finally I managed to find a solution to this issue. To achieve this I needed to install two dependencies, firebase and universal_html. Yet difficult to find out the solution, its implementation was actually simple. Here is the code of the function I used to upload the html image file to Firebase Storage, into the "images" folder:

import 'dart:async';
import 'package:universal_html/prefer_universal/html.dart' as html;
import 'package:firebase/firebase.dart' as fb;

Future<Uri> uploadImageFile(html.File image,
      {String imageName}) async {
    fb.StorageReference storageRef = fb.storage().ref('images/$imageName');
    fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(image).future;
    
    Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    return imageUri;
}

I hope it helps someone with the same need as me.

Here is the complete snip that work for me for uploading image: html.File doesn't work for me, the file is uploaded but you will see Error loading preview in firebase storage, so just passing the bytes directly work for me.

To show an image you can use mediaInfo.bytes with widget that support bytes e.g FadeInImage you can use MemoryImage(mediaInfo.bytes) and Image.memory(mediaInfo.bytes)

packages used:

1. firebase
2. image_picker_web
3. path
4. mime_type

    Future<MediaInfo> imagePicker() async {    
        MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
        return mediaInfo;
     }
     
     Future<Uri> uploadFile(
          MediaInfo mediaInfo, String ref, String fileName) async {
        try {
          String mimeType = mime(Path.basename(mediaInfo.fileName));

          // html.File mediaFile =
          //     new html.File(mediaInfo.data, mediaInfo.fileName, {'type': mimeType}); 
          final String extension = extensionFromMime(mimeType);

          var metadata = fb.UploadMetadata(
            contentType: mimeType,
          );

          fb.StorageReference storageReference =
              fb.storage().ref(ref).child(fileName + ".$extension");

          fb.UploadTaskSnapshot uploadTaskSnapshot =
              await storageReference.put(mediaInfo.data, metadata).future;

          Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
          print("download url $imageUri");
          return imageUri;
        } catch (e) {
          print("File Upload Error $e");
          return null;
        }
      }

After Combining so many posts I did it, and it works!

No, you just don't need any Kind of Universal_HTML or another image_picker_web. Just stick with Image Picker(https://pub.dev/packages/image_picker). And use the below code as I have used to upload the Image to Firebase Storage, and it works in all the way IOS, Android, Web, I hope you've already added the permission for ios and android. Let's Begin!

Import

import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as Path;

Call this method when you want to open a file picker in any of the above platforms!

chooseImage() async {
PickedFile? pickedFile = await ImagePicker().getImage(
      source: ImageSource.gallery,
    );
}

now you've file in pickedFile use kIsWeb to find out if it's web or not!

uploadImageToStorage(PickedFile? pickedFile) async {
if(kIsWeb){
Reference _reference = _firebaseStorage
        .ref()
        .child('images/${Path.basename(pickedFile!.path)}');
    await _reference
        .putData(
      await pickedFile!.readAsBytes(),
      SettableMetadata(contentType: 'image/jpeg'),
    )
        .whenComplete(() async {
      await _reference.getDownloadURL().then((value) {
        uploadedPhotoUrl = value;
      });
    });
 }else{
//write a code for android or ios
}

}