How to upload an image file to Firebase Storage and show it in the Flutter web app

Question

Good day,

I'm implementing a function that users can upload their picture on my Flutter Web app and the app shows it.

I'm trying to make this as below

When a user uploads an image file, it is uploaded on Firebase Storage as BYTES (I know that an image file itself can't upload by Flutter WEB app, must be converted to bytes. true?)
The download URL of the bytes file is stored in Firestore.
My app finds the download URL and shows the image file(bytes) using the URL if it is.

The method used is Image.network(downloadURL), but it seems the file in the url must be an image file, otherwise, throws an error.

I wonder how to show an image file converted to BYTES from the download URL in the Flutter WEB app.

Or upload an image file itself to Firebase Storage in the Flutter WEB app.

App finds download URL with below code

 String? profileDownloadURL; @override initState() { super.initState(); email = FirebaseAuth.instance.currentUser!.email; getProfileURL(); } getProfileURL() async { DocumentSnapshot<Map<String, dynamic>> documentSnapshot = await FirebaseFirestore.instance.collection('Users').doc(email).get(); setState(() { profileDownloadURL = documentSnapshot.data()!['profileDownloadURL']; }); print('profile: $profileDownloadURL'); }

User can select an image file with below method

 startWebFilePicker() async { FilePickerResult? result = await FilePicker.platform.pickFiles(); if (result != null) { final email = FirebaseAuth.instance.currentUser!.email; final storageRef = FirebaseStorage.instance.ref(); final profileRef = storageRef.child(email!).child(result.files.single.name); try { // upload a byte-converted image file to Firebase Storage await profileRef.putData(result.files.single.bytes!); // update download URL on Firestore String downloadURL = await profileRef.getDownloadURL(); FirebaseFirestore.instance.collection('Users').doc(email).set( {'profileDownloadURL': downloadURL}, SetOptions(merge: true), ); } on FirebaseException catch (e) { print('1: $e'); } catch (e) { print('2: $e'); } } else { // User canceled the picker } }

App shows an image as below

Container( child: profileDownloadURL != null ? CircleAvatar( radius: 100, backgroundImage: Image.network( profileDownloadURL!, fit: BoxFit.fill, ).image, ) : const CircleAvatar( radius: 100, child: Icon( Icons.person, ), ), ),

Shion, I have provided the recommendations in my answer below, let me know if they were helpful. — Vaidehi Jamankar
– Vaidehi Jamankar, Commented Dec 13, 2022 at 7:35

Akshay Singhal · Accepted Answer · 2022-12-09 10:23:16Z

Try using sending metadata contentType: "image/jpeg" in await imageRef .putFile(selectedImagePath, metadata)

 try { final storageRef = FirebaseStorage.instance.ref(); final imageRef = storageRef.child("no_image.jpg"); final ImagePicker picker = ImagePicker(); // Create file metadata including the content type XFile? image = await picker.pickImage(source: ImageSource.gallery); if (image != null) { File selectedImagePath = File(image.path); var metadata = SettableMetadata( contentType: "image/jpeg", ); await imageRef .putFile(selectedImagePath, metadata) .whenComplete(() { ShowSnack.showToast("File Uploaded..."); }); } else { ShowSnack.showToast("No file selected"); } } on FirebaseException catch (e) { // ... }

See result

Check full example on gist - https://gist.github.com/akshaysinghhal/66e2ebaf61747040a76c62f826e8e8d1#file-upload_image-dart

Vaidehi Jamankar · Accepted Answer · 2022-12-09 14:10:50Z

To upload a file to Cloud Storage, you first create a reference to the full path of the file, including the file name.Once you've created an appropriate reference, you then call the putFile(), putString(), or putData() method to upload the file to Cloud Storage.
A full example of an upload with progress monitoring and error handling can be found here
Additionally, I would suggest you review this thread Firebase Cloud Storage in Flutter.
Here are a few example of similar implementations:

Also take a look at these public blogs for more examples;not official by Google:

Sunil Shukla · Accepted Answer · 2022-12-09 06:00:29Z

FirebaseStorage storage = FirebaseStorage.instance; Reference ref = storage.ref().child(pathname + DateTime.now().toString()); await ref.putFile(File(_image.path)); String imageUrl = await ref.getDownloadURL(); print(imageUrl);

Collectives™ on Stack Overflow

How to upload an image file to Firebase Storage and show it in the Flutter web app

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related