Uploading Multiple Images to Firebase in ReactJS

hi guys how it's going and welcome back to a new video in this video it's about uploading multiple images to firebase using react i did the previous video which was last year um that i show you guys how to upload a single image to firebase uh in react and i've been receiving requests from you guys on how to upload multiple images as well so this is that video and i will show you how to implement the feature using a sync and a weight so without further ado let's now get started all right so this is the code from the previous video as you can see here i will leave a link in the video description to go to the first part of this video also i won't go in detail explaining each line of code as i did in the first one so right here um this is the index.js inside the firebase folder this is the firebase configuration now because this one it's been a year i have already deleted all of the information in the firebase i will now create a new one and then i will replace this for you guys to see as well so now let's come to firebase right here um the console.firebase.com.google.com first create a project and here i can just give my project a name i'll call this as firebase react image uploads with an s because um right here we focus on uploading multiple images click on next enable this continue select the first one default account for file base and create project all right the project is now ready let's click on the continue here we have this created so what are we going to do well we click on this web right here and just give this app a nickname i'll just call this us firebase images uploads like that probably react as well right so this one it asks for the firebase hosting and just leave it like that and click on register app and right here we can just skip this for now and click continue to console okay so here you won't be able to see anything let's just give this a refresh okay so here it is and now let's click on it and click on this setting icon so now this here you can see the project name project id and when you scroll down you can see the app nickname here as well and this is the config file right here that we want okay so now let's just copy everything here just copy that and right here just for now let me just paste it down here because i want to show you something as well so here you can see that we have this is the previous one right we have the api key and everything and now you look for this one here the database url when you scroll around this is the new one so right now we basically when we first created this project you can't see this url at all and that we have to manually edit i will show you how to do that so for the previous one when you create this it will come with this database ul but not anymore so now let me just um quickly copy this one right here and then i will show you how to get the link here so for now let's just get it all of this uh old one right so this is a new one and now let's just come back here and what i'm going to show you which is right here the firebase store database and what we need to do we need to create a new database so here you can see it asks whether it's for the production or for just a testing mode let's just start with this one here so now let's just click on the next button and right here you will need to select one so right now i'm in australia let's just click on this one right here and click on the enable button okay so the database has been created now let's click on the storage and go to the rules tab so here we will need to edit the rules so instead of the request or off equal to this we just want to set this to true okay and now click on the publish okay so now that's done click on the files and here you can see this is the link where you can just copy this right just copy that and now let's go back here this is where we're going to paste it all right so like that so now let's just quickly save it and try to upload it using the previous code which is uploading and allow us to upload only one image so let's just test this out and here you can see we have the choose file and also the upload button now let me just try to choose one which is this image and now just click on the upload button and here you can see the image is actually uploaded and here we also have the link as well so let me just go to this link and you can see the image here okay so now let me just try to refresh this and here it is guys we have the uh folder called images and this is the file itself all right here it is we have size type uh degraded and also the updated right here as well so um what i want to show you now let me just refresh this real quick and choose file again so right here you might be thinking why uh don't i try to just um click multiple file right here right by pressing the control key but it won't allow me to do that even with this one i want to drag and drop but it doesn't work at all so right now i want to show you is to work on the code right here turning this code into allow us to upload multiple images by clicking on the uh upload button only once and it will just upload the images that we selected okay so now let's just come here first thing i want to show you is to the input file looking at the input type right here the type which is far so to select multiple files we just need to use this attribute called multiples let's save that and go back here so you can just close this for now and choose fast now it allow me to select this right by clicking on or pressing on the a control key or i can also drag and drop like that as well so this is the attribute that you will need to change which is up adding the multiple here and also i want to go to the top here and try to change this because um we're going to upload multiple images then just change these two images set images um the url which is uh we will also show a multiple url as well so let's just change that here um down here just to change it to images and the image here we let's just keep it for now for this one uh scroll down let's see what else we need to change set urls images right let's see what else the urls yep with ns just doing that for now let's just save it so the image definitely not defined but that's fine because we will need to do a loop right so looping this when we have multiple images okay so for now let's just add the images here as well but then we will need to change um line 32 right here we need to change this back to just image but for now to get it all the error just do it like that so the next thing here is um to loop through the file right so here when the user click on try to click on the choose file here right and when they select the images so let's say they select these two when we click on the open button right here it will then try to um basically storing the images so at the moment right here we only use the first index which is the first um image but now we need to change this to something else which allow us to select multiple images and storing the information there so we'll need to use the for loop uh let's just do i equal to zero i less than right here um to understand or to know the number of images we can do something like it or target.files not length and i plug plus so right now we can just do it here and grab everything put it in here and then we probably not require using this one let's just do const new image we need to get the uh each image so right here just use the i right so if you have two images then it will just loop through these two time and we get the image put it into this variable called a new image and then down here let's just do i um new image we just want to use the math.random which basically what we want to do here is to generate the random number and put it into this um new property right called id so once we have that next we want to set images uh with the information so this one here this is not required so called images we will need to use the previous state and right here pointing to previous state also with the new image and now let's just save it so what this one does um it will just try to copy the old image and we it will add a new one onto it just like uh copy the old one and add a new one onto it up until at the end of it so say if we have three then uh this will just keep adding the second one and then the third one and we just set it into the images here okay so now let me just show you that uh let's just do the inspection we have the console here so at the moment it just set these two and now we need to also change this to the array as well the url and also with the images okay so now let's just come back here and just choose files let's just say i choose these two open here you guys can see we have the first one and the second one and also the id which you can see here this is the random one that we added using the math.random okay so now we have two of this so that is the function for the handle change now let's just come to this part here okay with the handle upload function well we need to look through this right so it will be images and just let's just use this as image for each image and then we need to put into this and cut everything and place it inside here okay so now we have images and um the moment ago i just uh show you that we will need to use the single one which is the image so this is uh now we need to change this back because we have the images and then we want to look through each one to get into the name and also the image itself and now let's see what else we need to change so this will be just image dot name now we need to turn this code into using the async and await with promises so on top here i'll just um right here out of the loop let's just define this call promises that store us the array type and then um down here let's just do promises or push upload task so we want to push each task into this variable okay and now let's see what else um let's just turn this into a single weight as well so right here this will be a sync and in front of the uh storage we want to use the um a bit keyword so now we have that uh set let's just see what else we have this one here the url so right here this one only uh set uh first image right only one image we will need to also uh change this one here let's just do the one similar to the previous one i showed you the uh previous state and let's just do this we need another bracket so this will be previous state and urls right here we need to also change these two urls okay so then it just add each one to this uh variable and then store it inside this here yep i think um this should be good for this one so this will wait until all of this finished processing and then down here we can just use the promise dot all with the promises that store uh information here right we use that one here and once the promises uh all done successful then we use this then we want to alert this things all images uploaded and here we want to use the catch as well to see if there's an error so here i just want to say console.log with the arrow okay so like that and i want to also let's just say uh each or all of the url i want to console.log that as well so this will be urls all right and next whatever we want to update the code so we have this here so the url this one we need to loop through each one of the url because we want to show this on screen if we want to do it like this we will get an error so let's just do the map uh each url right and also we used to index here as well so i want to let's just do this one here this will be the diff and inside here we want to use the key to get it off the error and the url each url here right so yep let's just save that and for the images let's just test this one first to see if whether it's working okay so um here i can just select two images which is these too and then click the open now to file selected click on the upload button and here we can see that uh all images uploaded you can click on the ok button and then here we can also get the url as well right url of each images but for the image itself it only shows us one because we haven't looked through the images so let's just click on the image here you guys can see this is the first image and this is the second one right so here you guys can see it's working let's just check the database as well and here it is we have the um two images we just uploaded here so now let's just uh come back here and we can also see d uh url which this is the first one and this is d uh when it finish another one and add it to that right so this will be the second one here okay so now we also have this one here and let's just see what else we want to loop which is the images so this will be the images down here let's just turn this one using the array as well so we want to loop the url.map this will be url with the index and we want to cut this part here and put it into here save that the images here we want to use the key property in case um we see an error message so right here and we change this to a single url which will look through each one of this and yep let's just say that should be good to go also i want to set the image width as well because right now the image is too large so let's just do the style with the width let's just say 500 pixel for now all right so now let's select our two files let's just um choose these two images click open uploads and now you guys can see um it is saying that all images uploaded click on the ok button and then we have the image shown here so you can see uh it is working let's just refresh this one as well all right so here we have the images and next what i want to do uh we can yep just turn this into like a link right so when user click on this it will open in a new tab rather than just blank text so up here we can use the um a tech which is right here let's just do a tag cut this with the we use the href so this will loop into each one of the url and also we want to do the target underscore blank so when click on this url then it opened in a new tab yep like that let's try it again so this time i'll choose three images so let's just say yeah these three one two three and uploads okay so image is done click on ok and here we have the links with the images here as well right three images uh the first one let's just do the second one and the third one so let's just check it out here the first images uh first image uh second image and here this is the third image okay so um it is working as you can see we have turned the code here from uploading only just one image to multiple images so now let's just quickly look at this again we just loop through this by using the length here to understand to know how many files have been selected right so we use the length uh we just look through each one of that and put it into this new image and right here we also use the id property which is a new property uh we just add that with the random number so once we have that right here it just copied all one and add a new one each time uh 2d our set image is variable right here which is storing the array um down here the uh up the handle upload so we turn this as well so the image will loop each one of it right so right here we get the image name and also the image itself so down here we push the upload task into the promises storing into this empty array and down here let's see we use the async and also await until all of the tasks are finished then we just set the url which is previous one plus the new one then we set it into this variable called a set url so when all the processes finished are done it worked then we just want to alert this to the user saying all images uploaded otherwise we show an error if in case there's an error happen and this is which is locking to see the images and also the url okay down here we have the uh using the input type so using the uh metaport attribute allow us to select multiple uh images and down here we're just looping through the url each url that we have stored on top here into this variable right here and down here we just loop the images with the set style which is the 500 pixel uh just looping each one of this and we also use the key here as well in case we get the warning message in the console log so yep that's pretty much it guys um i hope you enjoy this video uh let me know as well um whether this is uh really helpful or not because i've been seeing uh like i mentioned i've been seeing um a lot of requests on how to upload or turn this into uploading a multiple image onto the firebase right here right and also want to mention that if the image is basically the same one it won't upload two images it's just only using dr01 and that's all guys if you have any question just let me know also subscribe to the channel and also like this video if you enjoy watching this until then see you guys in the next video you

Channel: Hong Ly

Views: 4,267

Keywords: firebase, firebase storage, react, 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, react tutorial, reactjs tutorial, firebase multiple images

Id: S4zaZvM8IeI

Length: 27min 22sec (1642 seconds)

Published: Sat May 29 2021