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?

Artemis Georgakopoulou · Accepted Answer · 2020-12-21 11:37:52Z

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

answered Dec 21, 2020 at 11:37

Artemis Georgakopoulou

1,2496 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tizi Dev Over a year ago

Could you give me an example how to code it ?

Artemis Georgakopoulou Over a year ago

I haven't reproduced the issue, but the above command is for generating a file from Unit8List. Also I found this Stackoverflow post, which might assist you.

arab abdo · Accepted Answer · 2022-05-11 16:33:39Z

Change this line from:

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

To:

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related