Uploading an Image to Firebase Storage with firebase_storage 4.0.0 on Flutter Web? - firebase-storage

Question

It looks like with the newest version(s) of Firebase Storage, the method .put(...) has been deprecated in favor of .putData(Uint8List) and .putFile(...), which I haven't found a solution for for Flutter Web yet.
The code I am trying is this, but it's not returning anything or throwing any errors.
_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) async {
setState(() {
uploadedImage = reader.result;
});
await uploadImage();
});
reader.onError.listen((fileEvent) {});
reader.readAsArrayBuffer(file);
}
});
}
Future uploadImage() async {
StorageReference storageReference =
FirebaseStorage.instance.ref().child(userID + '/userPhoto');
try {
StorageUploadTask uploadTask = storageReference.putData(uploadedImage);
await uploadTask.onComplete;
} catch (e) {
print(e);
}
print('File Uploaded');
storageReference.getDownloadURL().then((fileURL) {
setState(() {
_formData['photo'] = fileURL;
updateUserData({'photo': fileURL});
});
});
}
Is there anything I'm doing wrong or a better way to do this?

Answer 1

UPDATE - 14/04/2021 - Working with firebase_core: ^1.0.2 and firebase_storage: ^8.0.3
import 'package:firebase_storage/firebase_storage.dart';
import 'package:path/path.dart';
import 'dart:io';
Future uploadProfilePhotoToFirebase(File _image) async {
String fileName = basename(_image.path); //Get File Name - Or set one
Reference firebaseStorageRef = FirebaseStorage.instance.ref().child('uploads/$fileName');
TaskSnapshot uploadTask = await firebaseStorageRef.putFile(_image);
String url = await uploadTask.ref.getDownloadURL(); //Get URL
return await membersCollection.doc(uid).update({ //Update url in Firestore (if required)
'displayPhoto': url,
});
}
OLD ANSWER
Try using the firebase package - this is working on firebase 7.3.0 which is a dependency of firebase_core 0.5.0
import 'dart:async';
import 'package:firebase/firebase.dart' as fb;
import 'dart:html' as html;
String url;
Future<String> uploadProfilePhoto(html.File image, {String imageName}) async {
try {
//Upload Profile Photo
fb.StorageReference _storage = fb.storage().ref('displayPhotos/$imageName');
fb.UploadTaskSnapshot uploadTaskSnapshot = await _storage.put(image).future;
// Wait until the file is uploaded then store the download url
var imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
url = imageUri.toString();
} catch (e) {
print(e);
}
return url;
}