Upload Image to Local State & Firebase - Reduce stored data usage and cost!

In this tutorial, we will cover uploading images to the local state, accessing the image and then subsequently uploading that same image to Firebase when we are happy with it.
This is particularly useful in reducing our Firebase storage usage, thus reducing our Firebase cost.
Please remember to subscribe to keep updated on more FlutterFlow content!
-----
Need help? Book a chat here: cal.com/stevenliu
Want to support me? buy.stripe.com/28o2as3FY1in2QMaEF

[@happyboss555]

Hi Steven, 4:28 I tried to upload multiple images with more actions and it shows "Cannot have multiple upload files in the same node." How can I solve this, Thank you 🙏

[@imhoffquentin]

thank you very much for your content! Could you do a tutorial on adding several photos to a document using copy and paste? like on trello when you paste an image on a card. 🙌

[@jamilnausale4508]

Worked on the first try, amazing tutorial!!!!

[@StevenNoCode]

Fantastic!

[@Prvzn]

Would be nice to see about login options as well..and how we can integrate with firebase..great content!!!

[@user-iz4eh2kb1v]

Loving the channel and content Steven thank you! Any chance you can do a tutorial on differences between Query Types when feeding info and parameters etc

[@AutomationWithSholz]

Super awesome 👍😎

[@valirmasha4718]

Oh, thank you Steven. You solved my mystery. Looking y'r very good at FF. pls do more. I really enjoy to learn from you.

[@StevenNoCode]

Thank you for the kind words :)

[@AutomationWithSholz]

Weldone Steven

[@valirmasha4718]

@@StevenNoCodebro. I follow this method but don’t work with video.

[@KathySierraVideo]

Thank-you so much! Now I would love to see the exact same tutorial but using supabase :) (though I'm assuming most of it is virtually the same...)

[@buildingsomething1]

@itsstevenliu Another great use case for doing this is to check the file size of the image before uploading. Is there a way of going this and then choosing to use the compression option only if it's over a certain size?

[@greyrhinogroup2641]

This is very helpful but how about you upload multiple images? Are you going to set the db as string? How do you display the images (before upload) and store the url in the db?

[@prakashm.s8134]

Thanks

[@toddherron4832]

Great tutorial. Could you do one that explains how to use the Blurred Hash?

[@MarcioFranco]

Great video! i notice i little bug on FF, this function doesn´t works with circular image widget.

[@dominiccogan945]

that options not showing up for me....

[@abdoulayeDiallo-ed2ze]

if you reupload a second image it will stack a new photo. how to add only 1 in storage

[@uc-elroczy7880]

how do you upload multiple images and delete a few before uploading

[@SurajPandya]

What if we have two images to upload? For instance Profile and cover.

[@DimitriKampouridis]

Hey Steven, you are a very good teacher, the way you explain is super clear ! I did the tutorial twice and something is wrong but I cannot understand what. The picture is uploaded in Firestore Storage but it is not updated in the database and thus not displayed in the circle image (photo_url). Do you have any idea what could be the issue here? Thank you

[@salahmohamed5678]

Here there, I don’t know if still facing this, but today i found out that it wont be shown in circular image, but with normal image widget it will, you can still convert it to circle by giving it big number on radius.

[@DimitriKampouridis]

@@salahmohamed5678 thank you for your response man, I appreciate!

[@curtreed2892]

Hi Steven, do you have any idea how to overwrite the original uploaded image? I want to streamline firebase storage per user, so if the user chooses another profile pic other than the corgi, as per your example, it will overwrite the corgi and not generate a new file path and token, essentially adding another file to firebase storage

[@StevenNoCode]

Check out this custom action that has been proposed previously. Should do what you’re looking for. Delete user’s profile picture (if exist) and then upload the new profile picture
community.flutterflow.io/c/community-custom-widgets/post/delete-files-from-storage-firebase-R4CDZZSBCIciq0H

[@user-dt2qe5fc5m]

can you make a tutorial to show all storage data in the flutter flow in listveiw

[@StevenNoCode]

What kind of storage data are you looking for? Like images? PDF? etc.

[@sujanalius]

Hi Steven, if the image is on the local state, and let's stay that you navigate out of the page (without deliberately deleting the uploaded image from the Action logic), does it stay there, or will it be deleted automatically? I'm asking this because I'm trying to clear the uploaded image from a custom Dialog, but the option to clear uploaded data is not available.

[@StevenNoCode]

Hey, page state it clears as soon as you exit. App state stays.

[@sujanalius]

Hi @itsStevenLiu, thanks for the prompt reply; when I upload the image locally, it's written "Local Upload (Widget State)". So, upon exiting the page, it will clear automatically, yes?