On flutter web, I pick an image file from the computer and get a File image object. Then I want to upload it to Firebase Storage. For Android and iOS versions of the app I was using a Firebase Cloud Function and an http multipart request. It worked, but for the web version of the app it doesn't. So,
How can I upload an html image file to Firebase Storage, either directly or through a Cloud Function?
Finally I managed to find a solution to this issue. To achieve this I needed to install two dependencies, firebase and universal_html. Yet difficult to find out the solution, its implementation was actually simple. Here is the code of the function I used to upload the html image file to Firebase Storage, into the "images" folder:
import 'dart:async'; import 'package:universal_html/prefer_universal/html.dart' as html; import 'package:firebase/firebase.dart' as fb; Future<Uri> uploadImageFile(html.File image, {String imageName}) async { fb.StorageReference storageRef = fb.storage().ref('images/$imageName'); fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(image).future; Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL(); return imageUri; } I hope it helps someone with the same need as me.
import 'dart:html' as html;?
putString instead of put like the above. More documentation on putString can be found hereAfter Combining so many posts I did it, and it works!
No, you just don't need any Kind of Universal_HTML or another image_picker_web. Just stick with Image Picker(https://pub.dev/packages/image_picker). And use the below code as I have used to upload the Image to Firebase Storage, and it works in all the way IOS, Android, Web, I hope you've already added the permission for ios and android. Let's Begin!
Import
import 'package:firebase_storage/firebase_storage.dart'; import 'package:image_picker/image_picker.dart'; import 'package:path/path.dart' as Path; Call this method when you want to open a file picker in any of the above platforms!
chooseImage() async { PickedFile? pickedFile = await ImagePicker().getImage( source: ImageSource.gallery, ); } now you've file in pickedFile use kIsWeb to find out if it's web or not!
uploadImageToStorage(PickedFile? pickedFile) async { if(kIsWeb){ Reference _reference = _firebaseStorage .ref() .child('images/${Path.basename(pickedFile!.path)}'); await _reference .putData( await pickedFile!.readAsBytes(), SettableMetadata(contentType: 'image/jpeg'), ) .whenComplete(() async { await _reference.getDownloadURL().then((value) { uploadedPhotoUrl = value; }); }); }else{ //write a code for android or ios } } 
TLDR: Convert your files to XFiles using the cross_file package before uploading.
Use the image_picker package to select an image. This works on Android, iOS, and the web.
Future<String?> selectPicture(ImageSource source) async { XFile? image = await imagePicker.pickImage( source: source, maxHeight: 1000, maxWidth: 1000, ); return image?.path; } String path = selectPicture(ImageSource.gallery); Uint8List imageData = await XFile(path).readAsBytes() UploadTask uploadTask = storageReference.putData(imageData); 
Here is the complete snip that work for me for uploading image: html.File doesn't work for me, the file is uploaded but you will see Error loading preview in firebase storage, so just passing the bytes directly work for me.
To show an image you can use mediaInfo.bytes with widget that support bytes e.g FadeInImage you can use MemoryImage(mediaInfo.bytes) and Image.memory(mediaInfo.bytes)
packages used:
Future<MediaInfo> imagePicker() async { MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo; return mediaInfo; } Future<Uri> uploadFile( MediaInfo mediaInfo, String ref, String fileName) async { try { String mimeType = mime(Path.basename(mediaInfo.fileName)); // html.File mediaFile = // new html.File(mediaInfo.data, mediaInfo.fileName, {'type': mimeType}); final String extension = extensionFromMime(mimeType); var metadata = fb.UploadMetadata( contentType: mimeType, ); fb.StorageReference storageReference = fb.storage().ref(ref).child(fileName + ".$extension"); fb.UploadTaskSnapshot uploadTaskSnapshot = await storageReference.put(mediaInfo.data, metadata).future; Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL(); print("download url $imageUri"); return imageUri; } catch (e) { print("File Upload Error $e"); return null; } } To access Cloud Storage in your Flutter for Web application, you can use the firebase-dart plugin. You can find an example of accessing storage through firebase-dart in the repo.
Use the image_picker package to select an image.
Future<void> imgFromGallery() async { final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery); Uint8List imageData = await XFile(pickedFile!.path).readAsBytes(); uploadImage(imageData ); } Use the UUID package to create a unique name.
Future<String> uploadImage(Uint8List xfile) async { Reference ref = _storage.ref().child('Folder'); String id = const Uuid().v1(); ref = ref.child(id); UploadTask uploadTask = ref.putData( xfile, SettableMetadata(contentType: 'image/png'), ); TaskSnapshot snapshot = await uploadTask; String downloadUrl = await snapshot.ref.getDownloadURL(); return downloadUrl; } Future<void> addData() async { try { await FirebaseFirestore.instance.('DBname').add({'image':downloadUrl}); } on FirebaseException catch (e) { } catch (_) { } } >_ icon button in the top navbar.[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ] gsutil cors set cors.json gs://your-bucket Note: replace your bucket id from firebase Storage
Image.network(widget.project.image!) web/index.html
<HTML> .... <body> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js"; import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-storage.js"; import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js"; const firebaseConfig = { apiKey: "....", authDomain: "...", projected: "....", storageBucket: "...", messagingSenderId: "....", appId: "....", measurementId: "...." }; const app = initializeApp(firebaseConfig); </script> .... </body> </html> 
void uploadImage({required Function(File? file) onSelected}) { var uploadInput = FileUploadInputElement()..accept = 'image/*'; uploadInput.click(); uploadInput.onChange.listen((event) async { final file = uploadInput.files!.first; final reader = FileReader(); reader.readAsDataUrl(file); reader.onLoadEnd.listen((event) async { onSelected(file); }); }); } void uploadToStorage() { final dateTime = DateTime.now(); final userId = FirebaseAuth.instance.currentUser!.uid; imagePath = '$userId/$dateTime'.replaceAll(' ', ''); uploadImage(onSelected: (file) { try { fb.storage().refFromURL('{reference url from firebase}').child(imagePath).put(file); } catch (e) { print('uploadImage $e'); } }); } Call uploadToStorage function on button click and to show the image,
Future<Uri> downloadImageUrl(String? path) { print( 'downloadImageUrl:: ${fb.storage().refFromURL('{reference url from firebase}').child(path!).getDownloadURL()}'); return fb .storage() .refFromURL('gs://onehourappbuildpractice.appspot.com/') .child(path) .getDownloadURL(); } FutureBuilder<Uri>( future: downloadImageUrl( controller.hiddenGemList[i].imagePath!), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return Center( child: CircularProgressIndicator(), ); } return Container( height: 100, width: 200, child: FadeInImage.assetNetwork( image: snapshot.data.toString(), placeholder: 'assets/placeholder_image.jpeg', )); }) Adding on to @WebRooseDevelopment you may also need to update the index.html file to include the new firebase versions.
'src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js">'
firebase-dart: github.com/FirebaseExtended/firebase-dart/tree/master/example/…