Flutter and Firebase: Return all images from Firebase Storage

Question

I have seen a few articles written online by people pertaining to be able to do this, but they only tell you how to do this with a specific, controlled list of images where they also know all the filenames beforehand.

There is also this "answer" posted here: Flutter - Get all images from firebase storage which does not actually resolve this issue at all as it suggests a .listAll() method for the recommended plugin, but there is no such method as .listAll() using the suggested plugin.

I need to be able to not know how many images are in Firebase storage, or what they might be called, just to return everything stored there.

UPDATE:

So because Firebase is full of so many limitations that it hardly qualifies as a database at all, it seems we may have to keep the images in Firebase Storage and a reference list of these in a Firebase Realtime Database Document.

I am stuck on the actual implementation of this however, as I am not even sure firstly how best to go about this. What I am attempting to do is store all the Storage image URLs in an array (if this is not the best way to do this, let me know!):

Firebase Structure
  collection     ->    document    ->    fields
   userData         profileImages         URLs (array)

My first issue is that I don't know how to append new data to the existing array, it seems to just overwrite it each time I add a new item so that I only ever have one string in the array in the database:

Firestore.instance.collection('userData').document('profileImages').updateData({
      'URLs': _uploadedFileURL,
    });

Then after this I am also not sure how to actually retrieve the full array of data later when I need it:

Container(
  child: StreamBuilder(
    stream: Firestore.instance.collection('userData').document('profileImages').snapshots(),
    builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
      if (!snapshot.hasData) {
        return LoadingAnimationBasic();
      }
      if (snapshot.data.data == null) {
        return LoadingAnimationBasic();
      } else {
        return ListView(
          shrinkWrap: true,
          children: _buildProfileGallery(snapshot),
        );
      }
    },
  ),
),

And then the function:

_buildProfileGallery(AsyncSnapshot<DocumentSnapshot> snapshot) {
    int test = snapshot.data["URLs"].length;
    print('URLs in List: ' + test.toString());
    return snapshot.data.data.map(???);
}

I have no idea what to put as the parameters of this map, as the hint text is insane:

MapEntry(K2, V2> f(String key, V value)

I can't even begin to guess what this means.

Am I on the right track? Am I on the right planet?

score 0 · Answer 1 · answered Jul 04 '20 at 14:49

0

The ability to list files was added to Firebase's client-side SDKs for Android, iOS and JavaScript last year, but has not yet landed in the FlutterFire bindings.

The answer to the question you linked, refers to a pull request on the FlutterFire open-source project that adds this functionality. So while somebody wrote code to allow listing of files in Flutter too, this code hasn't been added to a release so far. So the only way to use that code now, is to build your own version of the FlutterFire library for firebase_storage.

Without the ability to list files in the Firebase Storage API, you'll have to revert back to what everyone did before this feature was added: keeping a list of the files in a secondary location, such as the Firebase Realtime Database or Cloud Firestore.

answered Jul 04 '20 at 14:49

Frank van Puffelen

565,676
79
828
807

"keeping a list of the files in a secondary location, such as the Firebase Realtime Database or Cloud Firestore." Thank you for this, Frank. This was the solution I came up with in my head last night, so to have you mention exactly this strategy here is an excellent endorsement. If I get this working, I might include the actual code to do this here, to help other people as I am sure many others are waiting for the Flutter team to actually get round to fixing their stuff. – Bisclavret Jul 05 '20 at 07:27
Sure thing Frank, will update once I get this working. This might not be the right solution design yet :P Will hopefully get this up and running in a day or so. – Bisclavret Jul 06 '20 at 10:12
I am working on this now, Frank, and I am not sure the best way to do this. In the Firebase Database I have made a Document called 'ProfileImages' with a Field called 'URLs' which is an array.. First problem: when I add data to this array it just overwrites the previous entry. Mainly though, I can't work out how to actually retrieve this information. I am trying: AsyncSnapshot to get the data but the line I am stuck on is: return snapshot.data.data.map(....) I am not sure what it wants from me here. Hint text is: MapEntry(K2, V2> f(String key, V value)...... ? – Bisclavret Jul 25 '20 at 14:53
Ok Frank, you seem to have gone AWOL but I will update the issues with this method here in the question hoping if you are not around that someone else might be able to help. The problem with this is that when I keep a reference list in Cloud Firestore, with the URLs for the images in Storage, I am not able to target these files later based on the URL. So I can't delete specific images, for example. Code added to original question. – Bisclavret Jul 29 '20 at 03:15

Flutter and Firebase: Return all images from Firebase Storage

1 Answers1