Error uploading a photo to Firebase storage with Flutter Web using Pickers

Question

I read that Firebase storage is now compatible with Flutter web. I have this code with which I'm able to upload photos with my android version, but I keep getting this error in web. putfile() triggers the error:

Error: Unsupported operation: Platform._operatingSystem

My method for uploading looks like this:

  uploadImage() async {
    final _picker = ImagePicker();
    PickedFile image;
    if(kIsWeb){
      image = await _picker.getImage(source: ImageSource.gallery);
      var file = File(image.path);
      if (image != null)
      {
        var snapshot = await _storage.ref()
            .child('descriptionimages/'+widget.activity.id)
            .putFile(file);
        var downloadUrl = await snapshot.ref.getDownloadURL();
      }
      else print('No Path Received');
    }
  }

The problem could also be linked to the image picker that I'm using. In the Readme it says: Note that on the web platform (kIsWeb == true), File is not available, so the path of the PickedFile will point to a network resource instead.

UPDATE I installed this FilePicker and changed the code to make it like this:

  uploadImage() async {
    final _storage = FirebaseStorage.instance;
    PickedFile image;
    if(kIsWeb){
      FilePickerResult result = await FilePicker.platform.pickFiles();
      if (result != null)
      {
        File file = File(result.files.single.path);
        var snapshot = await _storage.ref()
            .child('descriptionimages/'+widget.activity.id)
            .putFile(file);
        var downloadUrl = await snapshot.ref.getDownloadURL();
        setState(()
        {
          widget.activity.image = downloadUrl;
          ActivityService().updateActivity(widget.activity);
        });
      }
      else print('No Path Received');
    }
}

Still, I get another error here in File file = File(result.files.single.path). The path is null and it results in an error. It seems that this plugin has the path null.

Is there any suggestion? I'll continue my research for a Picker that supports paths in web.

Which one are you refering to? I have versions just like in [FlutterFire](https://firebase.flutter.dev/docs/storage/overview/), [same with image_picker](https://pub.dev/packages/image_picker). — pepe calero, Dec 08 '20 at 16:35

score 2 · Answer 1 · answered Dec 09 '20 at 00:06

//This should be the correct code, happy coding!

uploadImage() async {

final _storage = FirebaseStorage.instance;
PickedFile image;
if(kIsWeb){
  FilePickerResult result = await FilePicker.platform.pickFiles();
  if (result != null)
  {
    File file = File(result.files.single.bytes);
    var snapshot = await _storage.ref()
        .child('descriptionimages/'+widget.activity.id)
        .putData(file);
    var downloadUrl = await snapshot.ref.getDownloadURL();
    setState(()
    {
      widget.activity.image = downloadUrl;
      ActivityService().updateActivity(widget.activity);
    });
  }
  else print('No Path Received');
}

}

Your solution looks cleaner than mine, good job! – pepe calero Dec 09 '20 at 08:56 — pepe calero, Dec 09 '20 at 08:56

score 1 · Answer 2 · answered Dec 08 '20 at 18:15

These guys here and here had the answer some months ago (my respects).

My code results to be like this and it works:

uploadImage() async {
    final _storage = FirebaseStorage.instance;
    final _picker = ImagePicker();
    PickedFile image;
    if(kIsWeb){
      image = await _picker.getImage(source: ImageSource.gallery);
      var bytes = await image.readAsBytes();
      if (image != null)
      {
        var ref= _storage.ref();
        var snapshot = await ref.child('descriptionimages/'+widget.activity.id)
            .putData(bytes);
        var downloadUrl = await snapshot.ref.getDownloadURL();
        setState(()
        {
          ...
        });
      }
      else print('No Path Received');
    }
}

score 0 · Answer 3 · edited Sep 27 '22 at 16:59

0

You can not use path on web using file_picker because paths are fake instead you must use bytes to pick up files and then use putData on firebase storage.

edited Sep 27 '22 at 16:59

General Grievance

4,555
31
31
45

answered Dec 08 '20 at 23:07

Javier Dextre Pittman

21
2

score 0 · Answer 4 · answered Jan 18 '22 at 23:22

In web you have to set metadata and use putData instead of putFile:

final metadata = firebase_storage.SettableMetadata(
    contentType: 'image/jpeg',
    customMetadata: {'picked-file-path': file.path});

if (kIsWeb) {
  uploadTask = ref.putData(await file.readAsBytes(), metadata);
} else {
  uploadTask = ref.putFile(io.File(file.path), metadata);
}

You can see the complete example in https://pub.dev/packages/firebase_storage/example

Error uploading a photo to Firebase storage with Flutter Web using Pickers

4 Answers4