Uploading Images to Firebase Storage in ReactJS

hi guys welcome back to a new video in this video I'll show you how to use firebase to store files or images from react application we're gonna upload the image through react and as you might probably know that firebase is created by Google and now let have a quick look here and before we getting into the development alright so here we can see that it's basically the back by Google and trusted by top apps and it's Biondi Google infrastructure scale automatically and here they are more benefit like build better apps with all of these features and improve air quality as well they have like crashlytics so basically they can fix the issue the powerful and a real life across a reporting so say if we have an error or issues then we know what it's coming from or what causes the issues and here grow business all of this there's a lot more here we just quickly look into basically like what firebase really is all right so now we already look into that and what's the first step we going to do right now is to basically go through the consult so the link is here firebase tart Google calm now just go to the console so now what we are going to do is to create a new projects because we will be using the new projects that we're going to build and upload the file to this particular project so now I can just click on this create new projects and then we can just give it a name so in this case I just want to call my projects as firebase react upload just like that and then click continue and here whether we want to antibody Google on a stick for this projects just do that and then click continue and here is the account so we can just use the default count and then here click Rd create projects and this might take a few seconds now let's have a quick look here so we will be using this library the firebase basically the NPM and you can see how popular that is we will use this in our react application because it's all come with the built in functions that we can just use it straight away and also here this is the react app right now there's nothing at all it just says like say hi so here this is just a very simple one and now let's just go back and see how it's done alright so the project is now ready and then click continue so here we are now inside the our projects the newly created one and what we need to do right now so you can see that they have like all of these introductions to all different kind of the functions and what we need to do to basically click on this web so once we click on the web because we are using react or it can be like Java scripts basically like web app so right now we just need to view our app a nickname so here I just want to call my apps react firebase file upload just click on that and then we don't need to have the firebase hosting so just click on this register app and it may take a little bit all right so we all now have all of this information and click on T new to the consult now we can just click on this button and click on the setting so we cannot just scroll down a little bit and here we can just click on this conflict so we will be using this information to put it inside our react app occations so before getting into that I want to install this library so we just need to copy this command copy that and in size react I just terminate this verse and just copy that to install the firebase library so we can have a quick look here we will need to create like a new file inside will be an app and put this information the config information inside will react so that its be able to connect to the firebase to upload a file to alright so now let's just wait a little bit until this finish and see you guys in a minute alright so this has been installed and if you noticed that this is basically from the previous projects and that's just need to change this react firebase file upload and replace it with this one as well alright so now that's done we just need to start our react alright cool so now everything all set up we have the library installed and now what we're going to do is to basically create a new folder called firebase we're going to store the config file inside this folder and now let me create a new file inside the folder called index j s and here we have a new file and I need to put the information inside this and first of all we need to import the firebase library inside this file here so I can just import the firebase from firebase plus app and here we import this file so once we have this you port we just need to go to this console and you can see that there's a config file here we need to copy this information so ctrl C and then I paste it here so let me save the file and here we go we have the file based config now let have a quick look inside this here we can see that we can basically use the the firebase in this slice app just copy that and then down here we can just we don't need the front bit here just need in this slice app and then inside this we need to copy the file back on freak and put it inside here so that firebase can initialize this config apps now so now the next step here is to import the storage so I'm going to type out this a little bit and see you guys in a few seconds right here we go I import the file by storage so we just put it inside a constants and says firebase not storage so once we have that we can just export this file our storage and also the firebase r34 so that we can use this file inside our the index reactor right here so we then we need to import it here right here just import the storage we just created from that file and here we just call it from the firebase folder and then that's it and before getting into all of the next steps I just want to show quickly on the consult so now when we go to the storage we will need to basically change the config file so here when we click on the get started we can see that it says let's secure roof or the cloud storage so by default it says like request it is not also indicated it's not equal to null basically it's just checked whether the incoming request is authenticated or not if not then there will be we unable to upload a file to this page so we need to click on the next and then you can now choose basically a location so right here I have mine set in the Australia so I just click on done and then we just need to change the authentication feature right there to something else so now let's just wait this to finish first all right so now the rule have been set up now just click on this tab the rules tab and we are now able to edit the rules so here if we just set this to true and then we can just publish this so right now we are able to push the request from the react and here I'm going to type a few coat and and we'll be back alright so here we can see that I just created a new import and the type is file basically we can just choose any file from this importer and I create a new function as well call react change and in this I just put like an if condition say if there's basically a file inside is here and Eid or target basically like if there's an event or if there's a father we choose from the input then we will just need to choose the default one which is the dot files they be the index of zero and if they are the file then we can just do something inside this if parameter and also I create like a function here as well with the button the function called handle upload so once we have the file inside this and it's going to store it inside this variable and I use the you state equal to now basically by default the file parameter that store into this here it's the value is not and if you have something then we store it inside this file and now let have a look on the front end and I also create this hi all's well so it's just here we go it refresh and now we can just choose far from this input alright so now I can just click on the choose file and then I can select the image that I want to test and in this case you choose one and you can see that we have the file name and the extension here but there's nothing to do right now because we haven't implement our the feature or the functions on this a patent so right here if there is a file inside this here so I'm going to set this inside the set image so this should be this one here just copy that and now let has to see if there is basically a file inside the set image such as console.log and image and inside that I just call the image which is basically coming from here to see if there's a file inside that and I need to do the inspections so here we go and right here the consult so right now by default it said this asana and I need to choose the file and this is to react and here we go we can see that actually right now it's storing inside this the file here so this is the file type and this is the name and all of this so we have that store inside that's this variable right now so that's good and now what the next step is to work on this handle upload so I'm going to write a few code right here and see you guys alright so here you can see that I have created like the storage so basically coming from this above here the firebase and dot ref so we need to give like a reference so inside the reference what I did is to basically create like a new folder inside the firebase and we will see that inside the consult so I'm just in images slash the image dot name so if you go here and then let's try to import in me here so file right here we can see that the fast basically like the image dot we can just put like a name or door like the date or there are a few detail right here so that's how we get that the image don't name and once we have this we just need to do the function here dot put so dot put here for firebase it's like we are going to upload the image to the firebase and this is the actual file the image itself so once we have all the information we stored inside the upload task and the upload tasks we have like a new function down on and here we this is not what we're going to just put like a static data or something this is a mass that we need to put that it's called state underscore changed and once we have that we need to basically provide these three parameters three functions so here we have these basically be snapshot with this arrow function so this basically indicate the current progress of the file upload so what is the current progress of that and if there's an error then this is the second one we just need to provide that and to see if there's an error then we can see it on this console otherwise if it's successful then we just need to have this function here so it can be restore äj-- don't ref and then we just refer that the reference here to this one basically that's the one and inside this here we have like a child that can be called image name and once that's done we can just get the download URL basically we can have the UL of that file that we upload to firebase and then we can basically use that to console the URL on this here so um when I save that and try to upload an image to this firebase then let's see if we get the successor or not so just choose that image this is the far behalf and then click on the upload button alright so you can see that right now I just console the UL of that image so I can basically click on this as well so see if it's actually uploaded to the firebase storage so yeah now looks good to me and I need to just go here and then click on the storage to make sure that the file is storing inside this a project alright so here inside the image choose and it should be this file right here alright so here this is the file I can also click on that and to see the size of the file the type and the name and this is the date and credit and all of this information and this is the file location as well so here we go you can see that and all the file here is successfully upload right now alright so here the next step I'm going to also indicate or show you how to store this inside D right basically storing this inside web or rather than just like show it inside a consult so here just for like URL said URL and this is new state the US should be string so once I have that I can just set the URL inside this URL I can just delete this now and I want to actually show the URL of that image underneath here so this call URL so this one come from this variable and now let's see again all right so now let me try to upload another file and this would be the one and then click on the upload button you can see that instead of showing inside the console then we have this here so I can just copy and click on this and it will show this far directly so on the next step I want to create like a progress bar up here so to see the current progress of the file uploading all right so I have created this one here the world war ii saw the current progress and by default i said this as 0 which indicate that the current progress is in the zero-percent and here inside the first one here the snapshot so i basically did right here is to the snapshot dot bike transfer basically the file that is being transferred to firebase the last or this one here is divided by the snapshots the total byte of the file size and then which is multiplied by a hundred once we have that we just need to put the math dot round so we round this into the percentage and once we get that we just need to store that inside one verbal call in this case progress and I said this progress inside this variable which is the same as that and once I have it I just use this firewall wherever I want which in this case I just use the progress tact or the value coming from that and right here the maximums is a 100 so now let's have a look on the front end we see that this is the current the progress bar and now let's just try to upload one file and I just want to upload this file here so click on this upload button you can see that the current progress is basically showing right here this successfully uploaded with a hundred percents there and this is the image itself and this is the link so now let her cool off let's just refresh this again to see the file that being uploaded all right so now the file have all been uploaded and this is the three file with all of these informations and what the next step I want to do just a quick one right here I just want to let me refresh this for now instead of just seeing this broken link the broken image small icon here I can just use like a placeholder as well so inside here I just need to type this placeholder image alright so here is VRD placeholder calm and this is the image size that I specified so 300 times 300 or we can just change to whatever number that we want let's say in this case are 300 times 400 stuff like this and then now we can just see it here and look this is how it is and it's powered by HTML that come so right now just just choose this value and we're going to try to upload the file one last time all right so in this case I just choose the middle one or it can be like the last one here and click on this upload and notice the progress part of that all right so it's very quick it's being uploaded and right here this is again the file I can just click on this to open in a new tab as well and we can see that this image is a related to drag-and-drop files and if you remember this is one of my previous tutorial and we can also use that basically to implement anxiety's react as well so instead of see a button like choose file then with the previous video the tutorial here we can just open the file dialog which is the pop-up or there's an option which we can just drag and drop the image or the file to these locations and let me know if you want to see me implement this feature using the drag and drop here it's called a drop zone a react Rob's own and if you want to see then let me know I'll try to create a new video or tutorial based on your request and that's basically it for this tutorial I think you basically learn something from how to upload the image from react to firebase with all of this information that we look into and that's it for this tutorial see you guys in the next video [Music]

Channel: Hong Ly

Views: 40,839

Rating: 4.9224138 out of 5

Keywords: firebase, firebase storage, firebase tutorial, firebase react, firebase react tutorial, firebase react js, firebase react js tutorial, firebase storage react, firebase storage reactjs, firebase image upload react, firebase image upload, firebase image upload web, react firebase image upload, react firebase upload image, react firebase storage upload, firebase storage image, firebase storage image upload, firebase storage image url, react tutorial, reactjs tutorial

Id: 8r1Pb6Ja90o

Length: 23min 36sec (1416 seconds)

Published: Sat Mar 14 2020