How to Get and Store Text and Image in Firebase in React Js || Firebase Database || Firebase Storage

hello everyone this is I'll show you how to save text I mean input value and image in Firebase let's start I'm going to create input and here I'm going to create on change to pass event here this is before that I'm going to create to save the input values here this is txt is imported here okay this is empty strings number duplicate this for one more time this is IMD set IMD okay and I'm going to copy this here I'm going to paste that and here I'm going to pass e Dot Target dot value after that yeah I'm going to create the input this is type as file here I'm going to create on change here go to pass event here and here I'm going to create one function handle upload the pass event here I'm going to copy this function after that I'm going to create that function okay here I'm going to get event here I'm going to control the E Dot Target Dot files with zeroth index save this and to right click and inspect go to console here I'm going to choose this image here we got file value okay no matter connect Firebase into this project Okay so firebase.google.com get started click that button okay here click add project give project name here text image okay this is our project name and click continue and I'm going to disable this Google Now text okay it would take some time to load yeah our project is created Okay click continue here text image project disk I mean database is created I'm going to connect this to web so click this okay and you and nickname txt IMG and click Register App install this npm install Firebase in my case I already installed copy this and install this okay after that I'm going to copy this and yeah want to right click and this is EXT config dot Js here I'm going to paste that after that click continue to console here our databases ready okay here Mundo remove this mounted commands yeah after that I'm going to import get storage from Firebase slash storage and I'm going to duplicate this for one more time this is Sky store here this is Slash fire stop this one okay and this is fine after that I'm going to copy this here const EMG DB okay or yeah it should be the same name it's perfect here I'm going to pass this app and I wanted to duplicate this for one more time this is this is used to store the image okay and this get firestore is used to store Text data and URL okay here this is text DB txt DB and here I'm going to export this imgdb and txt DB yeah this is fine I'm going to copy this and I'm going to import that okay import test that yeah AMG DBS imported if I click this control and click navigate to this config file yeah here we got value in this e dot Target dot files before that I'm going to install this npm uid please install it in my case I already installed after that I'm going to import that V4 yeah this one it is used to generate a random ID uid okay so here turns imgs here left yeah reference imported here yeah if it's Firebase storage in build function here I'm going to pass image DB this reference and after that I'm going to create folder inside the storage before that go to Firebase here inside build click storage click get started and proceed with the production mode like next and done yeah here storage is created here we are going to create one folder its name is IMG s okay MDS and I'm going to pass this V4 okay copy that and paste it here after that here you can give any folder name okay and here I'm going to create upload bytes here I'm going to pass this amgs and this e dot Target dot files we will get first time to control this data yeah amds first I'm going to save this and go here before that go to Firebase here rules change this read write this false into true and only we can read and write okay yeah yeah after you change click publish that I will get saved yeah I'm going to go here to refresh this page here I'm going to click this tools file it will choose this file here we got files and here we got metadata this we got from Firebase okay this imgs this one okay here I'm going to use this reference I mean ref so after that I'm going to use get download URL and I'm going to pass this data dot ref this ref okay after that dot then method here well here in this case we got URL I think okay I'm going to choose this yeah here we got URL and here I'm going to refresh this file here folder is not created why sorry I need to add slash here sorry for that here you need to add slash after that this is file name okay here I'm going to delete this images I'm going to upload again here I'm going to refresh this page I'm going to choose one file I'm going to choose this here we got metadata and this imgs and here we got URL I mean this URL okay here I'm going to click this here we got image URL from Firebase here I'm going to Firebase and here I'm going to refresh this page here we got imgs folder this folder okay inside folder we got yeah we uploaded image yeah this image we uploaded right yeah Moto copy this set image and I'm going to remove this console instead of control I'm going to paste this setting here we got image URL Firebase number two save this extent this image URL in Firebase database okay inside storage we can store only image when we upload image it will return a URL we can store that URL Insider Firebase database okay here into Firebase database here I'm going to click create database here I'm going to proceed with the production mode click next and enable yeah Firebase database is created go to rules you'd write this through and click publish here or things are published and go to data here our Firebase setup is is ready to store data Moto here after that I'm going to create one button and okay here on click handle click server function after that here first I'm going to create collection this is used to create a reference from the Firebase database this is values or this is ref while ref there it is this wild ref after that this is sorry collection of Firebase and build a function it's imported here after that I'm going to pass first I need to import this text DB here okay here I'm going to add this text DB and first I'm going to pass that after that I'm going to create a database this is EXT a okay text Data this is our Firebase database collection name okay after that I'm going to add a Sync here and here await yeah I'm going to add doc it is also a Firebase symbol function it is imported here after that I'm going to pass this Val dress and create the object this is txt valve inside the XT well I'm going to pass this txt after that IMG AMG well okay IMG URL inside imgurl I'm going to pass this URL yeah after that I'm going to add a lot this is data added successfully save this here I'm going to change this PR tag Style yeah this is fine after that here I'm going to add data here I'm going to choose file to choose this one and I'm going to click add here data added successfully here I'm going to check whether I'm going to refresh this here txt DB data is created I mean this collection okay here our collection is created here this is this is our image URL okay here our text I mean this data sorry this data and that is this and this is our URL here I'm going to copy this and paste it here this is what uploaded image okay after that I'm going to render a database I mean data from Firebase to react yes I'm going to get data from Firebase so here I'm going to create const this is get data here here this is async because it's written a promise here I'm going to copy this reference paste it here after that const data DB here away get docs this is I have a simple function it is imported here after that I'm going to pass this data valve console this data TB to right click inspect go to console there I'm going to refresh this sorry I need to call this function in use effect save this file here we got value from 5 Base inside queries sorry snap short inside snapshot we have dogs they're going to use this dogs okay after that I'm going to create one state here this is data data okay set data sorry use State inside it's an empty array you need to copy this here Ubuntu use this data DB I mean this okay inside data DB I'm going to copy this Docs dot map valve side valve go to console this valve and I'm going to give some pal values values okay I'm going to find this I'm going to refresh this page yeah here we get this value here inside document here we got data I mean data we are going to use this okay so here I'm going to remove this console log yeah here I'm going to create a bracket and object illustrate this value dot data I mean data this data okay inside data we have value right this is values yeah map value these are all values and I'm going to pass ID okay CRM to pass Val dot ID I'm going to create const here this is all data and I'm going to copy this set data here after that paste it here and I'm going to pass this all data inside this and yeah I'm going to copy this data here I'm going to map after this paste that map here value inside value created div yeah here before that I'm going to console that this data okay this data and save this go here we got value in the state of yeah we got two values in this data okay loose effect is render again and again we need to stop this so here I'm going to add empty object this only render only once save this and I'm going to refresh this so here we got we are going to map this value here I'm going to add a H1 tag here we got value in this zeroth index IMG and text I'm going to copy this txt value here value I mean this is this value and paste that here I'm going to save this here we got data okay after that I'm going to create IMG yeah I'm going to pass SRC here I'm going to copy this value Dot this IMG URL and here I'm going to give height as 200 PX with this also 200 PX and save this yeah here we got image here I'm going to add it text and demo to choose one more image to choose yeah this one I'm going to add here file is added in the Firebase here I'm going to refresh this page here yeah here we got to uids here we got value inside this here IMG URL is not uploaded why to add again click FY this image URL is empty means because here it may take some time to get URL from Firebase that's why it's take time yeah yeah here we didn't get this decently uploaded data because get data is rendered only once okay so here I'm going to remove this array means okay I'm going to refresh again here we got three data because second value is empty because we are image URL is not uploaded in the Firebase so here I'm going to add again something yeah I'm going to choose this yeah yeah I'm going to click add that successfully here this data is added in the Firebase yeah this is what I try to tell in this video I think this video will help you bye-bye

Channel: Coding Comics

Views: 5,004

Keywords: how to store image and text in firebase react js, upload file to firebase storage react, how to upload image in firebase using react, firebase image upload, upload image to firebase storage react, how to store text in firebase react, how to store data and image in firebase using react js, how to store data in firebase using react js, how to fetch data from firebase in react js, firebase storage react, how to store data in firebase using react, how to get data from firebase in react

Id: PkioTiY3u1A

Length: 23min 11sec (1391 seconds)

Published: Sun Jul 30 2023