Listing All Your Files From Firebase Storage 🔥 | Retrieving Data From Firebase Cloud Storage

let me show you that what you will be able to do after watching this video so first of all i am in my firebase storage so if i show you this folder this folder contains two music files right two music files it is not a music actually it is my voice from one of my videos okay just leave that now this is my react app nothing much here just just see that when i click on this list all songs let me make it a bit bigger for you okay now here's a button and if i click on it you see some files will be retrieved here now you see those two the urls of those two files up here the urls of both these files are here in my console now you will be able to do this actually so first of all if i open this link in new tab you see here's that music so the same audio is up here and you just see here i have my i mean my project name and all the stuff so these are actually coming from my project up here now let me just tell you that you can do this with your images your videos or any stuff you're including in your projects no worries about that okay so you can just see this is what listing files with cloud storage on web this is something like you have some files on your cloud storage and you just simply need to render them in your react app that is it now after watching this video you will be actually be able to just retrieve them into your project just like this with a button click or you can use react use effect so that when the component loads up then although all these songs just comes up right now these are actually songs because currently i am working on a project related to music and all that stuff okay so if you want to know about that project just watch the video until the end or somewhere in between i will tell you about that project okay so now let's get started with the video so okay guys now i am here on my firebase account so you see this is one of my accounts logged in so i will go to console so if you don't have one no worry just it's completely free just make one of your account in this just go to firebase and just log in with one of your google accounts and you're ready to go okay just press on the go to console button up here at the top just click on it and you will be at this page if you have not created anything with firebase previously this will be empty only a add project button will be there and nothing else like this okay okay now if i click on add project you have to create a name for your project so here i will just say that example example listing fine okay now let it be whatever it is now i will click on continue and if you want google analytics for your for this project how many visitors are visiting it and all this stuff just enable it or else just remove it actually i don't want it so i'm just actually removing it okay then press on create project or let let it be it's your choice okay i will let it be then click on continue then you need to select an account here just make sure that it is default account for firebase and then click on create project then it will take some time for creating your project so let it be now here if you want to um actually get a kind of block kind of things you can go to this website i will provide a link in the description you can just check this one from the description okay now here they have actually told about this stuff okay they have actually told about this stuff that how are we going to do this right if you want them in different pages they are going to tell them all the stuff but they are not told about something that how are we gonna list them like how i'm gonna get the url of that particular file so i will be telling you all that stuff in this video so don't worry so now let's see okay our project is ready now you see your new project is ready let's press continue and then you see you will be having a project like this here then as we are working on a web app with react js or if you are working on android or ios it's your choice so i will click on web because i am working with it now after you just need to give a nickname to your app so i'll give the same name example listing fine and then i'll click on register app if you want to set up hosting that's your choice i don't want any hosting here so you need to press on register app don't actually don't click this okay don't click this check box if you want hosting just create a new project that will be much better and now just keep this i mean this firebase config somewhere in your notepad or something okay but you can actually get this data from somewhere else also but you have to go to settings and all other stuff so i actually don't recommend that i just copy this okay i have just copied it and let me paste it in my notepad and now i pasted it okay now this is my firebase config right now let that be then continue to console just press here and then you see something like this now actually you need to refresh refresh the page and you will see something else there now here you see some analytics about your file if your file is i mean your website is actually hosted then you can see your analytics somewhere here okay then just go to example listing click on settings you see this stuff right and let me show you where you can find that config here it is actually or you can just go to here if you are working on just firebase or sdk or something here you can read it firebase configuration object containing keys and identifiers for your app so this is something very important right for your particular project now that is good now after this what we need to do is go to storage here if i go here wait a minute okay if i go to storage here just click on it and after clicking you have to click on get started and now you see something like this then press next and then just uh select your region from here as i am from india i'll just say asia south one and click on done just make sure that this location kind of stuff can't be undo right you actually can do it once so make sure that you don't do any step wrong here fine so it will just take a few moments or few seconds or minutes depending on so guys it is now actually loaded up right so here you can see you have something like upload file option and here you have a something like create folder now if you want your web app to actually have pre-uploaded files like i can have music files songs music files and songs both are same oh my god okay just leave that you can have images videos and all the stuff you need actually so you can upload them from here if you click on upload you can just select any of the files or you can just actually create a folder here i don't need anything actually because i will be hosting if necessary i mean i will be uploading my files from my code itself i will explain you about that if necessary in some of my projects so all the stuff at the end of this video okay so just keep watching till the end because i'm gonna tell something important if you are actually a beginner okay so this is good now this is everything we need to do now i just explained this to you so that you could also start with your new firebase i mean new firebase storage option now but i i have already created one and already added some files to it so i'm not gonna take them back again okay now here are two two of my files let's have a look that how it is actually working i go to my react web app i'll refresh it i have nothing here let me clear the console and if i click on list all songs you will see some urls here so they are here actually i showed them in the starting of this video right so now let me show you one more thing let me upload a image here so that you are i okay this guy is doing it actually you have confidence right so router tbn is actually uploaded now right so let me just refresh once and go to this one refresh it also then if i click on list all songs here now you see three things now if i open it in new tab so this is one of my thumbnails right both of these are i mean audios but this one is a thumbnail or a image you can say this will retrieve everything that is in this particular folder music up here this is my main storage and in this main storage here this one in this main storage i have my music folder and this music folder i have some files and i will just delete this one okay now there is one more important thing you need to do actually now before getting started you need to go to this rules section and here you actually need to do some changes right so it will take a bit of time to load depending on your internet connection and instead of this request dot auth not equals null remove that stuff and just enter true i mean type true and make sure it is rules version equals to two at the top okay that is important make sure that it is two then click on publish and you are all good to start now let me close this now just forget about this now actually i have created a project so i will be explaining you along with that so just forget this for now now let me make everything bigger now this is one of my react app i'm working currently i'm working on a project so this is some a bit of part of it so first of all create a folder in your source named firebase okay you can create it with any name but it is almost where everyone does it with firebase so it is good to do with firebase so that other people if browsing through your code it is better that they will also understand that yeah this is something from firebase right then create a in index.js file in there just go in here and you need to do some things here let me just remove this stuff okay now before doing this you need to install something go to your terminal let me close this and show you click on this terminal button at the top in your vs code or you can do this with powershell command prompt anything but i am doing with vs code so click on new terminal and enter npm install dash dash save firebase and press enter and it will download all the stuff you actually need right so this is it and then let me hide this terminal with ctrl j this is fine now you need to do something like this you have to import firebase from firebase slash app this is from that package we just installed now you need to import this firebase and then you also need to import this firebase storage thing right then just forward this song's array list and all that stuff just forward this one okay now that is it now let me just remove this just one minute fine now it is fine okay now you saw that we have imported two things here then you just need to paste that firebase config here this one as we have copied just before a few minutes you just need to paste that up here this is from my original i mean my original project on which i am working currently so let it be then you see here this is something called list all i have declared a function in which we have this these stuff through which we can actually list all our elements in the firebase storage so if i go to the docs you see somewhere up here we are doing the same thing but if you want if you actually want to go to this actual file you can just press on here i'll do open link in new tab this will open one github and you see the same snippet you actually need to import the same stuff here also fine then actually what i did is i just copied all this function up from here and added that to my vs code now you see something here this is your function and in this function i am actually having nothing just in here you need to declare something like con storage reference is equal to firebase dot storage dot function ref now this do's this stuff create a reference under which you want to list your items okay then you need to clear create a list reference and then you just need to say storage reference dot child is the folder now i am giving this folder name from my app.js if i show that to you here i'm calling this function with a button click and then in this function i'm calling this list all function which i had just imported from that particular file we have just created here okay so i'm just passing in the folder name that is music slash up here you can see this folder name right that is one that is it and if i go to index.js back again you see here we have something now now this is a list reference and from this list reference you have to use something called dot list all now this will just list all the elements in your firebase storage then you need to say dot then it is kind of a promise okay now this gives some ref response and this from this response you actually need to do some uh i mean functions through which you can just get your data the main function is this one okay you can actually comment them up but let them be because they are not affecting our react app okay and now just leave this one and this one okay there are actually two functions so we don't need to worry about anything else just make sure they will give you something like this the catch error and then you will have nothing in in here you you just do console log n error if there is an error it will show that error in the console so that is it then we actually need to do all our work up here so now i am doing nothing now there is a function here now let me show you something okay now this is rest.items.forage it is taking each of these items in our storage then logging that particular item right now if i save this stuff again if i save this stuff something error some error is there just wait a minute now as it is cleared i will remove this okay actually i think i i need to close this okay guys i'm not getting that where i am actually doing this mistake so let them be there okay now let them be there i don't i i'm working i'm doing some error with these brackets or something but that doesn't actually change anything are in our app so let them be now let me just comment out this one so just forget this okay just forget this download url stuff that we are getting in our react app up here download url and all this stuff and then just see here that we are logging this item ref now let me just do the same thing up here also let me say item ref plus item ref actually then you will be able to see it perfectly now it is fine now then we are just logging that error and it is up and you just need to at last you just need to say that firebase dot initialize app that is firebase config then you need to say at last because we are actually exporting the storage to our app.js you need to export the storage list all that is the function we have just defined up here to list for the listing of our app i mean listing of our files in the storage then you just need to say firebase as default now this is our index.js let it be now let's go to app.js we have actually imported that list all just the list all function now actually here i am not using the storage and firebase because that was initially in my project but if you want to know about this project as i said at the end okay so i've just taken that list all function up here and then i have defined a button here just button with list all songs when i click on this button just run this function that is list all songs okay this is fine now when this list all songs function is called just list all with the folder name that is music slash that is your job do that okay now i'm going here refreshing this page and clicking on list all songs it will just see here we are having something like this okay now this is actually the link to the file from firebase now this is not actually the complete link okay now this is the link but this is not the actually complete thing complete data we are actually getting to get the complete data just remove all the stuff so that you will get each and every function each and every detail about it now let me go back again press refresh and then list all songs now you see something like reference com pad now forget this download url and all other stuff as i said i'm having some error with those bracket stuff now you just see if i click on reference compact you have something like bucket this is your bucket where your data is actually getting stored this is your full path the music folder then name of the file this is the name of the file and then name this is actually our file name then we have the parent folder that is reference compact and root now go to proto here and you will see all your functions that are actually possible to use now we are actually using this get download url we are actually using get download url and now this is the thing from where we are getting this url and now we can put this url in the audio tag so that we can use the audio similarly if that's an image you will get that image url and you can similarly put that image url through you state hooks into your image tag source right now that is good now how are we going to use this now here we let me just comment this item ref back again now here we are actually declaring a function here now this is item reference and in this item reference this is each item from this response dot items this is each item from this response dot items good okay now after that from each item ref give me download url this is the function from firebase not javascript okay so let it be if you don't understand that that how i didn't see this function anywhere in javascript or react just so actually it is from firebase dot then it is written as a promise if it is response it is giving a response that is the url i am just saying give me that url give me that url and actually i am taking that url okay now actually i'm taking that url and logging it in the console and that is it guys that is it that is this url now now what if i want to just have these urls through my use tips and app.js how am i going to do that nothing much nothing much you just need to do what what are the things this function is actually having we are having this firebase we are having the storage right we just having these uh firebase and storage now storage is nowhere here but actually i am just saying that firebase dot storage as a variable and exporting it so now i can import that stuff in my app.js like here you can see i've imported it right now after that you can after this you can just say that just add this code this piece of code this list function list all function into app.js and it will work as fine it will work as fine as you want then you could just create some use tapes and all that stuff and then you can just pass in them into your i mean you can just pass on them as audio files like that by creating a new state array and mapping through all the items of that array okay now what is this project actually i'm working on it is a music app guys now i usually use spotify right i usually use 45 while coding now but um as i'm a free user of spotify i actually just get ads again and again but i don't want that so i'm just saying that why don't we create a project so that it is helpful for me as well as some of my friendly developers like you who are watching this right now so what happens is i'm actually gonna add only music to this no songs no no oliver no hollywood nothing like that only music chill loafy beats that are going to be added in this project which i'm working on currently if you want a tutorial on this just let me know in the comment section if you want a tutorial on this now this is that i'm just actually working on this firebase storage like these things from morning right from morning i'm working on them but i'm just like pulling my hair off but at last i got to get the answer for my uh i mean the solution from firebase docs and now i'm making a video on it i found it i checked a lot on youtube but i didn't get it from anywhere so i thought that it would be better to make a video on it so that not me some people will get definitely get benefited of it now i i hope that you like my project idea that i'm gonna build now you can actually add songs up here i'm also working on a feature where you can actually upload your files from your i mean from your desktop or your you can actually add files any user not only me even you can add i will give an option here at the bottom or somewhere from where you can actually add your song or your music i can actually make sure that all the music files are only music not any bollywood or hindi songs or something like that just leave that stuff okay i will let you know when this project is ready to be hosted and i will show you a glimpse that how it is actually looking and i will ask you about its ui and all that stuff and after that i will be hosting it but before that that is it for this video guys i hope you got to understand that how you are actually going to create your storage in firebase and how you are going to retrieve your files if they are already uploaded but now if we have something like how do i upload a file if you want to know that just let me know in the comment section i will make a video on that just don't worry about anything just pull just throw your doubts in the comment section and i will definitely reach out to you guys so guys oh my god my voice okay just let it be so guys that is it for this video i will meet you back again in one more beautiful video just like this one okay so until then bye guys let's meet again

Channel: Ashish Nallana

Views: 16,608

Keywords: the enthusiastic developer, the enthusiastic dev, Listing All Your Files From Firebase Storage 🔥 | Retrieving Data From Firebase Cloud Storage, How to get url of all files in firebase storage, how to list all files from firebase storage, how to retrieve all files from firebase storage, firebase tutorial, firebase and reactjs, how to get all images from firebase storage, how to list all firebase files with reactjs, react firebase projects, firebase storage

Id: c_ig_EwSRhQ

Length: 26min 50sec (1610 seconds)

Published: Thu Jun 10 2021