Get Download URL from Firebase Storage in Flutter

Question

I'm currently exploring Flutter, I found there is an official Firebase Storage plugin in Flutter firebase_storage I have storage reference like this one:

final StorageReference ref = FirebaseStorage.instance.ref().child("default.png");

But there is no method to get download URL from that StorageReference.

How do you upload the image? I haven't seen a simple way to get a download path from a `StorageReference` yet. I think the Firebase Storage plugin is still missing some features to be able to do something like shown in https://firebase.google.com/docs/storage/web/download-files — Günter Zöchbauer, Jan 25 '18 at 07:08
As Gunter mentioned, there's no way get the download path before uploading the image in first place. — Rosário Pereira Fernandes, Jan 25 '18 at 14:13
I uploaded the image manually from firebase console. It just a few lines to wrap native firebase storage library to flutter platform channel. Well I've done it by extending current plugin to my own — Putra Ardiansyah, Jan 27 '18 at 21:37
This isn't implemented yet, but we're working on it. In the meantime pull requests are very welcome. — Collin Jackson, Jan 31 '18 at 18:11
@CollinJackson Is there an issue I can subscribe to? How to I follow progress on this? — Procedurally Generated, Feb 21 '18 at 12:45
I sent a pull request for this https://github.com/flutter/plugins/pull/390/files — Procedurally Generated, Feb 21 '18 at 13:58

score 29 · Answer 1 · edited Oct 18 '18 at 16:35

29

If the above solution doesn't work, try this:

Future<String> uploadImage(var imageFile ) async {
    StorageReference ref = storage.ref().child("/photo.jpg");
    StorageUploadTask uploadTask = ref.putFile(imageFile);

    var dowurl = await (await uploadTask.onComplete).ref.getDownloadURL();
    url = dowurl.toString();

    return url; 
}

edited Oct 18 '18 at 16:35

Evan Wieland

1,445
1
20
36

answered Oct 18 '18 at 16:24

Alex Moon

319
3
4

Now that's the correct way to do it. Thanks, mate, spent like two hours figuring out wtf! – jujka Aug 04 '19 at 09:24
3

The above way is now deprecated, check this answer: https://stackoverflow.com/a/64764390/7015400 – Peter Haddad Nov 10 '20 at 08:27
Can you please check out my question if possible https://stackoverflow.com/questions/68351097/reading-firebase-storage-image-security-rules – Noobdeveloper Jul 12 '21 at 18:04

score 11 · Answer 2 · answered Sep 26 '18 at 08:19

11

use url like this:

printUrl() async {
    StorageReference ref = 
        FirebaseStorage.instance.ref().child("images/sky.jpg");
    String url = (await ref.getDownloadURL()).toString();
    print(url);
}

answered Sep 26 '18 at 08:19

Dan Alboteanu

9,404
1
52
40

score 7 · Answer 3 · answered Nov 07 '20 at 21:22

7

At latest version firebase_storage: ^5.0.1 Approach should be like below:

Reference reference = FirebaseStorage.instance.ref().child("SupportChatImages").child(fileName);

    UploadTask uploadTask =  reference.putFile(imageFile);

    uploadTask.whenComplete(() async{

      try{
        imageUrl = await reference.getDownloadURL();
      }catch(onError){
        print("Error");
      }

      print(imageUrl);

    });

answered Nov 07 '20 at 21:22

Md Mahmudul Islam

2,514
4
18
33

1

Thanks a lot for this answer! – Krishna Shetty Dec 02 '20 at 16:21
Hello, This works for 1 file, However I am not sure hot to make it working for a list of files. I need to do something like ``` Future> _uploadFiles(List files) async {``` in previous version it is working fine with StorageTaskSnapshot snapshot = await uploadTask.onComplete; because of "await" inside for loop. – Ishaan Puniani Dec 06 '20 at 00:47
This is the perfect solution – Dario Brux Sep 12 '22 at 20:11

score 6 · Answer 4 · edited Dec 03 '18 at 10:52

6

I had Implemented a method to save your image with a timestamp and get the downloadable url.

Future<String>photoOption() async {
    try {
        DateTime now = new DateTime.now();
        var datestamp = new DateFormat("yyyyMMdd'T'HHmmss");
        String currentdate = datestamp.format(now);
        File imageFile = await ImagePicker.pickImage();


        StorageReference ref = FirebaseStorage.instance
            .ref()
            .child("images")
            .child("$currentdate.jpg");
        StorageUploadTask uploadTask = ref.putFile(imageFile);

        Uri downloadUrl = (await uploadTask.future).downloadUrl;
        addUser.downloadablelink = downloadUrl.toString();

        downloadableUrl = downloadUrl.toString();

        print(downloadableUrl);

    } catch (error) {
        print(error);
    }

    return downloadableUrl;
}

edited Dec 03 '18 at 10:52

Alex Meuer

1,621
3
26
37

answered Feb 26 '18 at 05:25

siva kumar

2,745
6
19
29

if I want to downlaod all files from a folder, can I just provide the folder name? – grepLines Apr 10 '18 at 22:58
https://stackoverflow.com/questions/37335102/how-to-get-a-list-of-all-files-in-cloud-storage-in-a-firebase-app – siva kumar Apr 14 '18 at 09:23
2

`put` is deprecated. Make use of `putFile` . – nonybrighto Nov 30 '18 at 15:53
1

The getter 'future' isn't defined for the class 'StorageUploadTask – Midhilaj Mar 08 '19 at 09:52

Shahid Bangash · Answer 5 · 2021-07-18T13:53:49.503

5

For firebase_storage: ^10.0.1

Here is the code to get URL of Uploaded Image..

uploadImagetFirebase(String imagePath) async {
 await FirebaseStorage.instance
  .ref(imagePath)
  .putFile(File(imagePath))
  .then((taskSnapshot) {
print("task done");

// download url when it is uploaded
if (taskSnapshot.state == TaskState.success) {
  FirebaseStorage.instance
      .ref(imagePath)
      .getDownloadURL()
      .then((url) {
    print("Here is the URL of Image $url");
    return url;
  }).catchError((onError) {
    print("Got Error $onError");
  });
}
});
}

edited Jul 18 '21 at 13:53

answered Jul 18 '21 at 13:35

Shahid Bangash

1
2
8

1

Thank you for this answer with the latest version, I was looking for something like this ! – Nicolas Le Bot Oct 07 '21 at 13:14

Louiza Benhizia · Answer 6 · 2019-09-12T21:08:16.993

3

Future<String> urlDownload(file) async {
var uuid = Uuid().v1();
StorageReference ref =
    FirebaseStorage.instance.ref().child("post_$uuid.jpg");
StorageUploadTask uploadTask = ref.putFile(file);

String downloadUrl =
    await (await uploadTask.onComplete).ref.getDownloadURL();
return downloadUrl;}

edited Sep 12 '19 at 21:08

answered Sep 12 '19 at 20:56

Louiza Benhizia

39
2

4

You should consider adding text to explain the code in the answer – Sep 12 '19 at 21:18

score 1 · Answer 7 · answered Jul 08 '19 at 08:46

1

He is my solution :

StorageReference storageReference = FirebaseStorage.instance.ref().child("myfile"); 
StorageUploadTask uploadTask = storageReference.putFile(file);
uploadTask.onComplete.then((s){ 
   s.ref.getDownloadURL(); 
});

answered Jul 08 '19 at 08:46

touti

1,164
6
18

score 1 · Answer 8 · answered Sep 04 '19 at 09:49

My Solution

Future mainprofile(File image) async {
    try {
      DateTime now = new DateTime.now();
      var datestamp = new DateFormat("yyyyMMdd'T'HHmmss");
      String currentdate = datestamp.format(now);
      _firebaseStorageRef = FirebaseStorage.instance
          .ref()
          .child(userRepository.uid)
          .child('main')
          .child("$currentdate.jpg");
      StorageUploadTask uploadTask = _firebaseStorageRef.putFile(image);
      uploadTask.onComplete.then((onValue) async {
        _mainurl = (await _firebaseStorageRef.getDownloadURL()).toString();
      });
    } catch (error) {
      print(error);
    }
  }

score 1 · Answer 9 · answered Feb 08 '21 at 11:02

I have tried many ways and this worked for me after many tries as Firebase Storage removing old methods. If anyone getting error of 404 Object not found Then the below code also solves that.

Future<String> uploadSingleImage(File file) async {
    //Set File Name
    String fileName = DateTime.now().millisecondsSinceEpoch.toString() +
        AuthRepository.getUser().uid +
        '.jpg';
    
    //Create Reference
    Reference reference = FirebaseStorage.instance
        .ref()
        .child('Single Post Images')
        .child(fileName);

    //Now We have to check the status of UploadTask
    UploadTask uploadTask = reference.putFile(file);
    
    String url;
    await uploadTask.whenComplete(() async {
      url = await uploadTask.snapshot.ref.getDownloadURL();
    });
   
    return url;
  }

score 1 · Answer 10 · answered Feb 25 '22 at 06:15

1

try this

 Future<String> downloadFromFirebase() async {
  // Create reference
    StorageReference ref = FirebaseStorage.instance.ref().child("default.png");
    String _myUrl = await ref.getDownloadURL();
    return _myUrl.toString();
}

answered Feb 25 '22 at 06:15

Sonu Saini

1,814
9
16

score 0 · Answer 11 · answered Apr 18 '20 at 17:20

Here is my solution

this part is how i get image from picker

 Future getImage() async {
  var image = await ImagePicker.pickImage(source: ImageSource.gallery);

  setState(() {
    _image = image;
      print('Image Path $_image');
  });
}

than i upload it

 Future uploadPic(BuildContext context) async {

  String fileName = basename(_image.path);
  StorageReference firebaseStorageRef = FirebaseStorage.instance.ref().child(fileName);
  StorageUploadTask uploadTask = firebaseStorageRef.putFile(_image);
  StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;


  final String url = (await taskSnapshot.ref.getDownloadURL());
  print('URL Is $url');
}

hope it will help someone

score 0 · Answer 12 · answered Oct 05 '20 at 18:48

Here is my approach, to upload an image to Firebase Storage and get the dowlad URL

 var img_name=DateTime.now().millisecondsSinceEpoch.toString()+".png";

 final StorageReference storageReference = FirebaseStorage.instance.ref().child("images/profile/"+img_name);

 var upload= await storageReference.putFile(croppedFile);
 await upload.onComplete;

 var url=await storageReference.getDownloadURL();
 print(url.toString());

score 0 · Answer 13 · answered Jul 11 '21 at 16:55

**Solution for latest firebase_storage 9.0.0 **

Future<void> _uploadImage() async {
if (_image != null) {
  final fileName = '${DateTime.now()}.jpeg';
  Reference reference = _firebaseStorage.ref('uploads/$fileName');
  TaskSnapshot taskSnapshot = await reference
      .putFile(_image!)
      .whenComplete(() => reference.getDownloadURL());

  print(taskSnapshot.ref.fullPath.toString());

  setState(() {
    _imageUploadState = ImageUploadState.done;
  });
}

}

score 0 · Answer 14 · answered Oct 08 '21 at 13:19

For firebase_storage: ^10.0.1

import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;

String image = 'gs://ID.appspot.com/image/1026_800x800.jpg';

firebase_storage.FirebaseStorage.instance.refFromURL(image).getDownloadURL().then((url) async {
                  print(url);
                });

Will download something like this: https://firebasestorage.googleapis.com/v0/b/ID.appspot.com/o/...

score 0 · Answer 15 · answered Feb 07 '22 at 03:26

Try This

Future<String> uploadFile(XFile _file) async {
File file = File(_file.path);
try {
  var ref = FirebaseStorage.instance.ref('uploads/' + _file.name);
  var uploadTask = await ref.putFile(file);
  if (uploadTask.state == TaskState.success) {
    final url = await ref.getDownloadURL();
    return url;
  }
  return "0";
} catch (e) {
  print(e);
  return e.toString();
  }
}

score 0 · Answer 16 · answered Feb 24 '22 at 15:02

0

Future<String> uploadImage(imageFile) async {
Reference ref = FirebaseStorage.instance.ref().child('default.png');
UploadTask uploadTask = ref.putFile(imageFile);
final snapshot = await uploadTask.whenComplete(() => {});
final urlDownload = await snapshot.ref.getDownloadURL();
print("The url is here! $urlDownload");
return urlDownload;

}

answered Feb 24 '22 at 15:02

Ishwarya

1

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Feb 25 '22 at 00:03
There is nothing in this answer that has not been posted years ago by the others. – nvoigt Mar 01 '22 at 16:43

score 0 · Answer 17 · answered Mar 31 '22 at 15:31

0

My solution using Async/await syntax and newest Firebase Storage 2022

Future<String> uploadFileToStorage(String path, File image) async {
    TaskSnapshot uploadTask = await _storageReference.child(path).putFile(image);

    String pathdownlaod = await uploadTask.ref.getDownloadURL();

    return pathdownlaod;
  }

answered Mar 31 '22 at 15:31

Ricardo Araque

51
1
3

Can't work. Does uploadTask have ref props? – shinriyo Oct 15 '22 at 05:11

score 0 · Answer 18 · answered Aug 02 '23 at 23:47

FIREBASE STORAGE: ^11.2.5

  uploadPhotoToFirebase(File photo) async {
   try {
    String ref = 'images/img-${DateTime.now().toString()}.jpeg';
    final storageRef = FirebaseStorage.instance.ref();
    UploadTask uploadTask = storageRef.child(ref).putFile(
     photo
    );
    var url = await uploadTask.then((task) => task.ref.getDownloadURL());
  } on FirebaseException catch (e) {
    throw Exception('Erro no upload: ${e.code}');
 }

}

Get Download URL from Firebase Storage in Flutter

18 Answers18

Linked