Build CRUD App using Firestore in React JS | Image Upload to Firebase | Firebase v9

hello everyone welcome to my youtube channel i know i have taken little bit more time to post video on the topic firebase image upload so finally we have this react firebase cred application along with image upload so in today's video we will be learning to upload image on firebase using storage along with we are also going to implement full correct feature in our react application using firestore database so we will able to perform create read update and delete using file store in this current react application so i hope you are very excited about today's video so before we start working on this application please subscribe this channel to get more awesome project on react care and also please like this video if you find out that content is useful so without wasting any time let's start working on this application so i'm going to jump into my vs code so guys as you can see that i have already created a react project with the command npx create react app and the app name so you can create this project and i have already opened this project in my visual studio code you can see that and in this project we will be using semantic ui so let's install the package related to semantic ui so i'm just going to copy this one so let's copy this one and i'm going to paste it over here and we are also going to install firebase and react router dawg okay so let's install all these packages first and wait for the package installation so guys our all package got installed you can see that so first let's go to the browser and let's say use this one okay this import statement so we need to bring the css file for the semantic ui so let's go to the vs code and in index.js file we have to paste here okay now let's do npm start and let's wait for the application load into the browser so guys we have some issue here you can see that in our terminal after doing npm start and it's mostly happened uh due to this import statement okay related to the semantic ui so the alternate way what we can do here so our alternate approach will be like we can use uh this is stylesheet okay so let's copy this one so either you can comment this import statement or you can remove this one so i'm just going to comment this one and we have already copied this one so let's paste here inside this index.html file let's save this file and guys let's check terminal so we are not facing any issue and let's go to the browser refresh this one so we don't have any issue now in our application and let's verify whether semantic is working or not in our react application so i'm just going to copy this one this piece of code okay so i'm just going to copy this one let's go to the vs code let's go to the app.js file let's bring here that button component and we can just copy this one for now and let's remove all this content let's paste it over here now let's go to the browser so guys you can see that our button component is displaying so that means we have successfully configured semantic ui in our react application so now it's time to configure our firebase so i'm going to firebase console and i'm going to add a project here so let's give a project name here so correct hyphen image let's click on continue let's disable this one we don't need google analytics for our project let's create the project it will take one minute to finish our project creation so our project is created let's click on continue and here we have to select this one web and again we can give the web application our crud image only let's register this application so we got our firebase configuration so let's copy this one entire thing let's create one file under source firebase dot js okay let's paste it over here let's remove this one after that what we have to do so let's click on continue to console and we are going to use firestore database so let's click on that one and here we have to create database we can use your production mode no issue let's click on next let's enable so our firestore database is created you can see that here so now we have to adjust rule here so that we can read and write on this firestore database so here we can do like true okay so let's set to true then we will able to read and write on this firestore database so now i'm going to publish this one now let's go to the storage so we are also going to upload the image so here we have to also change the rule so again we have to set this false to true so let's remove this one and let's click on publish so guys we are done with the firestore setup now let's go to the vs code and first i'm going to create some folder here so i'm going to have one components folder one folder i'm going to have pages and one folder i'm going to have asset okay inside this asset i'm going to put one svg file so this svg file i'm just going to put inside this asset folder now in components we are going to create some file like we are going to have one model component and then we are going to have one nav bar okay and then we are going to have a spinner okay now in pages we are going to have one home.js file and we are going to have add edit user okay dot yes so we will be using the same page for adding a new user or updating the existing user so let's generate a snippet on both file so i'm just going to generate a snippet here and let's generate a snippet over here again now let's go to the app.js file and let's remove this one and let's remove this one as well and let's first configure our react router dom in this application so let's bring here browser router routes and route okay now let's have browser router let's cut this one and inside this i am going to have routes then i am going to have my individual route so here path it will be home page so i'm just going to render your home page and let's copy this one so this will be the ad and we are going to render page here added it user and we are going to have one more route for updating the existing user and we will going to update based on the id and in that case also we are going to render the same page that is added user because we are using the same page for adding the new user or updating the existing user so let's save this file and verify this one first in our browser so home is already rendering you can see that let's verify add this is also rendering and we can also verify this update one with some random id so this is also render so real success so we have successfully configured react router dom in this application now first i'm going to start working on our navbar component so i'm just going to generate a snippet over here and from semantic we have to bring some component so from semantic ui react we need to bring like component menu container button and image okay we also need to bring uh use navigate from our react router dom so let's bring that on as well use navigate and link also required and we have one logo here you can see that in our asset folder so let's bring that one as well i'm just going to bring like logo and let's go to this directory that's it and we have react dot svg first i'm going to store the reference of use navigate into a navigate variable and let's remove this one this tip i'm going to use here menu in that menu i'm going to pass some props borderless inverted and some inline styling like padding i can give here 0.3 ram margin bottom i can give here 20 pixel and one more cross we have to pass here attached inside this menu i'm going to have container then we are going to have menu dot item let's give here name like home i'm going to use your link inside this i'm going to have image so let's use the image component from semantic ui size will be mini and inside source we are going to pass logo in alternate we can pass just logo okay and once you click on this logo so you will basically navigate to the home page only so we can specify a route or so we can specify our home route here after that we are going to have one more menu item and inside that i'm just going to have heading live react firebase corrupt with upload okay with upload image now we are going to have one more menu item so this will be basically having one button to add a new user okay so let's remove extra menu and we have to specify the position here so the position will be the right and inside this i am going to have button add user so size is going to be mini only the button will be the primary we are going to have one on click method and once you click on that add user you will basically navigate towards the add page okay so we have completed this navbar component so let's bring this snapbar component to our app.js file so we can bring it over here now let's go to the browser so we have got our nice navbar here with semantic ui and if you click on this logo you will basically navigate towards the home page and if you click on add user you will navigate to the add edit user page so we have completed our navbar component in this react application now the next thing we are going to work on adding the new user along with the image so first let's configure our firebase here inside this firebase.js file so here first we have to bring get firestore so from firebase we have to go to firestore and we have to bring get firestore okay after that we also need storage here so let's bring that one from storage so we need get storage okay now we have to initialize our firestore db so export cost db equal to get pi store and app and since we are also going to upload the image so we have to also initialize our storage so storage equal to get storage and app so this basic configuration is done in our firebase.js file now let's start working on this added user.js file so first we need to bring some component from our semantic ui so we need component here like button form grid and loader after that we also going to need storage and dv from our firebase file so let's bring that one as well from react we need hook like use state and use effect and from react router dom we need couple of things like use param and use navigate so let's bring those hooks okay now first let's define the initial state so i'm just going to define outside our functional component so we are going to have name email info and contact let's define one state cost data set data and here we can use and we can pass here initial state now we have to define some more state so first we are going to have state for file that we are going to upload that is image file and initially it will be the null then we are going to have one progress so we have to check whether our image is uploaded or not on our firebase so we have to also check the progress of our image upload and this will also enable then we have to also check if we have any kind of error or not in our form field so we are also doing a form validation over here so set errors and this will be also so this will be the empty object we are going to have one more state and here we are checking like if form is submitted or not so we have to also check this one and this will be initially false now after that what we have to do so first i'm going to work on our form component so let's remove this one inside this tip i'm going to have grid and this will be a centered so we are passing this props and we have to pass some more props so it will be vertical align that will be in middle then we can have here columns and then we can have some inline style height we can give 80 vh then we are going to have grid dot row then grid dot column let's give here text line center and let's have here div and we can check here like if each submit is true then basically we have to show a spinner here so we can use your loader okay and that will be active and in line we have to pass so this props we have to pass in order to show the loader and it will be centered size we can give here huge and in else part we are going to have our entire form section so first i am going to give here heading like add user okay and we have to use your fragment so let's use that one otherwise we are going to see error if you don't use this fragment because below this heading we are going to have our form component so form then we are going to have form dot input and we are going to have label so level is equal to name so we have to pass this level inside this form dot input okay so i have just formed this one we can give here placeholder so we can give like enter name we have to give name property as well we are going to have on change method so let's define this handle change outside the return so we can define here handle change we will add the logic later after that we can have value so value will be the name so here we have to restructure our name email info and contact from data so from data we can restructure that name email info and contact and this form input will be the self closing so we can remove this one and it will be auto focus so the first input field will be the autofocus whenever we load this added user page so let's save this file and see whether we are able to see any input field or not so you can see that we got one input field here okay after that what we have to do we can just copy this one and we can paste it over here so we have to just change here label so this time it will be email this will be email name will become email and this will email value and we have to remove the autofocus let's copy this one let's paste two time because we are going to have some more details like info and we are going to use your text area okay we can give your enter info after that we are going to have info and this will be the info and this will be the contact okay so contact level will be the contact enter contact this will be the contact and this will be the contact then we are going to have one more input field for file upload so form dot input and here we can give label upload and type we can give file and on change we have to give here for file so it will be set file and e dot target so we have to so this will receive an event so it will be e.target dot file so we can access our image file on the first index so it will be zero so on this zeroth index we are going to have our entire file okay so that's why i have written here zero and let's define this handle change as well so this gonna receive an event and we can do like set data we can just spread out data and we can do like e dot target dot name e dot target dot value so let's go to the browser first refresh this one and let's type something in each input field so we are able to type and let's try to upload image as well so this is also working now the next thing we are going to basically validate our form component so we have to also do a form validation over here so let's do that one so here in form we have to define handle submit okay so on submit we are going to have handle submit let's define this one and this gonna receive an event so first we will do e dot prevent default and after that we have to define like errors and we have to write one validate function over here which will basically validating whether each input field is empty or not so let's define this validate function now let's define one errors object and we can check here like if name is empty then we can give here like errors dot name equal to name is required likewise we can do for other input field as well i'm just going to copy and paste it over here couple of time so this will become now email so we are also going to check email and this will email now we have info as well let's change the error message with respect to input field and this will be the contact and this will be contact so we have defined our validate function over here so first it's going to validate whether our input field is empty or not so if it's empty so we are going to show this error message and after that what we have to do so here we have to write one logic if object dot keys so if we have any error then simply we can do like return set error and we can just pass this error okay and if everything is fine then we are going to add our user so after this return statement whatever you write below code it won't execute okay so if you don't have any error then we are going to add our new user after that what we have to do so let's add the error property in our each input field as well so we have to pass this error prop and we have to check like errors dot name if we have then show that one so we have to pass here content and inside that content we are going to show that error message and else it will be the null so i'm just going to copy this one and i'm just going to paste over here for email input field and i will just update the property so it will be email and it will be the email same thing i'm going to do for info field as well so it will be info it will be info and same thing it will go for contact as well so let's save this file and verify this one whether it's working or not so let's go to the browser refresh this one and let's just hit submit so we don't have any submit button here so let's add that one so we are going to have one button to submit the form so submit it will be primary type will be submit okay now let's refresh this one and let's click on submit so error message is not displaying after try to submit the form empty so let's see what is going on so here basically we forget to return our errors so let's return error let's save this file and let's go to the browser refresh this one let's click on submit so now you can see that we are getting this error message like name is required email is required info is required contact is required so form validation is completed over here in this application so the next thing we are going to try to upload image before we add a user so first we will try to upload the image on firebase so what we have to do so here we are going to use a one hook use effect and this use effect will run only once the user upload a file okay after that i'm going to define a function here like upload file and here we have to generate a unique file name so we can use here new date dot get time plus file dot name after that we can have our storage reference so here we can use ref from our firebase storage and we can have our storage and here we can give file dot name after that are going to have here upload task equal to upload byte resume so we have to use this one from our firebase storage and here we have to pass the storage ref and file okay after that we are going to use this upload task and we are going to use the on method inside that first we are going to have status changed and then we are going to have a callback function so we are going to use your snapshot and we have to check the image upload progress the const progress equal to snapshot dot by transferred so basically we are calculating the progress of image upload and here it will be total byte into into 100 okay after that we can set the progress okay and here we can use switch case basically to track the image upload okay so here we can use snapshot dot state and we can have a state like pause so we can give some console log here like upload is pause so basically here we are tracking our image upload and we can give here break and we can have one default first and it's gonna having just simply break let's format this one we are going to have one more k and that will be for harani and we can just copy this one you can just paste it over here and here we can give like upload is running okay after that what we have to do so in the third argument we can check if any kind of error we have or not so we can just do a console log here if you have any kind of error while uploading the image okay after that we are going to have one function here we can use get download url and we can use upload task dot snapshot dot reference then we have to resolve this one so download url and here we can set data so basically we are going to update our state so pbs so we are spreading out our all state property and we are just going to append our image file here so we will get this download url and that url we are going to store in our firestore database after that we have to check like if we have the file then we have to execute this upload file function now we have to use this progress state on this button okay so this submit button will be disabled if our image upload process is in progress so if it's in progress then it will be disabled so here we can check like progress not equal to none and if it's less than 100 that means our image upload process is in progress in that case submit button will be the disabled so once the url get generated then only we are allowed to submit the form so then only it will able to store in firestore database so we have to wait till the 100 so once it reached towards the 100 then we will get the downloaded url and then only we can able to store that download url in our firestore database so we can verify this one whether we are able to upload image or not on our firestore database so refresh this one and let's also open a console here and i'm going to upload image so we are getting this error okay so to fix this issue you have to go to this google console cloud and you have to search your project so we have created a project with crud hyphen image so here we can search that project so we got this project okay after that you have to go to this cloud storage okay and here what you have to do so here i am going to select this one okay and then here we have to add a principle and you have to add this principle so you have to add only this thing if you are facing any issue to add a image and you have to select a role here so you have to select your cloud storage and here you have to select storage admin and let's save this one and let's first refresh this one and we are getting some warning as well in our console so we will fix this warning later so first let's upload image here so you can see that upload is running let's verify this one whether our image is successfully uploaded or not on our firestore database so let's go to the storage and here you can see that our image successfully uploaded on our firestore database so this part is completed over here so now we are going to add the user information along with this image in this firestore database okay so at the moment we don't have any collection here so we will create collection so let's go to the vs port first so now we have to add the user information along with the image so what we have to do so in handle submit we have to write a logic to add the user information with the image upload so first here we can do like set each submit to true okay after that we have to convert this handle submit function to async okay now we can use here a wait we have to bring add dock from firebase then we have to bring collection again from our firebase firestore so it's import automatically now here we have to pass db and here we can mention our the collection name so we are going to create a collection with the name users and after that we have to pass an object inside that i'm just going to spread out our data then i'm going to add one property here timestamp so we can add timestamp like at which time we are creating this particular user data so here we can use server timestamp okay and after that we wanted to basically navigate towards the home page so i think we have bring use navigate or not so we have bring the use navigate but we haven't stored the reference of use navigate in the navigate variables so i am storing the reference of use navigate into this navigate variable and here i can use so after creating a user we wanted to basically navigate towards the home page okay so let's do that one so let's save this file and let's check whether we are able to add user information or not so let refresh this one so we are getting a error message here like db is not defined so i think we haven't bring the db from this firebase.js file so let's bring that one so let's bring that db let's save this file let's go to the browser now let's refresh this one again so i'm just going to add one user information so this will be john john gmail.com some random information let's keep contact and let's select a user image so i'm going to select first image let's wait for some time now let's click on submit so our form is submitting now after successful form submission we are navigating towards the home page that means we have successfully submitted our user information to the firestore database so we can verify this one so let's refresh this one so now you can see that we have got one collection and inside that we have a contact email and we have got one image url okay we got in for name and timestamp so that means we have successfully able to store our user information in a firestore database so the next thing we are going to basically work on this home page so whatever the data we have inside our firestore db we are going to display in a cart component so let's work on this home page where we are going to list out different different user that we are going to have in our firestore database so now we are going to work on this home page where we are going to list out different different users in a cart component with the help of semantic ui from our firestore database so from react first we need use effect and use state and from firebase we also need db okay and some component we have to bring from our semantic ui so the component we need like button card grid okay container and image we also need here use navigate from react router dom okay after that after that let's define some state so we are going to have users which will basically hold all the users that we have in our firestore database initially it will be empty array we are going to have one loading set loading use state and it will be false okay and let's also store reference of use navigate into a navigate variable now i am going to run a use effect so whenever our app load so we wanted to display all the users that we have in our firestore database so here first i'm just going to do set loading to true then i'm going to have one function here then i'm going to write a firebase query so it will be like snapshot it will be like on snapshot so we have to bring from our firestore and here we have to pass collection and inside that we are going to pass db and the collection name so we have the collection name users after that we are going to have one callback so we are going to have a snapshot and let's define here one empty list array then snapshot docs and we are going to run a for each loop here on each document and here i'm just going to push all the document into this list empty array we are going to have id and rest of the doc okay so talk dot data because id will be not there in the faster database if you if you can see that here so id property is not here okay so we are just adding the id property and appending the rest of the data that we have in our file store db okay so this is our entire document data and on top of that we are adding this id okay i hope you are getting this after that we are going to set our users so we can just pass here list and set loading will be false okay and let's also handle error if we have any kind of error so i'm just going to do a console log okay let's forward this one and after this so this is our use effect so we are going to have an empty array dependency and we have to also unsubscribe this one once the component get unmount so we have to do this one so unsubscribe so we have completed this basic logic now what we have to do so you have to work on this return part where we are going to show a different different user that we have in our firestore database in a cart component i'm going to use here container from semantic ui we are going to have card group then we are going to have grid in which i am going to pass columns 3 and stackable we have to pass this prop then we are going to have different different user then i am going to map our users okay users dot map and inside that again i'm going to use grid dot column and then i'm going to use here card okay so first i am going to provide a key here item dot id then i'm going to have card content in which i am going to have image so i am using cementite ui image component here and we can pass source here item dot image size will be medium so image size i am keeping here medium and i am just going to add some inline styling here so i am going to give height 150 pixel and width also it will be 150 pixel and the image will be the rounded so i'm going to give your border radius 50 okay so for now we can verify this one whether our image is displaying or not so let's go to the browser so you can see that we have got our image okay now we have to add rest of the details so after this we are going to have our card header not height card headers and here i am just going to show the name item.name and i'm going to provide some line styling with some margin top so it will be 10 pixel let's format this one after this i am going to have description so card dot description and here i am going to have item dot info then our card content will close here and we are going to have one more card content and here i'm going to provide a props called extra then i'm going to have div and inside this div i'm going to have button so it will be update and color we can give here green and on click so we can provide an on click method and if we click on update so basically we wanted to navigate towards our update page so we are using the same page for updating the existing user as well so here we can keep the route so route is already registered on our app.js file so this is our route update with id okay now let's format this one for now and i'm just going to copy this one because we are going to have one view button as well so this will be view and we will define on click method later and the color will be purple okay so let's save this one and let's go to the browser so the width of card is not looking good so i think we have some styling issue over here so we can remove this one columns okay and let's go to the browser so now we are getting the proper card component with the user information so we have two button update and view so if you click on update you will navigate towards the update page so you can see that we are able to navigate towards that same add user page so we are going to use the same page for updating the user as well okay so the next thing we are going to update a existing user so in order to update a existing user so first we have to populate the existing value into each respective input field okay so we are going to update an existing user that we have in our fire store database so let's go to the vs code so now we are going to update an existing user that we have in our firestore database so let's go to this added user.js file so first we have to populate the value into each respective input field that we have in our file store database so we are going to populate the value into each respective input field with the help of id so you can see that we have an id here okay so we are going to use this id to get the specific user data so first what we can do here so we have already bring the use params from our react router dom so first we can destructure the id now we have got our id okay so first we are going to write a use effect so this huge effect will only run once we have the id so i'm going to add a id dependency over here and here we can check if we have the id then we are going to execute one function that is get single user which yet to define so i am going to define this function so cost get single user and this will be async so we need that document reference so cost document reference we can bring this doc from our file store here we can pass db collection name and id now we need snapshot of that particular document so here we can use a weight and here we are going to use get dog which we are going to use from our fire store so you can see that so you can see that we are bringing all this helper method from our firestore so here we can use get doc and we can pass the document reference and we can check here like if snapshot dot exist that means if we have that particular document with that id then we are just going to do like set data and we can just spread out snapshot dot data so first let's save this file and verify whether we are able to populate the value into each respective input field or not so we have some issue so it will be id let's go to the browser so now you can see that we are able to populate the existing value into its respective input field so let's do this from scratch so i'm going to home page and i'm just going to refresh this application first let's click on update so now you can see that we are able to populate this existing value for each respective input field now after that what we have to do so we have to basically update this data okay so few thing we have to adjust before we perform the update operation so we have to change this title so this time we are basically updating the user okay so we can check like if we have the id that means user is updating the existing user details so it will be update user or else it will be the add user okay let's save this one and let's go to the browser now title is got updated and here in our handle submit we have to change the logic okay so now if we don't have the id that means user is adding a new user information in our firestore in our firestore database okay we can just cut this out and we can paste it over here and in else condition we are going to update the user information so here we can use try catch block in case of error so first i'm going to add try catch block here and i'm going to put all this inside try and i'm going to define cache and we can just do a console log okay let's format this one and for update i'm just going to first copy this one and here it will be update doc we have to specify db collection name along with we have to also pass this time id okay and the rest of the thing will stay as it is and after successful submission we wanted to navigate towards the home page so it doesn't matter whether we are adding new user or updating existing user in both case we wanted to navigate towards the home page let's save this file and let's verify this one whether it's working or not so let's refresh this one let's give here johnny depp so we are having some invalid collection reference okay so let's go to this edit user so here we have to specify doc okay not collection so that was the issue so let's save this file and let's try to update again this record let's keep johnny depp let's click on submit now this time we are successfully able to update the user information and we have got one warning here so let's fix this one let's go to this home.js file and we can specify key here okay let's see whether it's working or not refresh this one so that would be gone so we have completed two operations till now adding the new user or updating the existing user so the next thing we are going to work on this view functionality so if you click on view a model will pop up in which we are going to show additional information like name email information and contact along with the image as well and from model component we are also going to perform the delete operation so let's work on this model component first so let's go to the vs code and here we have model component so first let's generate a snippet so in this component we have to bring some semantic ui component like button model okay so from semantic ui react we need model header image button okay and this model component is going to receive bunch of props so it's going to receive open set open image name info email contact id and handle delete now after that what we have to do so we can remove this div and in model we can pass on close so set open we are receiving this props from our home component on open we can have the same set open but this time it will be true and we are going to have one more props so that will be open inside this model we are going to have model dot header it will be having just heading like user detail then we are going to have model content i am going to pass a prop here image and here i'm going to use image size will be medium source let's pass here image that we are receiving from our parent component wrapped let's format this one now after that we are going to have model description okay inside we are going to have header header will have the name okay then we are going to have other detail in a p tag only so it will be having email and we are going to have info and contact okay after that we are going to have model action which contain two button cancel and delete so let's copy the button component from here only and i'm going to use it here okay so color will be the black and this is the cancel button so we can just do like set open to false okay now we are going to have delete button so i'm just going to copy this one paste it over here so let's remove all these props here we have to specify content it will be delete label position it will be right on click so we are going to have our handle delete in which we are going to pass id this is delete color we have to specify it is red okay and since we have already specified the content so we can remove this one and we can just mark it close here okay and we can remove this one as well let's format this one so we are done with our model component now we have to use this model component in our home.js file so once you click on view so what we have to do so this is our view so we are going to have one click method and i am going to pass here one method handle model which yet to define and inside that i am going to pass the item so this item will be a object which will contain name email contact info and image so those detail we are going to display in the model component so that's why i am passing the item here so let's define the handle model and here we have to define one state so couple of states we have to define first so the first state we are going to have open then set open and initially it will be false then we are going to have user and set user so basically we are restoring the single user information that we are going to display in our model component now after that what we have to do so this is our handle model so inside that we can use set open and it will become true and we have to use like set user and inside that we are going to pass the item that we are receiving from here okay you can see that we are passing the item so this is the object which contain name email info contact and image let's save this one and we have to use this model so once user click on view button so we have to open the model so we can open the model here only so below this button we can check if it if open is true that means we have to open a model so let's bring this model component so vs code automatically import this component for me and here we have to pass props set open also we have to pass and handle delete also we have to pass for now let's just do a console log okay otherwise we will get error and we have to pass the rest of the user so i'm just going to spread out so that it will receive like in this format okay image name info email contact ideo so let's save this file and let's go to the browser and verify this one whether it's working or not let's click on view now you can see that we have got our model component with some additional user detail like info and contact so on card we are just showing only name and email but our button is not displaying this delete button so let's go to the model component and here we have done some mistake i guess so here we have to add icon okay then only it will display so icon you can give check mark let's save this one and verify this one so now you can see that we have got our delete button and if you click on cancel the model will get close if you click on view model will open so the last functionality we are going to work on this application that is deleting this user so let's add one more user james james at the rate gmail.com let's give some random information here so i am adding some random information let's add some contact let's add one image let's click on submit so we are having some issue so to address this problem what we can do so here we can use here like columns three only okay now let's go to the browser so now you can see that we have got this card component and if you add one more user so like if you are adding one user let's click on submit now you can see that the width of card is getting adjusted after adding a new user now the next thing we are going to work on the delete operation so if user click on this view button so from here user can delete this particular user detail so let's go to the vs code so in order to delete we have to specify handle delete function so let's define this one and we have to pass the id and we are going to define the handle delete outside the return handle delete and this will be async and initially i wanted to show a window pop-up confirm to user so we can give message like are you sure to delete that user and if user click ok then we can delete that particular user so i'm going to write logic inside try cache so first i wanted to close model then we can avoid delete dock so we have bring this one from firestore and here we have to provide doc so basically which document we wanted to delete we can pass db collection name and id after that we have to also delete from our front end as well so we can do like set users users dot filter and we can just write simple logic so if id is not match then we have to keep all those user on our home page and we have to remove that user that we have selected for delete and you can write here cache console.log error okay now let's perform the delete operation so let's go to the browser and we are not getting id here so id is not defined so id we are seeing here not define so here we can just write handle delete okay refresh this one let's click on view let's try to delete this one we got window pop-up confirm so if you click ok the record will get deleted so you can see that from our front end got deleted we can also verify in our file db so you can see that here also we have only two document and the size of card component is not looking good because this card component will only adjust once we add a user so to fix this problem we can try one more thing so here uh we can remove this card group okay so let's remove this one let's save this file and let's go to the browser so now you can see that it's looking good and let's add one more user so let's see like check check let's give some test here some contact let's add image now this time we are able to display the card component with the equal dimension so we have avoided the auto adjustment of our card so we have fixed this issue now let's fix some small issue that we have in this current application so if you click on view background become completely black so to address this problem what we can do so we can target one class name in our induct.css file so you can basically adjust the background color by targeting this class name okay now refresh this one now you can see that we have avoided the complete background black we have defined this loading state but we haven't used this one so here we have defined one component the spinner.js so we can define our loader and inside this spinner i'm going to bring loader component from our semantic ui react and we can use here fragment and we can just add this loader component so let's save this file and let's go to this home.js and below this use effect we can check if we have the loading state then we can return our spinner so let's save this file let's go to the browser refresh this one so now you can see that we have got our loader and we have some more issue in this application so so let's open console if we have any issue or not so look like we don't have any issue so here we have some issue which look like warning only so we can modify this one so let's go to this added user.js file and this will be placeholder so so it will be small only i'm going to i'm going to replace everywhere so let's save this one let's go to the browser let's try this one so now we don't have any issue here also we don't have any issue so guys we have successfully able to build this react firestore crud application along with the image upload and i hope you have learned some important concept related to firebase and firestore in today's video so that's it from this video thank you so much guys for watching this video i will see you in next video till then good bye and take care

Channel: CodeWithVishal

Views: 15,537

Keywords: image upload in react js firebase, firebase storage react, upload image react js, firebase image upload react, firebase storage tutorial, firebase crud react js, crud firebase react, react js crud firebase, firebase store images, firebase tutorial, firebase image upload, firebase database, firestore react, firestore crud react, crud firestore react, CRUD App using Firestore in React JS, image upload firebase

Id: AUubLH88HBM

Length: 86min 53sec (5213 seconds)

Published: Sat Apr 16 2022