Flutter web - Upload Image File to Firebase Storage

Question

On flutter web, I pick an image file from the computer and get a File image object. Then I want to upload it to Firebase Storage. For Android and iOS versions of the app I w

Answer 1

Related Addendum: How to download: Why this was such a hidden secret, I have no idea. Thanks to Learn Flutter Code for this nice little tutorial.

Don't make Firebase Storage a dependency, just Firebase with:

import 'package:firebase/firebase.dart' as fb;

Then create a method:

        Future<Uri> myDownloadURL() async {return await fb.storage().refFromURL('gs://<your storage reference>').child('$id.jpg').getDownloadURL();}

Call it from a FutureBuilder like so:

        FutureBuilder<Uri>(
        future: myDownloadURL(),
        builder: (context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return <Something as a placeholder>;
          }
          return CircleAvatar(
            radius: backgroundRadius * 2,
            child: Image.network(snapshot.data.toString()),
          );
        },
      )

Answer 2

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;
        }
      }

Answer 3

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.

Answer 4

To access Cloud Storage in your Flutter for Web application, you can use the firebase-dart plugin. You can find an example of accessing storage through firebase-dart in the repo.