Upload Images / Files to Firebase In React - Firebase V9 File Upload Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video that was requested by a lot of you guys where i'm going to be showing how to upload files and images into firebase and also using react for our frontend so it's a pretty simple process and all of the code for this will be in the description um it is really nice and really interesting i wanted to give like a little demo of what we're going to be building it's not super complicated um it's mostly focused on functionality but basically you can see i have a bucket which stores images and files and at least for this example i'm just showing images but you can do the same thing with files it's the same process but for images you can see i'm currently displaying on the screen all the images currently in the bucket and i can upload an image to the bucket by clicking on choose file and as you can see i just chose a picture the name appears over here then i can click on upload and it should automatically display the picture apparently i chose a picture which is another version of a thumbnail that i made for another video um but you can see it appears over here and if i refresh this page uh it's stored in the bucket so every single image will be um downloaded including the one i just uploaded so this is basically what we're going to be building it's very simple functionality and if you're interested in just seeing the code you can just go in the description and if you want to support the channel just leave a like in this video because it will honestly help a lot it will help push my videos to more people and i would be very grateful if you could do that so with that in mind let's get into the video [Music] [Applause] [Music] okay guys so as you can see over here i open my project inside of a folder and it's completely empty it is inside of vs code and this is what i'm going to be using to create our project so to start out our project we need to first install a react application so we're going to be using the create direct tab command i'm going to say yarn create react app like this but if you're using npm you can just write npx create direct app and it should start generating our react application for us while this is happening we have over here our firebase project which is um basically just a website you go to the console console.firebase.google.com i'll try to um add this to uh to the description so you can just click on it and we're going to add a new um project over here let's call it um uploading file like this whatever you want to name it and we're going to generate a new project inside of the inside of the firebase platform so i'm gonna unclick on this so that we don't have analytics because it doesn't really matter at least for me but you can leave it open if you want to and then i'm gonna click on create project so this should start generating the project for us which is good because we need it for our connection between our react application and our firebase so you can see it says that your new project is ready which is amazing and the good thing about firebase is that actually it provides you with a lot of different services so you can have an authentication service a fire a database service a real-time database service a storage service like so much stuff can happen with firebase in this video we're going to be using the storage for service which is meant to store files videos images all the kind of stuff um together with all of uh so like if you're storing data um you'll probably start in the firestore database but if you're storing files and images you'll store it inside of the storage service so um let's check out our code you can see that um a react application was installed successfully and we have all of these files over here what i'm going to do is i'm going to delete a couple of these files i'm going to delete the logo the setup tests the index.css and the app.test.js those are our necessary files for our project we're not going to be testing anything and we're not going to be using the logo um so that for that reason i just deleted to keep it clean i'm also going to delete all of the stuff inside of here because we're not using all of that and i need to also delete the index.css in the index.js file so this should make it work perfectly now there's a couple packages that we do need to install the first one is i need to install the firebase package um it's pretty self-explanatory why i need to install this we're going to be using firebase for this project so we need to install their package but also later on the project you'll see that we're going to be generating um random characters um in order to provide a name for our files so we're going to install a package which will allow us to generate those characters in a unique way and the best library to do that in my opinion is the uuid library which it's really common really really useful so i'm just gonna install that as well i'm gonna press enter and it's gonna start installing everything and it should be fine um like i mentioned we're going to be using the storage service inside of this video so you can just click on this over here and um you can click on get started so if you click on storage um you should click you should come to a page and click on get started and you'll see that this over here will be the page that you'll be seeing so basically how the storage works is you can create folders inside of here and upload either files or images or videos or whatever you want depending on what you want to store inside of this cloud provider so um what we want to do first is uh we need to recognize that firebase by default um you will set the rules to its services to not allow people from outside to add like or change or read or write um data inside of their service so for example i can upload a file into this storage from my computer right now but i can't upload a file uh by using some sort of api call so i can't do it by making a website and connecting to here and the reason for that is because um this rule section over here says that um no one is allowed to read or write because it says false over here now if you have authentication in your project this is a great place to make it so that only authenticated users can first for example send images to your storage but since we won't be having that i can just set this equal to true and click on publish and now we will be able to work with the storage inside of our react application now what we need to do is we need to set up the firebase configuration inside of our project and to do that we're going to come over here and we're going to create a new file called firebase and this file will include all of the configuration information for our firebase project the way we gathered information is we go over here and go to project settings and then we go down and it should be right over here this information over here basically tells us to install firebase and copy and paste all this information inside of our project if you've used firebase before you know that this basically is a great and easy way to just connect our project with the console because it already includes all of your own api keys and and variables and everything so it will be establishing the connection correctly so one thing i need to tell you guys is that since we're using a specific service in firebase which is the storage service we do need to import some stuff from the storage service so let's say import from firebase slash storage like this and what i want to install is the i want to get the get storage function this function over here basically um accepts uh an application and just tells firebase that we're going to be using the storage in this application so we can create a variable called storage and set it equal to get storage like this and just pass in over here the app um which is uh referring to the app that we're creating now the storage variable will allow us to make references to which storage we're talking about right which storage we want to store our files so we need access to it everywhere in our project so i'm going to export this constant so that we can access it in different files also going to run my project by running yarn start and when you when i press enter you can see that on our local host over here it should be running our project but it shouldn't have anything um currently in the website you can see it is a blank page which we want to change because we need to add both the input and the button that we're going to be using to actually upload the images so let's do that let's create an input on our app file and the input will be of type file which will allow us to select files in our computer we'll save this and then we're just going to create a button and this button will say something like upload image and we want to create a function which when we click on the button it will call this function and we'll actually upload the image to firebase so i'll say upload image like this and we'll just pass it as the on click to the button so i'll say on click upload image now how are we going to make this work well first of all we need access to which file the user selects on the input so when you select a file on your computer we need to store that information like the file you selected or somewhere so that we can send that file to um to firebase so the way we're going to do this is we're going to be using um a state which is going to hold that information so i'm going to import from react the use state hook like this and i'm going to say const equal to use state and the state we're going to create will initialize as null but it will let's call it image upload because it's going to be the image that we're going to be trying to upload so i'm going to say set image upload and this will be our state now how we actually set the file that we choose to be equal to this state well we come over here to our input we give it an onchange we see that every time some you select a file uh inside of this input we'll call this function which its purpose is basically just to set the image upload like this to be equal to the event dot target dot files so you can access the file in this specific input by accessing the target and then dot files and since you can select multiple files um this will actually be an array but in our case we're only uploading one file so anyways it will be the first element in the array so we're just going to say zero over here and now we're successfully setting our image upload state to be equal to the file the user is selecting which means that we can access this right inside of this function so the first thing we want to do with the function is we want to ask if the image upload is equal to null then i basically we basically didn't select any images so let's just return and get out of this function so so what we do now is we'll come over here and start using the functions that are provided by firebase to upload this image state over here and the first thing we we have to do from firebase is we need to import the storage variable that we created on our firebase file by saying import from firebase and grabbing this storage then what we need is we need to make some sort of reference to where in our storage service over here we're going to store the file like i mentioned you can actually create folder different folders over here so if you have a project where you want to organize it in a way so that some images are stored someplace and some images are stored in another place you can do that by just creating folders so in order to upload the image to the correct place we need to make some sort of reference to where in our bucket or our storage we are um going to upload this image too so to do that we'll just come over here and we'll import something from the firebase um storage service which is a function called ref and it will allow us to make that reference that i just mentioned so we can create a reference by saying something like imageref is equal to ref and then just passing the storage over here now the second thing we're going to pass over here is the name or the path to where we're going to store this image now we can we can create some sort of folder inside of our bucket called images for example you can call it whatever you want you don't even need to create a folder actually you can just upload it directly to your bucket but in our case let's create a folder called images and the path for the photo will be images then slash the name of the photo but what name will we actually name this photo well the thing is when you create a project and allow users to upload their own pictures you don't really want to let them choose the name of the file which is going to be stored in your project so the reason for that is because it's very common for two people to upload files with the same name so you don't have two files with the same name because that would be just messy right it wouldn't work so you need to find some sort of way to grab the name of the file they used and kind of randomize it so that no two files will have the same name so for that reason i added the backticks over here which will allow us to basically name the image as following so i'm gonna create a dollar sign over here or money sign then i'm going to say that the image name will be basically the current name of the image by grabbing the name by saying like image upload.name then what i want to say is i want to add a bunch of random strings and letters after the name of the image this will make us be sure that every image will have a different name so this is why i downloaded the uuid package in the beginning because it allows us to get this random large strings of of characters that we can use in situations like this so i'm going to import that from the uuid library and what i want to import is a function called v4 which um it's just one of the methods they have to to randomize letters so i'm just going to say that the file name will be the current name of the image plus v4 then what i want to do is i'll just press enter and we've made the reference to the image all we have to do now is actually upload the image to firebase now to upload we actually use a function called upload bytes and this function takes in two different arguments it will first take in the the reference to where we want to upload this so we'll pass the image reference over here and then it will take in the image that you want to upload so we're going to pass the image upload over here the state by saying image upload and this will return a promise which means that we can say dot then and just grab the the response from this like whenever you upload it when it's finished you're gonna run this function over here and um there's different ways of handling this you can use async await but we're gonna be using promises because i find it more intuitive in this example and what we wanna do is after you upload the image at least for now i just want to alert a message saying um image uploaded so we can get like a confirmation that we actually uploaded the image so i'm going to come over here i'm going to refresh the page and we know that there's nothing in our console there's no images and no files over here there's not even the images folder that we're we're telling firebase to create um but one thing we we know is that we can now um upload an image so i'll select an image and i'll try to upload it you can see i selected an image over here it's just a thumbnail for one of my videos i'm going to click on upload image and if all goes right you should see that it says image uploaded so we got that confirmation but we are not sure yet if did actually upload it and the way to check is we're going to refresh this page and yes you can see we have a folder over here called images and inside of it there is the image that we uploaded and one thing i want to tell you guys is you can see that there's the image appears over here right and i can upload as many pictures as i want like i just selected another picture over here for another thumbnail i'm going to try to upload that one as well and you'll see that it should appear here as well um but one thing i want to explain to you guys is the way that firebase storage works is um when you upload a picture you the way you access it inside of your projects is by accessing a link so all of these pictures are actually stored in a public url as you can see anyone can actually access this and anyone can actually download this so all we have to do to display these images inside of our code is to have access to the url in which this picture is exist right so that's what we want to do um with our project what we're going to do is we want to display all of the images in our in our bucket in our storage as a list down over here right so the way we can do something like that is first of all we need to create a use effect because we're going to run a function immediately when you open the website and a user effect allows us to do that so i'm going to say use effect over here and this use effect will be run once we can make it run more times but for now let's just make it run once because we're going to get all of the images and automatically display them in our screen and we need to keep track of the url for each of those images in our storage so we're going to create a state called um image list or you can call it whatever you want but i'm going to call it image list set image list equals to use state and we're going to make it into an array now what i want to do is i want to tell firebase to get all of the images in a specific path inside of our storage so if we have different folders um firebase allows us to for example um get all all the images only in the images folder and if you have another folder you can get all the images in that folder specifically as well but for that we need to reference which path we want to take right so there's a function in firebase storage called list all which by the name you should already assume that its purpose is to list all of the files in a specific path so when we run list all like this we need to pass some sort of reference to a path in our storage as the argument to this function and it will just return all of the images and files inside of that path now we've made references in the past right over here we can see we made a reference to a specific path when we were trying to create the images folder and add the image to that folder now if we want to make another reference where it's just a reference to the folder as a whole we can say const image list um ref something like this set it equal to ref and we pass first to storage like we did before but now what we passed is we just passed the images slash because what we're trying to say here is we want to make a reference to all the files inside of the images folder so we can pass this inside of the list all over here and we can see that then after we get all of those images we'll get a response from this request and we'll run the following function right so we can console.log over here um what we're getting just to test it out so you guys can see so if i come over here this is running automatically when you enter the website when you refresh the page because it is a user fact so it should be consoled logged right now and it is right we have an object over here with two items each of these items represent one of the pictures inside of this folder meaning that we correctly reference the correct path and we're getting the the data for each of the pictures now the way we're going to actually display them is a bit hard because you don't have the url for the pictures right over here actually firebase um makes you use a function from firebase called get download url um where you pass one like the the item the reference to a specific image and you get and it will give you back the specific url so what we need to do is we need to go through each of the items in our storage so say response to items loop through each of them like this grab each individual item and we need to use this function from firebase called get download url to get the url based on that item so i'll say get download url then pass the item over here then say dot then and i'm going to grab the url from this and with that in mind all we have to do now is just set the image list like add this url to the image list and if you're used to states you know that to add um another item to a state that is a list all you have to do is you just give grab the current value of the of the list and set it equal to the same list but add the url at the end so what does this mean it means that we're now getting we're now setting um the image list to be a list of two items which are both the url where we can access each of these pictures so why would we need the url well with react and just html as well as ho you can actually display an image by just passing a url as the source so we're going to come over here and say um image list like this the map and we're going to map through each of the images that we get from firebase and we're going to get the url for each of them and just return back um an image like this an image tag with the source file being equal to the url that we got now if we save this if all is working um oh i need to delete this over here but if it's all working we should see the images to our actual code now the reason why it's doubled over here is just because i kept saving the code a couple times and he kept making the request but if i refresh the page it should only display two of the images which are the two images in our project also um the reason why it's displaying like nicely one on top of each other is because i actually already had um predefined css over here you can just copy and paste this it's it's it's really small but it just makes it look like this so if you're confused why mine looks away and yours doesn't um this is why but there's a thing right when i try to upload another picture i'll just select a picture over here as you can see and i try to upload this image it will say image uploaded but it won't appear in our screen right the reason for this is because when we upload an image all we're doing is we're just uploading it to firebase we're not telling our code to refresh yourself right and there's a couple ways we can do this um the the main one is to whenever we add a new image we just set the url to that image um and as like it at the end of our array so what do i mean by that well instead of just alerting a message over here we can just say set image list same way we did before grab the previous one and um just uh sets it equal to a new array with uh where it's basically the previous one but we add a url at the end and to actually get the url from the image we're trying to upload what we can do is we can grab this thing called the snapshot from the upload bytes function and then use that to get the download url for this specific image by passing the snapshot.ref we're making a reference to this image that we just uploaded and getting its url so we'll say dot then and create a function and pass grab the url directly from here so we'll just put this inside of here and we'll just pass the url at the end over here so now what happens is when we add a new image i'll just refresh the page i'll select a new picture you can see i selected another thumbnail and i'll click on upload image we should see that not only it uploads but it also adds it to the end of our array so it means it's working perfectly and um it's amazing right it's working perfectly displaying all the images all the images are now in our storage and you can play around with this you can do the same thing with files it doesn't have to be images it's just what i thought would be best for this video but but yeah that's basically it for the video if you want to check out the code the code will be in the description with all of the information related to the project um if you enjoyed the video please leave a like down below and comment what you want to see next because i'm i'm actually putting a lot of effort um into this channel into the videos um i'm midway through my school year and uh it's pretty tough with with schoolwork but i'm trying to double my upload rate so if you have any ideas for videos you can just leave them in this in the comments and i'll definitely read them um but yeah if you if you could leave a like and subscribe i would be very happy so thanks again for watching the video and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 118,309

Keywords: crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, firebase, firebase image upload, upload image firebase, firebase storage, firebase v9, upload file firebase, firebase tutorial, react tutorial 2022, react tutorial for beginners

Id: YOAeBSCkArA

Length: 25min 56sec (1556 seconds)

Published: Tue Apr 05 2022