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

Question

I m working on uploading images  everything works great  but I have 100 pictures and I would like to show all of them in my View  as I get the complete list of the images in a folder  I can not find any API for this work

User · Answer

Extending Ros  rio Pereira Fernandes  answer  for a JavaScript solution    Install firebase on your machine   npm install -g firebase-tools     On firebase init set JavaScript as default language On the root folder of created project execute npm installs      npm install --save firebase    npm install  google-cloud storage    npm install  google-cloud firestore         lt any other dependency needed gt     Add non-default dependencies on your project like         firebase     6 3 3         google-cloud storage     3 0 3    functions package json       name    functions      description    Cloud Functions for Firebase      scripts          lint    eslint          serve    firebase serve --only functions        shell    firebase functions shell        start    npm run shell        deploy    firebase deploy --only functions        logs    firebase functions log          engines          node    10          dependencies           google-cloud storage     3 0 3        firebase     6 3 3        firebase-admin     8 0 0        firebase-functions     3 1 0          devDependencies          eslint     5 12 0        eslint-plugin-promise     4 0 1        firebase-functions-test     0 1 6          private   true       Create sort of a listAll function   index js  var serviceAccount   require    key json    const functions   require  firebase-functions     const images   require    images js     var admin   require  firebase-admin     admin initializeApp       credential  admin credential cert serviceAccount       databaseURL   https    lt my project gt  firebaseio com       const bucket   admin storage   bucket   lt my bucket gt  appspot com    exports getImages   functions https onRequest  request  response    gt        images getImages bucket           then urls   gt  response status 200  send   data    urls                catch err   gt  console error err          images js  module exports         getImages    const query         directory   images      function getImages bucket        return bucket getFiles query           then response   gt  getUrls response            catch err   gt  console error err       function getUrls response        const promises          response forEach  files   gt            files forEach  file   gt                promises push getSignedUrl file                            return Promise all promises  then result   gt  getParsedUrls result       function getSignedUrl file        return file getSignedUrl           action   read           expires   09-01-2019            function getParsedUrls result        return JSON stringify result map mediaLink   gt  createMedia mediaLink        function createMedia mediaLink        const reference           reference mediaLink   mediaLink 0       return reference        Execute firebase deploy to upload your cloud function Call your custom function from your app   build gradle  dependencies         implementation  com google firebase firebase-functions 18 1 0          kotlin class    private val functions   FirebaseFunctions getInstance     val cloudFunction   functions getHttpsCallable  getImages     cloudFunction call   addOnSuccessListener         Regarding the further development of this feature  I ran into some problems that might found here

User · Answer

In Python  import firebase admin from firebase admin import credentials from firebase admin import storage import datetime import urllib request   def image download url  name img        urllib request urlretrieve url  name img   cred   credentials Certificate  credentials json      Initialize the app with a service account  granting admin privileges app   firebase admin initialize app cred         storageBucket    YOURSTORAGEBUCKETNAME appspot com      url img    gs   YOURSTORAGEBUCKETNAME appspot com   bucket 1   storage bucket app app  image urls       for blob in bucket 1 list blobs        name   str blob name       print name      blob img   bucket 1 blob name      X url   blob img generate signed url datetime timedelta seconds   300   method  GET        print X url      image urls append X url    PATH     Where you want to save the image   for path in PATH      i   1     for url  in image urls          name img   str path    image  str i    jpg           image download url  name img          i  1

User · Answer

Since Mar 2017  With the addition of Firebase Cloud Functions  and Firebase s deeper integration with Google Cloud  this is now possible    With Cloud Functions you can use the Google Cloud Node package to do epic operations on Cloud Storage  Below is an example that gets all the file URLs into an array from Cloud Storage  This function will be triggered every time something s saved to google cloud storage    Note 1  This is a rather computationally expensive operation  as it has to cycle through all files in a bucket   folder    Note 2  I wrote this just as an example  without paying much detail into promises etc  Just to give an idea   const functions   require  firebase-functions    const gcs   require   google-cloud storage          let s trigger this function with a file upload to google cloud storage  exports fileUploaded   functions storage object   onChange event   gt       const object   event data     the object that was just uploaded   const bucket   gcs bucket object bucket     const signedUrlConfig     action   read   expires   03-17-2025        this is a signed url configuration object    var fileURLs          array to hold all file urls        this is just for the sake of this example  Ideally you should get the path from the object that is uploaded      const folderPath    a path you want its folder size calculated      bucket getFiles   prefix  folderPath    function err  files           files   array of file objects        not the contents of these files  we re not downloading the files        files forEach function file          file getSignedUrl signedUrlConfig  function err  fileURL            console log fileURL           fileURLs push fileURL                                   I hope this will give you the general idea  For better cloud functions examples  check out Google s Github repo full of Cloud Functions samples for Firebase  Also check out their Google Cloud Node API Documentation

User · Answer

For node js  I used this code  const Storage   require   google-cloud storage    const storage   new Storage  projectId   PROJECT ID   keyFilename   D   keyFileName json     const bucket   storage bucket  project appspot com      gs   project appspot com bucket getFiles   then results   gt        const files   results 0       console log  Total files    files length       files forEach file   gt          file download  destination   D     file     catch error   gt  console log  Error     error              catch err   gt        console error  ERROR    err

User · Answer

I faced the same issue  mine is even more complicated    Admin will upload audio and pdf files into storage     audios season1  season2    class1  class 2  mp3 files  books  pdf files    Android app needs to get the list of sub folders and files    The solution is catching the upload event on storage and create the same structure on firestore using cloud function   Step 1  Create manually  storage  collection and  audios books  doc on firestore         Step 2  Setup cloud function    Might take around 15 mins  https   www youtube com watch v DYfP-UIKxH0 amp list PLl-K7zZEsYLkPZHe41m4jfAxUi0JjLgSM amp index 1  Step 3  Catch upload event using cloud function  import   as functions from  firebase-functions   import   as admin from  firebase-admin   admin initializeApp functions config   firebase   const path   require  path     export const onFileUpload   functions storage object   onFinalize async  object    gt            let filePath   object name     File path in the bucket          const contentType   object contentType     File content type          const metageneration   object metageneration     Number of times metadata has been generated  New objects have a value of 1          if  metageneration      1   return              Get the file name          const fileName   path basename filePath           filePath   filePath substring 0  filePath length - 1           console log  contentType     contentType           console log  fileName     fileName           console log  filePath     filePath           console log  path dirname filePath      path dirname filePath            filePath   path dirname filePath           const pathArray   filePath split               let ref               for  const item of pathArray                if  ref length     0                    ref   item                            else                   ref   ref concat   sub    concat item                                    ref    storage   concat ref  concat   sub           admin firestore   collection ref  doc fileName  create                      then result   gt   console log  onFileUpload updated                      catch error   gt                        console log error                                 Step 4  Retrieve list of folders files on Android app using firestore    private static final String STORAGE DOC    storage        public static void getMediaCollection String path  OnCompleteListener onCompleteListener            String   pathArray   path split               String doc   null          for  String item   pathArray                if  TextUtils isEmpty doc   doc   STORAGE DOC concat item               else doc   doc concat   sub    concat item                     doc   doc concat   sub             getFirestore   collection doc  get   addOnCompleteListener onCompleteListener           Step 5  Get download url   public static void downloadMediaFile String path  OnCompleteListener lt Uri gt  onCompleteListener            getStorage   getReference   child path  getDownloadUrl   addOnCompleteListener onCompleteListener           Note   We have to put  sub  collection to each item since firestore doesn t support to retrieve the list of collection    It took me 3 days to find out the solution  hopefully will take you 3 hours at most    Cheers

User · Answer

For Android the best pratice is to use FirebaseUI and Glide    You need to add that on your gradle app in order to get the library  Note that it already has Glide on it   implementation  com firebaseui firebase-ui-storage 4 1 0    And then in your code use     Reference to an image file in Cloud Storage StorageReference storageReference   FirebaseStorage getInstance   getReference        ImageView in your Activity ImageView imageView   findViewById R id imageView       Download directly from StorageReference using Glide     See MyAppGlideModule for Loader registration  GlideApp with this    context              load storageReference           into imageView

User · Answer

Since there s no language listed  I ll answer this in Swift  We highly recommend using Firebase Storage and the Firebase Realtime Database together to accomplish lists of downloads   Shared      Firebase services var database  FIRDatabase  var storage  FIRStorage         Initialize Database  Auth  Storage database   FIRDatabase database   storage   FIRStorage storage          Initialize an array for your pictures var picArray   UIImage      Upload   let fileData   NSData      get data    let storageRef   storage reference   child  myFiles myFile   storageRef putData fileData  observeStatus  Success     snapshot  in      When the image has successfully uploaded  we get it s download URL   let downloadURL   snapshot metadata  downloadURL    absoluteString      Write the download URL to the Realtime Database   let dbRef   database reference   child  myFiles myFile     dbRef setValue downloadURL      Download   let dbRef   database reference   child  myFiles   dbRef observeEventType  ChildAdded  withBlock     snapshot  in      Get download URL from snapshot   let downloadURL   snapshot value   as  String      Create a storage reference from the URL   let storageRef   storage referenceFromURL downloadURL       Download the data  assuming a max size of 1MB  you can change this as necessary    storageRef dataWithMaxSize 1   1024   1024     data  error  - gt  Void in        Create a UIImage  add it to the array     let pic   UIImage data  data      picArray append pic            For more information  see Zero to App  Develop with Firebase  and it s associated source code  for a practical example of how to do this

User · Answer

One more way to add the image to Database using Cloud Function to track every uploaded image and store it in Database   exports fileUploaded   functions storage object   onChange event   gt         const object   event data     the object that was just uploaded     const contentType   event data contentType     This is the image Mimme type          Exit if this is triggered on a file that is not an image      if   contentType startsWith  image               console log  This is not an image             return null                Get the Signed URLs for the thumbnail and original image      const config             action   read           expires   03-01-2500              const bucket   gcs bucket event data bucket       const filePath   event data name      const file   bucket file filePath        file getSignedUrl config  function err  fileURL            console log fileURL           admin database   ref  images   push               src  fileURL                           Full code here  https   gist github com bossly fb03686f2cb1699c2717a0359880cf84

User · Answer

Since Firebase SDKs for JavaScript release 6 1  iOS release 6 4  and Android release version 18 1 all have a method to list files    The documentation is a bit sparse so far  so I recommend checking out Ros  rio s answer for details     Previous answer  since this approach can still be useful at times   There currently is no API call in the Firebase SDK to list all files in a Cloud Storage folder from within an app  If you need such functionality  you should store the metadata of the files  such as the download URLs  in a place where you can list them  The Firebase Realtime Database and Cloud Firestore are perfect for this and allows you to also easily share the URLs with others   You can find a good  but somewhat involved  sample of this in our FriendlyPix sample app  The relevant code for the web version is here  but there are also versions for iOS and Android

User · Answer

As of May 2019  version 6 1 0 of the Firebase SDK for Cloud Storage now supports listing all objects from a bucket  You simply need to call listAll   in a Reference          Since you mentioned your images are in a folder         we ll create a Reference to that folder      var storageRef   firebase storage   ref  your folder             Now we get the references of these images     storageRef listAll   then function result          result items forEach function imageRef               And finally display them         displayImage imageRef                    catch function error             Handle any errors              function displayImage imageRef          imageRef getDownloadURL   then function url               TODO  Display the image on the UI          catch function error               Handle any errors                   Please note that in order to use this function  you must opt-in to version 2 of Security Rules  which can be done by making rules version    2   the first line of your security rules       rules version    2       service firebase storage         match  b  bucket  o           match   allPaths         I d recommend checking the docs for further reference   Also  according to setup  on Step 5  this script is not allowed for Node js since require  firebase app    won t return firebase storage   as a function  This is only achieved using import   as firebase from  firebase app

User · Answer

I also encountered this problem when I was working on my project  I really wish they provide an end api method  Anyway  This is how I did it  When you are uploading an image to Firebase storage  create an Object and pass this object to Firebase database at the same time  This object contains the download URI of the image   trailsRef putFile file  addOnSuccessListener new OnSuccessListener lt UploadTask TaskSnapshot gt               Override         public void onSuccess UploadTask TaskSnapshot taskSnapshot                Uri downloadUri   taskSnapshot getDownloadUrl                DatabaseReference myRef   database getReference   child  trails   child trail getUnique id    push                Image img   new Image trail getUnique id    downloadUri toString                 myRef setValue img                       Later when you want to download images from a folder  you simply iterate through files under that folder  This folder has the same name as the  folder  in Firebase storage  but you can name them however you want to  I put them in separate thread     Override protected List lt Image gt  doInBackground Trail    params         String trialId   params 0  getUnique id        mDatabase   FirebaseDatabase getInstance   getReference        mDatabase child  trails   child trialId  addValueEventListener new ValueEventListener              Override         public void onDataChange DataSnapshot dataSnapshot                images   new ArrayList lt  gt                 Iterator lt DataSnapshot gt  iter   dataSnapshot getChildren   iterator                while  iter hasNext                      Image img   iter next   getValue Image class                   images add img                             isFinished   true                      Override         public void onCancelled DatabaseError databaseError                         Now I have a list of objects containing the URIs to each image  I can do whatever I want to do with them  To load them into imageView  I created another thread        Override protected List lt Bitmap gt  doInBackground List lt Image gt     params         List lt Bitmap gt  bitmaps   new ArrayList lt  gt          for  int i   0  i  lt  params 0  size    i              try               URL url   new URL params 0  get i  getImgUrl                 Bitmap bmp   BitmapFactory decodeStream url openConnection   getInputStream                 bitmaps add bmp             catch  MalformedURLException e                e printStackTrace              catch  IOException e                e printStackTrace                         return bitmaps      This returns a list of Bitmap  when it finishes I simply attach them to ImageView in the main activity  Below methods are  Override because I have interfaces created and listen for completion in other threads        Override public void processFinishForBitmap List lt Bitmap gt  bitmaps        List lt ImageView gt  imageViews   new ArrayList lt  gt         View v      for  int i   0  i  lt  bitmaps size    i              v   mInflater inflate R layout gallery item  mGallery  false           imageViews add  ImageView  v findViewById R id id index gallery item image            imageViews get i  setImageBitmap bitmaps get i            mGallery addView v             Note that I have to wait for List Image to be returned first and then call thread to work on List Bitmap  In this case  Image contains the URI        Override public void processFinish List lt Image gt  results        Log e TAG   get back     results size          LoadImageFromUrlTask loadImageFromUrlTask    new LoadImageFromUrlTask        loadImageFromUrlTask delegate   this      loadImageFromUrlTask execute results       Hopefully someone finds it helpful  It will also serve as a guild line for myself in the future too

User · Answer

I am using AngularFire and use the following for get all of the downloadURL  getPhotos id  string   Observable lt string   gt        const ref   this storage ref  photos   id        return ref listAll   pipe switchMap list   gt          const calls  Promise lt string gt                list items forEach item   gt  calls push item getDownloadURL           return Promise all calls

User · Answer

Actually this is possible but only with a Google Cloud API instead one from Firebase  It s because a Firebase Storage is a Google Cloud Storage Bucket which can be reached easily with the Google Cloud APIs however you need to use OAuth for Authentication instead of the Firebase one s

User · Answer

A workaround can be to create a file  i e list txt  with nothing inside  in this file you can set the custom metadata  that is a Map lt  String  String   with the list of all the file s URL So if you need to downlaod all the files in a fodler you first download the metadata of the list txt file  then you iterate through the custom data and download all the files with the URLs in the Map

User · Answer

You can list files in a directory of firebase storage by listAll   method  To use this method  have to implement this version of firebase storage   com google firebase firebase-storage 18 1 1   https   firebase google com docs storage android list-files  Keep in mind that upgrade the Security Rules to version 2

User · Answer

To do this with JS  You can append them directly to your div container  or you can push them to an array  The below shows you how to append them to your div   1  When you store your images in storage create a reference to the image in your firebase database with the following structure    images  imageName      description           imageSrc    imageSource       2  When you load you document pull all your image source URLs from the database rather than the storage with the following code     document  ready function     var query   firebase database   ref  images    orderByKey    query once  value   then function snapshot        snapshot forEach function childSnapshot            var imageName   childSnapshot key          var childData   childSnapshot val            var imageSource   childData url               imageGallery   append   lt div gt  lt img src    imageSource     gt  lt  div gt

User · Answer

So I had a project that required downloading assets from firebase storage  so I had to solve this problem myself  Here is How    1- First  make a model data for example class Choice    In that class defines a String variable called image Name so it will be like that  class Choice                 String imageName      2- from a database firebase database  go and hardcode the image names to the objects  so if you have image name called Apple png  create the object to be  Choice myChoice   new Choice           Apple png      3- Now  get the link for the assets in your firebase storage which will be something like that   gs   your-project-name appspot com    like this one  4- finally  initialize your firebase storage reference and start getting the files by a loop like that  storageRef   storage getReferenceFromUrl firebaseRefURL  child imagePath    File localFile   File createTempFile  images    png    storageRef getFile localFile  addOnSuccessListener new OnSuccessListener lt FileDownloadTask TaskSnapshot gt        Override public void onSuccess FileDownloadTask TaskSnapshot taskSnapshot          Dismiss Progress Dialog       5- that s it

User · Answer

Combining some answers from this post and also from here  and after some personal research  for NodeJS with typescript I managed to accomplish this by using firebase-admin  import   as admin from  firebase-admin   const getFileNames    folderName  any    gt      admin storage   bucket   getFiles autoPaginate  false  then   files   any    gt        const fileNames   files map  file  any    gt  file name       return fileNames           In my case I also needed to get all the files from a specific folder from firebase storage  According to google storage the folders don t exists but are rather a naming conventions  Anyway I managed to to this by adding   prefix    folderName   autoPaginate  false   the the getFiles function so  getFiles   prefix     folderName    autoPaginate  false

User · Answer

You can use the following code  Here I am uploading the image to firebase storage and then I am storing the image download url to firebase database      getting the storage reference             StorageReference sRef   storageReference child Constants STORAGE PATH UPLOADS   System currentTimeMillis           getFileExtension filePath                   adding the file to reference              sRef putFile filePath                       addOnSuccessListener new OnSuccessListener lt UploadTask TaskSnapshot gt                               Override                         public void onSuccess UploadTask TaskSnapshot taskSnapshot                                  dismissing the progress dialog                             progressDialog dismiss                                   displaying success toast                              Toast makeText getApplicationContext     File Uploaded    Toast LENGTH LONG  show                                   creating the upload object to store uploaded image details                              Upload upload   new Upload editTextName getText   toString   trim    taskSnapshot getDownloadUrl   toString                                    adding an upload to firebase database                              String uploadId   mDatabase push   getKey                                mDatabase child uploadId  setValue upload                                                                         addOnFailureListener new OnFailureListener                              Override                         public void onFailure  NonNull Exception exception                                progressDialog dismiss                                Toast makeText getApplicationContext    exception getMessage    Toast LENGTH LONG  show                                                                          addOnProgressListener new OnProgressListener lt UploadTask TaskSnapshot gt                               Override                         public void onProgress UploadTask TaskSnapshot taskSnapshot                                  displaying the upload progress                              double progress    100 0   taskSnapshot getBytesTransferred      taskSnapshot getTotalByteCount                                progressDialog setMessage  Uploaded       int  progress                                                                 Now to fetch all the images stored in firebase database you can use     adding an event listener to fetch values         mDatabase addValueEventListener new ValueEventListener                  Override             public void onDataChange DataSnapshot snapshot                      dismissing the progress dialog                  progressDialog dismiss                       iterating through all the values in database                 for  DataSnapshot postSnapshot   snapshot getChildren                          Upload upload   postSnapshot getValue Upload class                       uploads add upload                                       creating adapter                 adapter   new MyAdapter getApplicationContext    uploads                      adding adapter to recyclerview                 recyclerView setAdapter adapter                               Override             public void onCancelled DatabaseError databaseError                    progressDialog dismiss                                Fore more details you can see my post Firebase Storage Example

[firebase] How to get a list of all files in Cloud Storage in a Firebase app?

Examples related to firebase

Examples related to firebase-storage