Upload images to Firebase storage from a Flutter app, and display them on the UI.

hi in this video I am going to show you how to upload one image to Firebase on clicking this button so this is a form to add one item to a shopping list this is an example of a shopping list app on clicking this Floating Action button this follow appears using which one can add a new item to the shopping list now I have added this icon button here for this button and on clicking this button we are going to select one image from the device or capture using the camera and then we shall upload that image to Firebase we shall get the image URL of the uploaded image and we shall store that which this information in Cloud firestore and then we are going to display those images corresponding to the items here on this list now if this is not clear at this moment don't worry this is going to be clear now if you open the dashboard page of your Firebase app here you will find this option Firebase firestore's database so you may already know that firestore is used to store data similarly real-time database 2 is used to store data and here you will find this option named storage so this is used to store files now if you click on this link storage this page will appear and once you upload the files they will appear here you can think of this in terms of a structure of a directory so this is the root you can create folders and you can upload a file using this button too but we are going to do this from code from code itself we can create folders and you can upload the images so this is the root of the storage and then you can create directories and you can add files here all right and once we upload the file here let me show you by uploading one using this button itself so after uploading an image here we have to get the URL get the path of this image and then we have to add that image we have to store that image in the corresponding document of our database so in this case we are going to upload an image for one shopping item right so we shall upload the image first then we shall get the URL and then we are going to add the URL of the image in the corresponding document for the item inside our database inside our firestore database so we have to upload the image to Firebase storage this will be the second step we shall come to the first step this third step will be to get the URL of the uploaded image and then firstly will be to store the image URL of the uploaded image inside the corresponding document of the database and then finally we sell this pretty image on the list and now let's come to the first step and that is to Peak or capture an image and for that we are going to use the package named image speaker you may go to Pub dot they find the package image speaker and then install it using the installation instruction or you can simply run the command flutter Pub add image speaker on the terminal inside the root directory of your project to install it after installing the package you have to import this file image picker.dart inside the file where you want to write the corresponding code so in this case I am adding this inside the widget add item you are responsible for this page now as we have imported this Library we can use the classes of this Library this package so we are going to use a class named image speaker for picking an image and we are going to write the corresponding code inside this on press function of our icon button right so here we are going to create an instance of the class image speaker and then we are going to call the function Peak image while calling this we have to pass a value for this parameter named source we are going to pass the value with help of an enum of this package itself named image source so if we pass image source DOT camera then on clicking this button the camera will be loaded and we can capture one image using the camera of our device if we pass image source.gallery then it will load the gallery of the device and we will be able to pick an image from the gallery of our device now this function Peak image returns a future of type x file so this this function is asynchronous does it Returns the future and at the end we shall get an instance of a class named X5 from that instance we can get the information of the picked or captured image so here we are going to use the keyword array to wait for the completion of this asynchronous function and then we shall get an instance of x file and as we are using await we have to use the keyword essing here and here we are still getting an error because this function may also return null so we have to specify we have to make it nullable Now using this instance we can get the name the part and we can perform other operations on our file on the selected image so let's try printing the path of the image so add a print statement and here let's print file dot path so now here is the app and let me also open the console and now let us try to capture one image and here you can see the path getting printed now let us come to the second step and this is to upload the image to Firebase stories and for this first of all we have to install the package named Firebase tourist and then we have to import the corresponding Library so run the run this command flutter Pub add Firebase storage on the terminal inside the root directory of your project and then import this Library Firebase storage dot dot inside the file and now let us come back to this on press function and here we are going to write the code now to access a file or a folder of Firebase storage we have to get a reference of that file or folder and a reference is represented by the class called reference of Firebase storage package and even before uploading a file we have to create the reference of the file to be uploaded so first of all we have to create a reference with the complete path with the name of the file and then we have to store our file upload our file to that reference so if you call Firebase storage dot instance dot relief this function refresh it will give you an instance of the class called reference and this reference is for the root of the Firebase storage directory now we can create another folder Inside by calling the function child on this reference so reference root dot child and if you pass a name then it will create a reference for another directory inside it may be a directory or a file and then we are going to upload a file inside this folder images so we have to create another reference to the final file for the final file that we are going to upload we are going to create the reference and for that we are going to call the function child on this instance of reference and to this function child we have to pass the name of the file now here you can pass a string as the name any string or you can pass the name of the local file itself that we can get from this instance of X5 or you can create a unique name which will be a better approach so we are going to create a unique name for our file based on the current timestamp and then we shall pass that unique name here and to create the unique name we are going to use the class date time of the Library dot course now we are going to call the function now of the class date time so this function returns an instance of date time the class date time we are going to call milliseconds since APO share and then we shall call to string so this get our milliseconds since approach will give us an integer something like this one we shall call to string on it to convert it to a string and then we shall use this as the name of our file so now let's pass this unique file name to the function child so we have created a Firebase storage reference for our image to be uploaded the image does not exist in Firebase storage yet but we have created the path or the reference for the file to be uploaded and now we are going to upload our file to this specific reference and for that we have to call the function put file on this instance of reference and to this function put file we have to pass an instance of the class file representing the file to be uploaded so here let us create an instance of the class file and to this Constructor we have to pass the path of our file we can get deeper from this instance of x file so let's pass it and now here we are asserting it to be normal but this can be null right so here we are going to check if it is null if it is null then we are not going to perform this operation now we have to get the URL of the image right of the uploaded image but before that we have to know whether the upload has happened successfully or it failed due to some errors and for that we are going to wrap this code by a try block and inside the cache block we are going to handle the errors now here below this statement we are going to get the download URL the URL of the image and we can get that by calling the function gate download URL on this instance of reference so this function Returns the future of type string so we are going to create a variable here so that it becomes available to the on press function of elevated button to because we are going to use this URL of the image to add a new item new document to our shopping list collection shopping list collection of firestore database all right now here we are going to assign the result to this variable image URL but as this function is asynchronous and it returns future we have to use the keyword await here and we also have to use the keyword aware here in front of this statement because this too is SN cross and if we don't use a weight then this statement below it the one where we are trying to get the download URL may get executed even before the upload process complete successfully so when we use await it will wait here until completion of this function put file all right so if this happens successfully without any errors then it will proceed to the next statement if any error occurs then the catch block will be executed so here in this statement we can assume that the image has been uploaded successfully so we can get the download URL so this was the third step to get the download URL right we have completed the first second and third step now we shall proceed to the fourth step to store the image URL inside the corresponding document of the database but before that let us try uploading one image so here is the app and I have also opened the Firebase storage page and now let us try to upload one image if this happens successfully then we should see a new directory named images and inside the directed we should have the file that we have uploaded but if you rephrase this it seems that the upload did not happen now if this happens then take a look at the console of Android studio and here you may find this message where it says that your bucket has not been set up properly for Firebase tourists please visit this link to setup security rules so we also have to make some changes to the security rules for Firebase storage so for that click on this tab rules at this moment you will notice that read write is false so this is not going to allow anyone to read or write anything to Firebase storage so we won't be able to upload files here for the timing we are going to make it true but this is not at all secure because now anyone will be able to upload files to your fire storage this is not expected that anyone should not be able to write so in this case we may add some different conditions like we may allow the authenticated users to upload and this can be done but here for this example I am going to make it true and now anyone will be able to upload so now I have made the changes now let us try to upload one image and now here we can see the directory name images click on it and inside we have one file if you click on it you will notice that this is the image that we have captured and uploaded now from our app now we are already getting the URL of this image we are going to store that URL with the other data the name and the quantity of the corresponding item inside fire firestore database and for that here we have the image URL and as we are declaring this variable here it will be accessible inside the on press function of the elevated button too and inside this elevated button inside the on press function of this elevated button we are writing the code to store the information of a particular item on cloud firestore so here I am assuming that you are familiar with this process we have to call the function add on an instance of document reference and we have to pass the data inside a map to this function to add a particular document to a collection of cloud faster right if you are not familiar with this then I'd recommend you to watch one of my videos I'll put the link in the description where I am showing I am teaching how to add data to Cloud firestore so simply here we are passing this map to this function and inside the map we are adding the data to be stored in key value pairs now we are going to add one more key value pair for the image URL so let's add the key image and add the value image URL and save the changes we are also going to check whether image URL is not if the image URL is null or empty then we are going to display a message to upload one image and we are going to return from this function without executing the code below it now let's save these changes and try to add a new item so let's add the name and the quantity and let us Capture One image and upload it to Firebase storage we should display some kind of a loader here we can also display the selected image and now we are going to click on this button to save this information in Cloud firestore database all right so click on the button and now let us take a look at the database and here we can see this item that we have added just now and it has this fill image with the image URL so this is working in the next step we are going to fetch the data we are already fetching the data and displaying in the list on the home page right we are going to display the image along with the other information for the list items now let us come to the final step and in this step we are going to display uploaded image in this list for the individual items all right and for that the corresponding widget is item list in this widget we are fetching the content of our collection named shopping list and we using a stream we are calling the function snapshot on the collection reference this gives a stream and then we are using a stream Builder to fetch and display the content on the UI now here I'm assuming that you are familiar with this process of fetching the content of a firestore collection and this then displaying them on a list if you are not familiar with that then take a look at the description I'll post the I'll add a link to a tutorial all right so now here inside the this Builder function of the stream Builder we are getting the data and then we are converting the list of query document snapshots to a list of maps and then we are returning a list view from this function this Builder function inside the item Builder function of the list View we are getting the individual Maps individual items of our list by the index and then we are displaying the data of the individual items using a list type until now we have been displaying the name and the quantity only we are using the widget the property title of the list style for displaying the name of the item and subtitle to display the quantity now we are going to use another property another parameter need leading using which we can display a widget an image or some other widget at the start of the tile all right and here first of all we are going to check whether this map contains the key image because for some of the items we may not have the image URL all right so here we are going to check if this item has the image if it has the image then we are going to add an instance of the image Wizard and we are going to use the Constructor Network because we are going to get the image from a URL from a remote URL all right so we have to pass the URL to this Constructor Network and that we can we can get the URL from this map using the key image the name of the field with which we are storing the image URL on our document all right and if this does not contain the key image which means that we don't have the image URL for a particular document for this particular item then we are simply going to add an empty container and let's Wrap This by a container and specify height and weight so that we don't get the Overflow related errors so we are going to wrap this by the widget container and then we are going to add 80 for both height and width now save the changes and let's load the app and here now we can see the image for this item because we have the image for this item only for the rest of the items were added before before implementing this part right so this is working so we have learned how to pick an image or capture an image then upload the image to Firebase storage then get the download URL and then store the download URL in a firestore document right if this video has helped you dance like this video subscribe to the channel and let's get connected on the comments section

Channel: Droidmonk

Views: 20,114

Keywords: flutter, flutter firebase, firebase, flutter firebase tutorial, upload image to firebase storage flutter, upload image to firebase flutter, pick image from gallery flutter, capture image from camera flutter, image picker in flutter, flutter tutorial, flutter tutorial for beginners, how to upload file in firebase storage

Id: u52TWx41oU4

Length: 19min 53sec (1193 seconds)

Published: Wed Aug 31 2022