Upload Image to Firebase in React Js || Firebase Storage || React Js

hello everyone this will show you how to upload image in Firebase in react.js here I already uploaded two images I'm going to upload that one so click this and I'm going to select yeah this one click upload here images uploaded in Firebase here Moto Firebase and I'm going to refresh this yeah here we got third image I think yeah this one here we got third image okay let's start you want to create a Firebase so go to Firebase and click add project and you can give your five Firebase name project name okay here image upload okay and click continue and I'm going to disable this create create project to take some time to create a Firebase project okay click continue yeah our five base database is created I mean project Okay click web that one and here give a app name nickname okay demo upload and click Register App yeah after that install Firebase in your project in my case I already installed okay I'm going to copy this and go to Project here I already created a DAC project and also I'm running this project I'm going to use this file Firebase image upload and config file inside config file remove paste the Firebase details okay I'm going to remove this commented line and after that I'm going to import Fridays slash storage inside storage kit storage okay Moto copy this after that do export launched you need DB okay it means DB and paste that get storage I'm going to pass app inside this and save this and I'm going to copy this here I'm going to upload that let me import that config file here paste that get DB here from dot slash config after that I'm going to create a button I mean input here type is file and I'm going to create down change here remember pass event after that one state two kitty on change value okay IMG set IMG new state initially it's empty okay to copy this paste it here C dot Target dot files to pass a zeroth index after that I'm going to create a button here this upload button and I'm going to click create round click this is handle click to copy this after that const to create a function from this here yeah I'm going to upload file in my base so I'm going to use ref this is Firebase in build function it is used to create a reference in the Firebase storage here Loop opacity image DB I mean Firebase details you need to pass this inside ref and after that I'm going to create a folder because we created one folder inside folder we uploaded image okay so that here give a folder name here I'm going to give files files okay if slash after that inside folder this file folder we are going to upload a file so we need to generate a file name okay so I'm going to use this uid in my case I already installed so you can also install that I'm going to import that package here here V4 sorry before this one here I'm going to pass that V4 function and go to create const ant here this is EMG ref and after that Auto upload image okay upload bytes it is used to upload image and Firebase here to paste that image ref upload upload by says imported here okay here I'm going to pass this IMG I mean uploaded image come on and save this and go to browser here I'm going to refresh this page now it's first project okay we don't have any project I mean so I need to complete the Firebase setup sorry here click continue to consult here inside build go to storage click get started production mode click next default location click done yeah storage is ready go to rules did and write from Storage so I'm going to change this false to true click publish then only changes will save okay here our channel is ready yeah now into here I want to upload into upload this image and click upload go to Firebase here I'm going to refresh this page in our case we files folder will create here here files folder is created yeah our images this okay images uploaded in the Firebase number two display this image after this okay so we'll do data use effect here into use a list and this is also one of the very simple function it is used to get all image from Firebase here I'm going to pass ref you need to pass the DB credentials here and it is here we are going to get image from files folder Okay so testing files folder here dot then img's yeah I'm going to copy this control this value sorry save this and go to browser right click and inspect go here I mean console here we got object inside object we have item okay we need to copy this imgs dot you have value in item okay items copy this items paste it here Dot for each well inside this and use get download URL I'm going to pass this value I mean this value and Dot then here we got URL we need to set this URL in one state so I'm going to create one state this is an array this is URL this is also URL okay I'm going to copy this here paste that I'm going to pass the URL so before that you need to spread data we are going to push URL one by one in the state save this and auto copy this after that to console the value and yeah go here I'm going to refresh this page here we got image URL inside image URL we have got one image okay we are going to display this image after this so I'm going to close this yeah I'm going to copy this URL after this I'm going to add a break and paste that here dot map here I'm going to pass data valve something okay here I'm going to create one div inside the how to create EMG tag sorry I'm going to do tester see here I'm going to pass this data valve with this also 200 PX after this I'm going to add a break yeah save this yeah here we got a image here I'm going to upload another image but choose this and click upload here I think file uploaded in the Firebase but it's not rendered in the and then okay here we got two images yeah this is recently uploaded image but it is not uploaded here if I refresh here second image will display here because we are not re-rendering image in the upload so we need to add that before that you need to restrict this load because if EMG here I'm going to create type condition inside div replace this value IMG if image should be not equal to null okay save this yeah user is not uploaded any image means we are not going to get a Airbase I mean we are not going to upload if value is present we are going to upload an image okay and inside upload here dot then here value first I console this value okay and I'm going to remove this save this and go to why it's duplicating two time ends we are changed code okay if I refresh it's back to normal okay I want to upload one more image then only this control will trigger okay here I'm going to click upload here we got reference we are going to use this reference okay because we got value in this reference so I'm going to copy this paste it after this to copy this one and change this valve to value and I'm going to pass this F okay sorry this ref not ref and save this go here I'm going to close this I'm going to refresh a value is rendered I'm going to upload one more image okay now we are going to check whether images uploaded I mean uploaded image display after this or not yeah your displaying image here you can successfully displaying image and here we got value inside base here we got four images okay here we got four image one two three and four yeah that's it for this video I think this video will help you bye bye

Channel: Coding Comics

Views: 5,795

Keywords: upload image in firebase storage react js, upload image in firebase react, display image from firebase storage react, upload file to firebase storage react, firebase storage upload image react, upload image to firebase storage reactjs, firebase upload image and get url react, upload image to firebase storage react, upload file in firebase storage react, firebase upload image react, how to store image in firebase react, get file from firebase react, get image from firebase react, js

Id: 5986IgwaVKE

Length: 13min 33sec (813 seconds)

Published: Sat Jun 17 2023