Flutter Flow - Upload Photos To Firebase With Your App.

hello and welcome to this tutorial on how to upload photos into Firebase using your app before we start you need to connect your Firebase into your app and have an authentication enabled if you have not done that yet I have video covering how to do it but anyways let's get started first thing we have to do is go to Firebase and create storage for our app now from here click on get started I am going to use test mode for this tutorial now in here we want to create one folder I am going to name this folder as photos when that's done we need to go to database and create a new collection I am going to name this collection as photos I am going to Auto ID this document and for the field I am going to type image when that's done we can head back to our app let's connect our collection that we just created click on this orange plus button and type in your collection name let's add our first field type here image and for the data type select photo path now we need to go to our home page and start to create our post screen first we add in container and button then we need to add a list View and image click on the container and go to actions now from this list we are going to pick upload data and upload media now scroll up a bit and select upload type as firestore click on the actions button and scroll down until you see background image then click on path and select uploaded file URL after that is done click on your button we are going to add some actions into it in this list you want to select firestore and create document for the collection select photos click add a new field and for the source pick uploaded photo now click on your list View and add a back-end query for it for the query type we are going to select query collection for the collection we select photos and make sure that query type is set as list of documents now click on the image and select the path for it in this list select image when we click our settings icon and go to Firebase selection we see our storage rules go ahead and deploy them we can now finally try out our build now from this screen you can see that there is this object event thingy don't worry that is because we have one document in our Firebase without any image set let's click on the container and add our first photo our build is working nicely let's try another one that works perfectly also that's all what I have for you today thank you for watching and for your support leave a like And subscribe if you wish to see more of similar tutorials I see you in my next video

Channel: Jim Explains

Views: 21,048

Keywords: Flutterflow, Flutter flow, Upload, Media, Images, Photos, To, Firebase, No code, Low code, Google, Tutorial, Beginner, App development, Socialmedia, Feed, Jimexplains, Jim explains, Flutter, Socialmediaapp, Social media app, Creating app, Quick tutorial, Fast, Learn to create an app

Id: fXhF_9Ll3Fc

Length: 4min 59sec (299 seconds)

Published: Mon Apr 24 2023