How to download images from firebase? Cloud firestore? Forbebase Storage?

Question

I am new to flutter and I builtt an application for the web where contractors will use it to take photos of their work and upload them so our team can review them. Currently, I have it going into fire storage. They type in their work order number then can access gallery or photo and select it and hit upload and it goes to firestorage.

I want to build another page where our team can type in the work order number and it pulls all photos. I store them in FBS with path = '$workOrder/$dateTime'; I know you cant really use firebase storage for that and its best to run a query for all the URLs for the images in a database.

I can't find much on using firestore to grab photos.

but I'm a beginner and looking to learn any advice on how to approach this would be appreciated.

( i know its better to just do ios or android but I want to do flutter web )

below is how I am uploading it to FB

 Future<PickedFile> pickImage() async { try { return await ImagePicker().getImage(source: ImageSource.gallery, imageQuality: 10); } catch (error) { print('error loading image: $error'); return null; } } uploadPhotos(PickedFile pickedFile) async { final dateTime = DateTime.now(); final workOrder = double.parse(workOrderNumber.value.text); final path = '$workOrder/$dateTime'; var fileByte = await pickedFile.readAsBytes(); setState(() { _uploadTask = fb.storage().refFromURL('****').child(path).put(fileByte, fb.UploadMetadata(contentType: 'image/png')); });

Answer 1

Usually for similar task, I get the downloadURL after image upload and store it in the respective order's firestore document; And whenever a request happens for the order, retrieve the image download urls from the firestore document and download the image files from Firebase Storage .

Ref: https://firebase.flutter.dev/docs/storage/usage/

If you store them in FBS with path = $workOrder/$dateTime , whenever an user search for an order, you have to get all the images within the $workOrder storage folder, if i am not wrong!

Ref: How to get a list of all files in Cloud Storage in a Firebase app?

Answer 2

One approach is while uploading the image to the firebase storage, it will give you the downloadUrl to the image/file. Store that donwloadUrl in the database like firestore. And you can use that downloadUrl later to access the uploaded image/file.

Another approach would be, you can get the downloadUrl to all of the uploaded images/files in the firebase storage and later do the operations on them.

You can get the downloadUrl to the already uploaded images/files using following code snippet:

final result = await FirebaseStorage.instance.ref().listAll();

result.items.forEach((Reference ref) {
  ref.getDownloadURL().then((value) {
    print(value); // value variable will have the link to the file in firebase storage
  });
});