Flutter web - Uploading image to firebase storage

Question

I am using the firebase_storage: ^8.0.6 package on flutter web. I want to upload image to firebase storage that I get using FilePicker package. The problem is that the new package uses the putFile() method to upload files. But File from dart:io doesn't work on flutter web and it also doesn't accept the File object from dart:html.

I can upload image as Blob using the putBlob() method but then it doesn't upload it as image type but it's type is application/octet-stream. I don't want to upload the image file as a blob.

  Future<String> uploadImage(PlatformFile file) async {
    try {

      TaskSnapshot upload = await FirebaseStorage.instance
          .ref(
              'events/${file.name}-${DateTime.now().toIso8601String()}.${file.extension}')
          .putBlob(Blob(file.bytes));

      String url = await upload.ref.getDownloadURL();
      
      return url;
    } catch (e) {
      print('error in uploading image for : ${e.toString()}');
      return ';
    }
  }

How to fix this issue?

Does this answer your question? [Flutter web - Upload Image File to Firebase Storage](https://stackoverflow.com/questions/59716944/flutter-web-upload-image-file-to-firebase-storage) — Darshan, May 22 '21 at 13:00
@DarShan The question uses put and i am using putFile which accepts file from dart not from universal_html. — Arbaz Irshad, May 22 '21 at 13:33

score 12 · Accepted Answer · answered May 24 '21 at 15:43

You can use the putData() method to send the image and set it's metadata as a image.

  Future<String> uploadImage(PlatformFile file) async {
    try {

      TaskSnapshot upload = await FirebaseStorage.instance
          .ref(
              'events/${file.path}-${DateTime.now().toIso8601String()}.${file.extension}')
          .putData(
            file.bytes,
            SettableMetadata(contentType: 'image/${file.extension}'),
          );

      String url = await upload.ref.getDownloadURL();
      return url;
    } catch (e) {
      print('error in uploading image for : ${e.toString()}');
      return '';
    }
  }

putData() method takes Uint8List by default.

score 0 · Answer 2 · answered Jan 22 '22 at 02:45

Uploading images using TaskSnapshot is not working on my flutter web project. I used firebase_storage: ^8.1.3 . Following code is working for my web project.

String nameImage = DateTime.now().millisecondsSinceEpoch.toString();

Reference _reference = FirebaseStorage.instance
        .ref()
        .child('images/$nameImage.png}');
    await _reference
        .putData(
      await image.readAsBytes(),
      SettableMetadata(contentType: 'image/jpeg'),
    )
        .whenComplete(() async {
      await _reference.getDownloadURL().then((value) {

        user.profilePictureURL = value;
        FireStoreUtils.firestore
          .collection(USERS)
          .doc(user.userID)
          .update({'profilePictureURL': user.profilePictureURL});

      });
    });

score -1 · Answer 3 · answered May 22 '21 at 23:40

-1

You can still use .putFile when you use the File.fromUri() constructor and get the Uri from the PlatformFile object using Uri.dataFromBytes and passing the bytes to it.

The code below contains changes that should remove the error:

    TaskSnapshot upload = await FirebaseStorage.instance
        .ref(
            'events/${file.name}-${DateTime.now().toIso8601String()}.${file.extension}')
        .putFile(File.fromUri(Uri.dataFromBytes(file.bytes.toList())));

answered May 22 '21 at 23:40

Victor Eronmosele

7,040
2
10
33

1

Hey, It doesn't work. "Unsupported operation: Cannot extract a file path from a data URI" - This is the error i get. dart:io is not available for browser-based apps. That's why i can't use the File Object. – Arbaz Irshad May 23 '21 at 16:17

Flutter web - Uploading image to firebase storage

3 Answers3