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?

Answer 1

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.

Answer 2

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

      });
    });              

Answer 3

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())));