Firebase v9 Storage in React | Upload Files to Cloud

in this video i'll be showing you how you can use firebase cloud storage to upload files to the firebase cloud from your react web application so without any further ado let's get started [Music] for getting started i have a basic react application open and we have a pretty basic form here with an input element of type file which is going to help us to choose a random file from our local computer and here i also have a button with this text of upload and for now in this form handler we are simply logging this selected file from our computer to the console and we are pretty soon going to upload this file to the file storage but before that let me show you the simple demo how the things are working for now so let me open my console and click on this choose file and select a random image and click on this upload button we can see that this selected file is being logged in the console now in order to start using firebase in our project the first thing we need to have is an firebase account for that simply go to your browser and type console.firebase.google.com and then select an account of your choice here and then simply click on this add project button here you need to provide a name for your project so i'm going to say firebase react storage and then click on this continue button and then it is going to ask whether we need to use this google analytics for our project or not so if you want you can use it but in my case i am simply going to disable this and then click on this create project button and then firebase is going to do some stuffs in background and then finally we'll be back when this project is created for us now that the firebase project has been created successfully click on this continue button and then click on this add an app to get started button and here we are going to simply select this web because we are using a react web application in our case so click on that give a name to your application and then click on register app now the next step is to install firebase package in our project for this simply copy this line go to your code editor and in the terminal simply paste this and press enter now this is going to install all the required libraries we need in order to access firebase services in our project now as a next step we need to simply go back to our browser and copy this firebase config object because we need this piece of information in our project in order to connect our project to the firebase services simply copy this and go back to your project here simply create a file and i'm going to name it as firebase.js now in here let us first paste the firebase config which we have already copied and here we are also going to import initialize app from the firebase app and also the get storage from firebase storage now in here we are going to create a variable and we are also going to export it so we are going to say const app is equals to initialize app and in here we are going to pass our firebase config next thing which we need to do is create another variable and we'll name it storage which will be equals to gate storage and here we are going to pass our app variable now let us quickly go to the app component and import this storage from the firebase file and here i'm going to create a separate function to handle all the logics related to upload so i'm going to say const upload files and this is going to accept a parameter which will be our file chosen from our local computer and here we are going to write all the logics related to uploading of our file to the firebase cloud storage now before we start writing our upload logics we need to deal with some of the security concerns in the firebase storage for that simply go to your firebase project and click on storage then simply click on this get started button and then click on next then click on done and then this is going to create a storage bucket for us and we also need to change some of the security rules so that we can upload and download files from our firebase storage now in order to change the default rules simply click on this rules tab and by default basically we can see here that only the authenticated users are allowed to upload or download file from and to this file with storage but in our video we are not specifically dealing with the firebase authentication so i'm going to simply remove this and type here true what this is going to do is this is going to allow all the users may be authenticated or non-authenticated to upload and download files now let me warn you never use this type of rules so that any user can access your storage or database for your app which are in production this is only for the demo purpose so never use this kind of rules in your production apps now here we are already done creating our bucket and setting the rules now the next step is to go to our editor the first thing which we need to check is if the file does not exist we are simply going to return from the function we are not going to perform any of the action if the file doesn't exist now if the file exists the first thing which we need to do is create a storage ref so i'm going to say const storage ref this will be equals to ref and this ref we are going to import it from the firebase storage package now this ref method basically requires two parameters the first one is the storage which we created and the second thing is the path and this path is the location in the firewall storage where we are exactly going to store our file so i'm going to create a dynamic path so our path will be something like slash files slash file name for that we are going to use this file variable which has a name property with it so let's say file.name and this thing will create different path for different files having different name now next we are going to create an upload task variable so i'm going to say upload task this will be equals to upload bytes resumable this is a method which we are again importing from the firebase storage package and this method basically accepts two parameter the first one is the storage ref which we created just now and the next is the file which we want to upload now this upload task object is going to have an event called state changed so i'm going to say upload task dot on state changed and then as a next parameter we are going to receive an callback having this snapshot variable which we are going to use in order to show the progress of our upload so it will say snapshot and here i'm going to create a variable called progress which will be equals to snapshot dot by transferred and this will be divided by snapshot by total bytes and now since we want the percentage value of this thing so we are going to multiply the whole thing with hundred and also we are not going to show any decimal values so i'm going to wrap this whole thing with math dot round property now let us also show this progress value somewhere in our jsx tree for that the first thing which i'll do is create a state so i'm going to say const progress and set progress is equals to use state and initially i want the value to be 0. now in here i'm going to set the progress state to this prog variable and in our jsx somewhere here let us create a h1 tag or maybe a h3 tag i'm going to say uploaded and then we are going to use that progress state and then a percentage sign so this is going to show us how much percent of the file has been uploaded to the firebase storage so as the next parameter in our state change listener we are going to have an error callback which will be triggered whenever an error has occurred during the upload task so here we'll be getting the whole error object and for now simply log it to the console now next and the final parameter which we are going to have is an callback which will be triggered when this upload task is successfully completed so here what we are going to do is if the file has been uploaded successfully we are going to fetch the download url of that file and then simply log it to the console for that we are going to use that gate download url function from the firewall storage package as you can see here and this gate download url function basically accepts a parameter the path to the file which we want to download so for here the path will be the currently uploaded file so we're going to say upload task dot snapshot dot ref this is going to give us the reference to that particular file which we want to download now this whole thing basically returns a promise so we're going to use the then block and in here we're going to receive the downloaded url and now we'll be simply logging it to the console so i'm going to say console.log the url which we are receiving now finally we are going to use our upload files function in our form handler for this i'm simply going to remove this console.log file and in here we're going to call the upload files function and here we are going to pass the file object now let us quickly check if everything is working fine so i'll simply open the browser and refresh this and again choose a file click on upload and then we are going to see the progress like this now here i have used this simple text for showing the progress you may use any kind of progress bar or anything you want to use and also here we are simply logging this url for to the console but you can also simply you purchase this url into some database and return it to the user when they want or when they visit the page so that was basically all about using firebase storage in your react web application and if you enjoyed this video do hit the like button and also don't forget to subscribe to this channel for more contents like this and you can also follow full stack simplified on instagram for more hacks and tips on web development so happy diwali everyone stay tuned and thanks for watching

Channel: Fullstack Simplified

Views: 2,333

Keywords: react, storage, firebase v9

Id: pJ8LykeBDo4

Length: 11min 7sec (667 seconds)

Published: Wed Nov 03 2021