Undefined class StorageReference when using Firebase Storage

Question

i am trying to upload image, and the same process is working for my other app, but here it gives these errors, can you guy plz help?

Future getImage1() async {
    // ignore: deprecated_member_use
    var firstImage = await ImagePicker.pickImage(
        source: ImageSource.gallery, imageQuality: 65);
    setState(() {
      _image1 = firstImage;
    });
  }

Vasos

did you add firebase_storage? – Loadstone

yes, I did @PeterHaddad – Vasos

Answer 1

Starting from Version firebase_storage 5.0.1:

You have to do the following:

FirebaseStorage storage = FirebaseStorage.instance;
Reference ref = storage.ref().child("image1" + DateTime.now().toString());
UploadTask uploadTask = ref.putFile(_image1);
uploadTask.then((res) {
   res.ref.getDownloadURL();
});

StorageReference class has been removed and now you have to use the class Reference. UploadTask extends Task, which also implements Future<TaskSnapshot>. Therefore all the methods that are in the class Future can be used on the class UploadTask.

So to get the url of the image, you need to use the then() method which registers a callback to be called when this future completes.

Loadstone

How do you return the url from this? – Keller

@Keller if you want to return the url, then create a method of type Future<String> and use async/await instead of then – Loadstone

Answer 2

As mentioned by @PeterHadad there are a few breaking changes in firebase storage 5.0.1. The classes have been renamed but maintain most of their old functionalities.

You can also use .whenComplete() to get the download URL as follows-

uploadPic(File _image1) async {
   FirebaseStorage storage = FirebaseStorage.instance;
   String url;
   Reference ref = storage.ref().child("image1" + DateTime.now().toString());
   UploadTask uploadTask = ref.putFile(_image1);
   uploadTask.whenComplete(() {
      url = ref.getDownloadURL();
   }).catchError((onError) {
    print(onError);
    });
   return url;
}

Analysand

uploadTask.whenComplete(() async { url = await ref.getDownloadURL(); }).catchError((onError) { print(onError); }); – Hoofbound

Answer 3

Pick image from gallery and store it firebase storage in images folder like this :

final XFile? image = await ImagePicker().pickImage(source: source);
FirebaseStorage storage = FirebaseStorage.instance;
Reference ref = storage.ref().child("images/"+DateTime.now().toString());
UploadTask uploadTask = ref.putFile(File(image!.path));
uploadTask.then((res) {
  res.ref.getDownloadURL();
});

Make sure to add image_picker and firebase_storage in your pubspec.yaml file as dependencies.

Document

Answer 4

Looks like you haven't added dependency in pubspec.yaml file or maybe you didn't imported package in your dart file. That's why you're getting error.

Check the package site for example on how to use: https://pub.dev/packages/firebase_storage

Tina

Answer 5

If you want a function that returns the url you can use

Future<String> uploadPicture(XFile image, Reference ref) async {
    File imageFileToSave = File(image.path);

    UploadTask uploadTask = ref.putFile(imageFileToSave);
    String url = await uploadTask.then((res) {
      return res.ref.getDownloadURL();
    });
    return url;
  }

Now to retrieve the url by calling this function simply do:

String imageUrl = await uploadPicture(newImage, ref);

Vicennial