CODEWITHSUNDEEP
flutterfirebase-storageflutter-web
Arbaz Irshad
Arbaz Irshad

Reputation: 809

Flutter web - Uploading image to firebase storage

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?

Upvotes: 5

Views: 4235

Answers (3)

persec10000
persec10000

Reputation: 1065

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

      });
    });

Upvotes: 1

Arbaz Irshad
Arbaz Irshad

Reputation: 809

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.

Upvotes: 13

Victor Eronmosele
Victor Eronmosele

Reputation: 7696

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

Upvotes: -1

Related Questions