Editable Local Bytes gallery for Firebase upload

As a user selects multiple images to add to a gallery, chances are high that they select ones that you they want. A normal upload media would write directly to Firebase as the images are selected, leading to the risk of an additional delete which we can by-pass. Additionally, from a UX-perspective, we can off-load the wait time for the Firebase upload to when the user has already moved on and simply show a snackbar on success.

This showcase describes how to:

1. Let the user select multiple images and display a view with a list of images in local bytes
2. Remove images from that list
3. Add more images
4. Upload the final set to Firebase

Let's get started

1. Set up your state variables
   You will need three page or component states:
   uploadedImagesList = a list with the type Uploaded File
   localBytesIndex = a counter used to keep track of the upload widget state
   imagesToFirebaseCounter = a counter used to keep track of which files have been uploaded
   

2. Set up a view for your images
   You can use a List or GridView, whatever you want. Generate children for this list from uploadedImagesList and set the image path from the generated list child

   

3. Set up a button to add photos
   Any kind of button or other item with an on tap action will do
   

Making your button do the magic

1. Start by clearing everything out to give your images a clean slate. We will be duplicating added images to uploadedImagesList, so this state should be reset so we don't copy everything several times.

   

   

2. Next, allow the user to select multiple images and set the upload type to Local Upload

   

   It's time to make our counters do their work. FlutterFlow only allows you the first option we used, which is Clear Uploaded Data. As it wipes everything, it's a hammer when we need a scalpel for individual image removal, so we need to transfer the list to a state we can index.
   

3. Create a loop set to a single condition that says "While localBytesIndex is less than the length of the uploaded files widget". Remember, localBytesIndex is emptied each time the user presses the button, so it will ONLY contain the length of the latest image selection

   

4. Next, we update our page state and use Add to list for each image in the local upload widget using localBytesIndex, while also incrementing it

   

If you test your project now, you should be able to add images, and using the same button add more images

There's a couple more things to do before you are done. Let's add the delete button to each image in the gallery:

1. In the view, wrap the image in a stack and add an icon button in the top right corner and set the following action to it. Since we used Add to previously, we can now simply do the opposite and Remove from list using the view child:
   

   

   

2. To a previously unmentioned button, you need to add the final commit step for users. If your first button was called "add images", this one would be something like "Save gallery" and will upload uploadedImagesList to Firebase.
   
   Using the second counter you created, create a loop that runs while the length of uploadedImagesList is greater than imagesToFirebaseCounter

   

3. Upload the images to Firebase using imagesToFirebaseCounter as your index

   

4. You can now also update any other Firebase documents with references to these images

   

5. Finally, as always, increment your counter at the end of the loop

   

I hope this helps you understand how you can manipulate and work with local uploads, and to keep your read/writes lower for those sweet cost-savings 🙌

Update: the guide is apparently messy and a bit incorrect. Clone this project for an easier time! 🎉