Upload image picked from Flutter web to firebase storage and to Firestore

Question

I was able to picked up image from flutter web with the code:

Uint8List uploadedImage;


  _startFilePicker() async {
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      // read file content as dataURL
      final files = uploadInput.files;
      if (files.length == 1) {
        final file = files[0];
        FileReader reader =  FileReader();

        reader.onLoadEnd.listen((e) {
          setState(() {
            uploadedImage = reader.result;
          });
        });

        reader.onError.listen((fileEvent) {
          setState(() {
            Text( "Some Error occured while reading the file");
          });
        });

        reader.readAsArrayBuffer(file);
      }
    });
  }

  Widget uploadImage() {
    return Container(
      width: 530,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          uploadedImage == null ? CircleAvatar(
            radius: 60,
            backgroundColor: Colors.grey[100],
            backgroundImage: AssetImage('assets/images/profileavatar.png'),
          ):
            CircleAvatar(
              radius: 65,
              backgroundImage: AssetImage('assets/images/backgroundslide.gif'),
              child: CircleAvatar(
                radius: 60,
                backgroundImage: MemoryImage(uploadedImage),
              ),
            )  ,
          SizedBox(
            width: 20,
          ),
          uploadedImage == null ? RaisedButton(
            color: Colors.orange,
            onPressed: () {
              _startFilePicker();
            },
            child: Text(
              'Aggiungi un immagine profilo',
              style: TextStyle(color: Colors.white, fontSize: 12),
            ),
          ): RaisedButton(
            color: Colors.orange,
            onPressed: () {
              _startFilePicker();
            },
            child: Text(
              'Modifica immagine profilo',
              style: TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),

        ],
      ),
    );
  }

in that way I got succesfully the image from Desktop. Now I need to upload this image to storage in flutter and get into Collection in Firestore:

var firebaseUser =  FirebaseAuth.instance.currentUser;

  Future<Uri> uploadImageFile(html.File uploadedImage,
      {String imageName}) async {
    fb.StorageReference storageRef = fb.storage().ref('images/$imageName');
    fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(uploadedImage).future;
    await FirebaseFirestore.instance.collection('ifUser').doc(firebaseUser.uid)
        .update({"avatarImage": uploadImageFile(uploadedImage),});
    Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    return imageUri;
  }

when I call the function uploadImageFile(uploadedImage); I get error:

The argument type 'Uint8List' can't be assigned to the parameter type 'File'. Is that a right way?

Answer 1

From the error it seems like the upload expects a File and you are passing Uint8List.

You can try using this to convert the data before uploading it to storage.

File.fromRawPath(Uint8List uint8List);

Answer 2

Change this line from:

    fb.UploadTaskSnapshot uploadTaskSnapshot = await         
    storageRef.put(uploadedImage).future;

To:

    fb.UploadTaskSnapshot uploadTaskSnapshot = await         
    storageRef.putData(uploadedImage).future;