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

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