Flutter Firebase Storage Tutorial | Upload Files To Firebase Using Flutter & Firebase Storage

in today's video I'm going to be showing you guys how to work with Firebase storage with a new flutter application we're going to take a look at all of the important Concepts such as how to upload files properly how to configure Firebase storage properly as well as how to retrieve files uploaded by a user and organize our storage bucket in a way that all of the uploads by specific users are saved under their specific folders our application is going to have the following functionality we'll be able to use the floating action button to access our devices gallery and then select an image that we want to upload or any other file in this case we're just using images and then once we select a file it's going to go ahead upload that file to Firebase storage for us and then we're also going to be able to see a list view with all of the files that we had uploaded to Firebase storage for a specific user so if I click on this floting button again I select a new picture let's just say Tom Cruz it's going to go ahead upload this picture to Firebase storage and then it's going to show it to us here on the Firebase side of things once the files have been uploaded they are going to be grouped by the individual users user ID so in this case our user which currently has uploaded two pictures so all of the files that are going to be uploaded by this specific user are going to go under their folder then uploads and then here is where all of the files are going to be listed so with this said let's get started so the first thing that I'm going to be doing is showcasing you guys all of the dependencies that we're going to be using in order for our application to work correctly so the first thing that we're going to be using is going to be the Firebase core package so I'm going to be copying this coming back to my pspec yaml file and then I'm going to be pasting this under the dependency section and the Firebase core plugin is required to actually Implement all of the core Firebase functionality and then we can add other plugins that are from Firebase to add more functionality such as storage or Au or other things like that once this is done we are also going to be using the Firebase Au package to actually Implement authentication within our application and this is going to allow us to access the users unique ID which we're going to be using to then upload and group The users upload into a folder in our Firebase storage bucket so let's let's do that and then we're also going to be using the Firebase storage package which is the actual package that we're going to be using to implement Firebase storage and then finally the last thing that we're going to be doing is implementing the gallery picker which is going to allow us to access our devic's gallery and then get media Falls from there so we're going to be adding this as well and once this is done I'm going to let flutter pbits do it magic and download all of the dependencies and then we can actually take a look at how we need to set up our project so for now what I've done is that I haven't done anything to my project object besides the fact that in my lip folder I've created a Pages folder under which I have homepage which is an empty stateful widget that for now returns a placeholder and then in my main. file all I've done is that I have the build function returning a material app where the actual home property is set to the homepage and that's pretty much it so now we can actually take a look at what we need to do in order to implement all of the functionality of uploading files to Firebase storage so the first thing that we need to do is that we need to set up our application so let's do that for both iOS and andro Android so what I'm going to be doing is firstly doing all of the setup for gallery picker so for the gallery picker all we need to do is firstly come down and links to all of the resources that I mentioned within this video as well as the link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point I'll come to Android app source and then Main and come to the Android manifest.xml file and then within Android manifest.xml I'm going to come and copy these permission Clauses so I'll copy the first one come and paste it in like so so and then once this is done what I'm going to be doing is adding the other two as well like so and then coming back and pasting them in and doing command save once this is done then I can close down the Android set of things I can come to iOS Runner info. pist and then here I'm going to do the same thing I'm going to copy all of these key and string value Pairs and then paste them within my info. pist file so I'm just going to paste it um after the key string here like so so you can paste this anywhere just make make sure that um you place them appropriately so as you can see I have them here and then I can close down the info. pist file as well and everything for iOS should be done with this done the next thing that I'm going to be doing is setting up the Firebase side of things so for Firebase all we have to do is come to the Android folder app Source or build.gradle and here what I'm going to be doing is basically changing the minimum SDK version to 21 like so and that's pretty much it with this done I already have the Firebase plug-in and the Firebase CLI installed on my system so I'm going to be quickly going through the steps of what I need to do in order to link my flutter app with Firebase but if you need more detailed instructions then I already have a video with showcases in much more detail how to properly install this Firebase CLI and then how to connect your flutter application with Firebase but basically what we have to do is open up a terminal instance within our actual flutter apps folder so like you can see like so and then I am going to do Firebase login this is going to go ahead and login me into my Firebase account which I'm already logged into after this I'm going to activate the flutter fire CLI by pasting in this command and if you're confused you can take a look at that video once this is done the next thing that I'm going to be doing is making sure that I go to firebase.com create a new Firebase project or already have an existing Firebase project created which is under the same account which I used to log in and and as you can see I have one which is flutter Firebase storage tutorial so now what I'll do is that I am going to basically copy and paste this command in which is flutter fire configure it's going to let me know that it's fetching the available Firebase project I'm going to select the one that I want to link this project with in this case it's going to be flutter Firebase storage tutorial I'm going to press enter it's going to ask me which platforms I want to support in this case I'll just limit it to Android and iOS you can use the up and down arrow keys to navigate and then space to select or deselect press enter to continue now that our application is configured properly as you can see it tells me that for the following platforms Android and iOS it was able to register the apps and Implement all of the settings so now we are good to go so with this done I can close down the terminal I can come to the Firebase side of things but before we take a look at this what I'll do is that I will go to my lib main. file and as you can see now that our lib folder also contains a Firebase options file so this was automatically generated and kind of signifies to us that the configuration operation was successful and I'll now start debugging my application to just make sure that there are no errors and then I will now come back to the Firebase side of things so on Firebase what I want you to do is navigate to the specific project for Firebase that you had linked to your flutter project then I want you to come to build an authentication and make sure that you have set up an authentication strategy in our case we're just going to be using the simple barebones Anonymous authentication so I'll click on that and say the users can anonymously log into my application and that's pretty much it that's all we're going to be doing but the methods that I'm going to be teaching you are going to work regardless of whatever authentication method you use as long as the user gets authenticated they'll have a user ID but we're just using Anonymous to just quickly speed through things then once this is done you can come to build again and go to the section which says storage click on that and now it's going to basically ask you to get started with storage you can click get started and start in test mode so that the permissions are not so strict else you'll have to change the permissions to allow reads and writs but I'm going to do start in test mode click next and then select a cloud storage location you can select whichever is closest to you and click done and that's pretty much it that's all we had to do on the Firebase side of things so now Firebase is properly configured our application is properly configured all of the things are connected together so now I'll resume the video once my application is actually running on the simulator welcome back everybody so now that my application is successfully running on the simulator we know that everything as far as of now works as intended so let's get into the steps of actually coding the useful logic so to get started the first thing that I'm going to be doing is coming to my pages homepage and then for the build function instead of returning a placeholder I'm going to return a scaffold once this is done the next thing that I'm going to be doing is basically adding an app bar to my scaffold just to make it look a bit more pretty like so to command save and also set the app bar property like so to command save and now we have a app bar that says Firebase storage once this is done I'm going to come back to my main. file and I'm going to do some things to ensure that before our application spins up and we can interact with it that Firebase is configured properly so to do that what I'm going to be doing is coming to main. do I'm going to set my main function to be asynchronous now so the first step to this will be to firstly call the widgets flutters binding class and on that call a function called ensure initialized and once we made sure that our widget bindings have been initialized the next thing that I'm going to be doing is making a call to Firebase do initialize app like so and then we have to pass it an options parameter so let's do that and I also need to import this so let's quickly import this from the Firebase core package and the options in this case are going to be the default Firebase options. current platform and then add a semicolon at the end and do command save so with this done I'll give a quick restart to my application make sure that nothing breaks and this is a good signal to us because we were able to do everything and our application didn't break and the application was initialized properly so let's get into the logic of logging in the user now so before we can upload the files what we need to do is obtain a users's user ID you can upload files without that but what I want to do is group files under a specific users folder for all of the files that they upload hence I needs the user ID so for that what I'll do is that I'll come to my lip folder and I'm going to be creating a new file here which I'm going to call utils do do and I'm doing this in order to actually create my project in in a way that it's more maintainable so I'm breaking up it into little pieces the first thing that I'm going to be doing here is that I'm going to implement a function and this function will be sign in user anonymously so Aon like so and that's pretty much it I'll mark this function to be a strink open it up so here what I'll do is that I'll add a TR catch block like so and then within the catch I'll just do print e then within try all I'm going to be doing is is basically doing the following I'll do final user credentials equals to await Firebase OD so let's import it and then do instance. signin anonymously and hopefully if this operation is successful then what I'll do is that I'll print the following which is that signed in with temporary account and then the uid and whatever that user's uid is which we'll get from the user credential variable so do command save then I will come back to my main. file after I've initialized my actual application I will do await and then I will call this function which is sign in user Anon and once this is done I'll do command save then I'll open up the terminal and specifically what I'm going to be doing is showing you the debug log because our application is currently running I'll restart our application and you're going to see that after some time it's going to tell me that it's signed in with temporary account and the U ID is the following so now we have access to the unique ID and we can use it when we're uploading files so now this is done let's get into the logic of uploading the files so to get started with that I will come back to my homepage and I'll close down all of the other files for now except utils do dot here what I'll do is that I'm going to Define what's going to be the body property for my scaffold and in this case it's going to be a call to a function which will be called build UI then I will come down and I will actually Define this function here which will say build UI and for now we'll return a a container and then we'll change it later on once this is done I'll also Define the actual button which will allow us to upload our file so for that I'll set the floating action button property for the scaffold to be a called to another function and this function is going to be called undor upload media button and it will actually get access to the build context so the build context will be passed to it like so then I will come down I will create a function which will be called this and it's going to take in the build cont context context like so and then I'll open it up and I'll say that I'm going to return a floating action button where the onpressed call back for now is going to be empty like so then I will actually remove this build context here we just need to pass it no need to define the type and that's pretty much it everything seems to be working so now what I'll do is that I'll add a icon to my floating action button so for that all I have to do is set the child property to be an icon and then the icon is icons. upload then when onpressed is called I want the actual logic to start for actually accessing the gallery then we access the gallery we get an image from it and then we upload that so let's do that so firstly we have to access the gallery so how do we do it well I'll come back to my u. file here and here I'm going to define a new function which will allow us to get an image from the gallery so this function will return a future which will be a optional file it's going to be called get image from gallery like so no parameters passed to this function and then I'm going to say that it's going to be a sync and now that I think about it we will have to pass it the build context because I believe that the plugin that we're using actually depends on that then for the actual file you have to import it from doio definition and then we can actually start coding the logic so to code the logic it's going to be pretty simple the first thing that I'm going to be doing is implementing a tri block and in the catch what I'll do is just print the error and that's pretty much it and then in try what I'm going to be doing is that I'll say that I'll have a list of media file which will be optional because we might not select anything even after we open our Gallery this specific class can be imported from the gallery picker package so let's do that then I'm going to say that this is going to be called single media and I'll set it to a call where I'm going to await Gallery picker Dot and then we will call pick media like so we pass it the context and then after that I will also say that single media will be set to True like so and do command save and let's see what the error is so it says a value of list media file can't be oh yeah so just need to change this to this and that should fix the issue for us and once this is done the last thing that I'll do is that I'm going to do return single media which is a list dot the first element from it dot and then I will do get file like so that's pretty much it and then I'm going to add a null operator here to command save and that's pretty much all we had to do so now I will come back to my homeor page. file and in the onpressed button call back for my floating action button I'm going to implement the logic now for accessing our Gallery so to do that it's going to be pretty simple all I have to do is create a variable which will have a optional type of file and then I'm going to say that this is going to be called selected image and I'm going to set this equal to an evade call where we're going to call get image from gallery and pass it the context like so to command save again the file class has to be imported from doio so let's do that then once this is done let's print the single Media or the selected media in this case or the selected image I should say to the console and then let's actually open up the our terminal and go to the debug console and let's see if anything happens so I'll click on this and since we had configured our Gallery figure plugin already everything should work we allow all and now we can access our Gallery so let's pick up an image let's do Christian bill this time and as you can see it says that we had selected a file which is add this path within the storage of our device so now that we've selected our image we can finally upload it so how can we upload it well what I'm going to do is do if our selected image is not equals to null then we're going to be uploading it right if it's now there's nothing to upload and all I'm going to be doing now is coming back to my utils do. file and defining our actual core logic here for how we're going to be using the Firebase storage package to actually upload our file so for this what I'll do is that I am going to say that we will return a function which will return a feature of Boolean basically this function will return true or false to us letting us know if it was able to successfully upload the file or not that's why it's going to be a Boolean value that will be returned and then since this function is a synchronous that's why it's a future then I'll name my function upload file for you user and then the only parameter that I'm going to be taking in is going to be the file that we need to upload I'll mark my function as asynchronous open up its body and now we're good to go I'll create a TR catch block and within the cat block same as always we'll just print out the error and then within try let's get into it so the first thing I need to do is establish the path where I want to upload my files so to get access to my user id I'll do final user ID variable and I'll do Firebase off Dot instance. current user. uid like so and that's pretty much it and then I'm going to add a null aare operator here like so so now that we have access to the users's ID the next thing that I want to do is get a reference to the Firebase storage so that I can upload files to there so for that I'll create a variable I'll name it storage ref and I'll set this equal to Firebase storage do instance. ref like so and that's pretty much it once we have the storage reference defined what I want want to do is now Define the path within the storage where I want to upload my file so for that what I'll do is that I will create final upload ref and this is going to be equal to storage ref and then I'm going to have a child here and this is the actual path within the storage reference where I want to store my file so what is this path going to be well this needs to be the complete path from the root of your storage or wherever this storage reference originates from which in this case is the root but if you were using something else here for example slash uploads for example I'm just saying then this child will be SL upload slash whatever the path here is for the child but we're at the root of our storage so we are not going to be passing any string here so what I want to do is basically have the folder structure in such a way the first thing that we're going to do is that at the root of our storage we're going to have the folders that are dedicated to each of the users within our application so for that I will interpolate the user ID within the string so to do that dollar sign and then I'll say user ID then within the user ID we'll have a folder which will be called uploads so I'll do slash uploads and within the upload folder is where I'm going to be saving my file but for the file to be saved properly I also need to define the actual name for the file within this path as well as what its extension is going to be so I'll derive the name for the file from the actual file itself so to do that it's going to be pretty simple I will now create create another variable which will be of type final I'll call it file name and I'll set this equal to and then I will do file which we get past the path for this and then we're going to split the path using the forward slash and what this is going to do is going to take that path which is going to be a string that's going to be returned to us which is going to be similar to what we had seen in the debug console for/ for/ emulated and then what I want to do is that I want to split this string using using the forward slash it's going to split it and return a list to us and then I want to get the last part which is the images name and then the extension so to do that I'll get the last element from this list like so and do command save and now that this is done one thing that I want to signify here is that there could be a possibility where our user uploads a file which is called let's just say 123. JP and then the user selects another file to upload and it's also called 123. jpeg well in this case the upload reference is for both of the fils is going to be the same and hence when we use the same upload reference to upload a new file it's going to override the already existing file and we don't want that so if I don't want that what I'm going to be doing is appending to the file name a timestamp so that all of the file names are unique so to do this I'll also get access to the timestamp which we can do by doing date time and then calling the Now function on it and then I am going to do microc seconds since Epoch and that's pretty much it and then I'm going to come back to my upload reference and I'm going to say that under the user ID folder going to have upload folder underneath of which we will actually save our file and our file is going to have the following name and it's going to be the timestamp dash and then the actual name of the file like so and since the file name doesn't not only include the name of the file but also the extension for it so this should work correctly now and do command save so now that I've defined my upload reference all I need to do is perform an operation on this upload reference and pass it the file so that it uploads it so to do that what I'll do is that I will do await and I will do upload reference Dot and then put file like so and then pass the file to it and that's pretty much it so now this put file function is going to take the file and it's going to save it under the up upload reference that we had defined which is the folder of the user ID then SL upload SL and then death and you don't have to worry about the folders not existing if they do not Firebase will automatically create it for us and finally if all of this passes we will return through and call it day if it doesn't and we get out of this Tri cach block we'll return false because we know somewhere in the middle the upload had filled and that's pretty much it for the logic that we had to implement to upload a file to Firebase storage let's come back to our homepage and use this function so to use this function is going to be pretty simple all I'm going to be doing is once I made sure that the selected image is not null I'm going to create a variable of type buol I'll say success is going to be the name for it and we'll set it equal to a a weit called to upload file for user and here I'm going to pass the selected image like so and do command save so once this is done let's do this let's print success to the console let's see what happens when we try to upload a file so as to command save let's open up Firebase on one side let's go to the storage tab make sure that underneath of our storage we have nothing yet then let's click on The Floating Action button select Define let's do Tom Cruz now and if I go to the authentication cab and come back to storage you should see that now we have a folder which is the unique ID of the user that had logged in and underneath of that we have uploads let's see and underneath of that we have uploaded our file hopefully yes we have so now the next part of my application is to actually list all of the files that were upload by a particular user in a list view on our actual devices screen so let's do that now so to do this what we're going to be doing is coming back to my homepage. file and let's Implement some logic here before we actually do anything in the u. D so firstly what I'm going to be doing is that I am going to be coming coming to my homepage State and here I'm going to create a list of reference and this actual class is going to come from Firebase storage so a reference basically refers to a reference to a file that's been uploaded somewhere in Firebase storage so a list of references mean a list of references to files that have been placed somewhere in Firebase storage and then I'm going to define the name for this variable which is going to be called uploaded files and I'm going to set this equal to an empty list to begin with then I will come back to my build UI function and here what I'm going to be doing now is changing the logic up so instead of returning a container what I'm going to do is have a if check to see if our uploaded files are empty so if they are empty then what I want to do is return a center widget with the child which will be a text widget which will say the following which is no files uploaded Y and if this is not the case then I want to return a list View and I'm going to to use the Builder function to generate my list View for the item Builder I'm going to say that we're going to get the context and index pass to us like so and then I'm going to also set the item count to be the uploaded files. length there we go that's pretty much it so for now since our uploaded files list is empty we're seeing that no files have been uploaded yet so now let's go to utils do do implement the function for actually retrieving the files that have been uploaded by specific user and then we'll come back to our homepage So within u. dot what I'm going to be doing is I'm going to say that I'm going to create a function which will return future and this time the future is going to return a list which is going to store reference objects within it and we might get it we might not and then I'm going to say that this function is going to be called get users uploaded files and then I'm going to say that this function will also be in synchronous and open up its body in Implement a TR catch block within the catch block just print the error and then we can actually see what to do within the tri block So within TR the first thing that I need to do is establish the place within Firebase storage where I want to get my files from so I can C Firebase storage to return all of the uploaded files by not defining any upload reference besides the base directory or I can Target my upload reference to only list files under a specific folder so we're going to be doing the letter but the actual logic will remain the same so what I want to do is basically get information for all of the files that have been uploaded by user under a specific folder so how do we do that so to do that I need the storage reference so the location in Firebase storage where these files are so how do I do that well for that firstly I need access to my users's ID because we use those to arrange uploads so I'll do user ID equals to and then the same logic which is Firebase o do instance. current user do ID or uid I should say once we have the users uid I will Define the storage reference so it's the same where I'm going to do Firebase storage Dot and then I'm going to do instance. ref so now that I have a reference to my storage I will now get a reference to my uploads folder so uploads ref like so and this is going to be the storage ref doch child and then I want to basically Target the user id/ uploads folder so let's do this and that's pretty much it and do command save so now that I have a reference underneath a Firebase storage to the particular folder where I want to get a list of all of the files from what I'm going to be doing is creating a variable called uploads and then I'm going to do uploads ref and then call a function on it which says list all like so and that's pretty much it and then what I'm going to be doing is also adding in a weight call to it because this is a asynchronous function and that's pretty much it and finally the last thing that I'm going to do is return the uploads do items which is going to be a list of reference like so and do command save that's pretty much it that's all we had to do let's go back to our homepage and implement this so to implement this I have set up the following logic I am going to basically within my homepage I will create a function which will return void and it's going to be called get uploaded files and it's going to be a synchronous I'll open it up then within this I'm going to say that I'm going to create a list of reference and it's going to be optional and I'll say that this is going to be result I'll set it equal to await and then I'll do get user uploaded false then if our result is not null so if we do get a list of reference then what I'm going to do is call set State and underneath of this I'll do uploaded files equal to the result that's pretty much it to command save so now that this is done I will take this get uploaded false function and I will come to where I have my upload media button on pressed call back and then here what I'm going to do is if it was a success if we were able to successfully upload a file then I will call get uploaded files it's going to go ahead get the users uploaded files for us and set state is going to set the actual files that we uploaded by the user into the uploaded files variable and it's also going to trigger a rebuild of the widget tree and we should see the uploaded files so now that this is done what I'm going to do is restart my application just to make sure that nothing's broken and then I will now come back to my list view. Builder and implement the item Builder so for the item Builder what I'm going to be doing is since I know that we are going to be working with the uploaded files which returns which is a list of reference I need to get access to a particular reference so so for that I'm going to do reference and this is going to be RF is going to be equal to the uploaded files and then the specific index for which we're building the child for so now that this is done the next thing that I'm going to be doing is returning a list tile and doing this and then for the list tile I'll set the title to be a text widget and this will be the references name like so to command save so now that we have done this you can see that it still tells us that no files have been uploaded while we know that for sure that we have uploaded files to Firebase stor and the reason for that is because when we initially start our application nowhere in our code do we call the function get uploaded files so what I'm going to be doing is that I am going to be also defining for my homepage State class it's init State functions basically overriding it and once the super classes in it state has been called I'm also Al going to call the get uploaded files function and restart my application and this time you're going to see that after some time it's going to show us the actual file that was uploaded and what the name for that is so now if I try to upload a new file let's just say this one let's do Christian Bail this time it's going to go ahead upload the file for us and after some time update the list view with the new file that was uploaded and within Firebase you can see that if you go to the storage tab the users's uuid uploads a new file was uploaded as well so everything seems good so the last thing that I want to do is show the image here as well so let's do that so if I try to show the image what I'm going to do by doing the following which is that I will come to my list to and I'm going to set the leading property for my list tile to be an actual image and basically the image is going to be a network image and we're going to set the URL here for the image that we want to display but if I want to access the actual references download URL let see here you're going to see that it's going to be a future in the it's going to be a future and then the future will turn a string to us so we can't directly use it here it's not going to work because image. Network wants a string but we giving it a future string so we have to do something well what I'm going to be doing is basically for my list tile I'm going to be copying this so I'll copy all this I'm going to say that within my item Builder I'm going to return a future Builder the future Builder is going to take in a future the future in this case is going to be ref Dot and then get download URL and then the Builder is going to Define how this future resolves and what variable gets returned and other things like that and the Builder is going to get two things passed to it a context and a snapshot so that's pretty much it and then I'll open it and I'll return a list view like so so and do command save um add the semicolons where it's necessary so now our snapshot is going to be async snapshot of typ string so I can do snapshot. data and this is going to give us access to the actual download URL because we're setting the future to be this and when this future resolves it's going to give us a string which will be the actual download URL but it's still not going to work because snapshot data is optional we might get a string we might not it can be null so let's implement the logic for actually making sure that if the snapshot. data isn't there then we do something else so for that what I'll do is that I will say that if the snapshot has data then what we do is we return our list tile and then I can just add an exclamation mark here because I made sure that my actual data is there otherwise what I'll do is that I'll just return an empty container so if you get an error or the future is still resolving we just return a container to comeand save now you can see that after some time once the image future resolves then we actually see the image before that it's just an empty container so now let's restart our application you can see that it takes a bit of time and for our future to resolve and then we see the images so now let's do the final test we click on the upload button download click on an image it gets uploaded and then we see the actual names of the file as well as the actual images that were uploaded and that's pretty much it for today's tutorial as always I hope that you enjoyed the tutorial and learned a thing or two about Firebase storage if you have any question comments or concerns feel free to leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 2,041

Keywords: flutter firebase, firebase, flutter firebase storage, flutter firebase storage upload image, flutter firebase storage get download url, flutter firebase storage image, flutter firebase tutorial, firebase storage flutter, firebase storage flutter tutorial, firebase storage flutter upload image, flutter storage firebase, upload file flutter firebase, upload image to firebase flutter, how to upload file in firebase storage, flutter tutorial for beginners, flutter firebase crud

Id: MctPUn3gqsI

Length: 34min 51sec (2091 seconds)

Published: Sun Feb 04 2024