How to Upload and Display Images using Multer in the MERN stack | Upload Images in React JS and Node

hello everyone in this video we will just upload an image using modern stack and display that back okay we will use ratchets node.js database and express.js for this so let's select an image for example I want to upload an image over here I have an imit I just come I will just select this one okay let's upload it yeah that has uploaded but right now I displayed just one of them okay in the database so let's display for example the third one let's save it just come here see we got that okay this image if I want to display the first one save it and we will display that I just displayed one you can use the map function to display all of them okay I just to display in image and if we store that in a mongodb database okay this is the mongodb database let's refresh it see these are those images which I have displayed so let's get started today in this video we will perform these tasks so to upload the image and display that back using Marine stack so let's get started so for the uploading image using reactors Express mongodb and also notice so for that let's first of all create the our app so first of all you should create an app like this okay test one then we should follow these tips for front end up okay so I have already created that just we will go to in the terminal to this folder then write this one okay infinite npm init weight then assign project name then select react framework then select JavaScript after that just move to the folder that you have created here after the try 10 frame install and in frame run due it will run your server so to install the libraries so we will install npm install access okay we will install this axis uh it is used for HTTP request and response and for the server side app to create the server side app so for that first of all just come to this test folder in terminal after that create a folder by the name of server or something else okay then write npm init file so it will just write a create a package whenever you run this command after that install these packages Express which is the framework of node.js mongoose for mongodb course far to access our API in front end nerdman to refresh our server side approximately multi info these are used for file uploading okay to upload images and after that create a file and we will write our code inside that okay like this I have created index.js okay so now let's just come here first of all to the front end to the client side so come to the SRC come to the app.j6 so inside this I will just create um an input field and to take the um a file okay so just to write here and the file type would be filed and also let's create a button okay upload when you will replace this we should call handle upload we should call this function okay and whenever we make changes whenever we select a file so for that let's write unchange event we will call this and we will store the variable the data that we have in this field uh somewhere okay so for that I will create a variable to store the this file in that sit file is equal to use state and here we will just store the file inside this file so for that let's create a function inside this Arrow function and I will just call sit file method and I will assign e.target.files.0 okay assign the zero on the first file that we have to this file uh whenever we click this we should call this function so let's create this function const handle of load is equal to we will get an event and after that let's just cancel DOT log our file okay what we have in our file variable so let's run our front end in backend server so let's run first of all the server side npm start so it will start our server up we are in the server folder right now so let's create take another terminal CD client let's move to the client and write NVM run do so it will run our front-end app so let's move to this path yeah here uh we have this okay uh this is an effort okay in this input field where we can select our a file okay just come here to the document the pictures yeah this is a picture that we have and that has selected let's come to the console what we get whenever we press the upload button see we got this one okay this is a file okay name and these are the properties of that file so now whenever we press the upper load button so we should pass this file to the our API okay to server side and store that in the mongodb database okay for the databe database I have installed this um mongodb compass and I'm using locally that okay I install the community server of that and also I have created a database by the name of imply so now let's come here to the server side app let's close the client up and come to the server app and come to the index.js okay in this this is the boilerplate code that we should write in every app okay uh these are the express Mongoose and cars but these two are for file uploading okay and these are the created in app then I use the cars and the express station which will transfer our data that we are passing from our front end to this server app that will be transferred to the Json format and here we run our server so now we will just write in API to catch our file in that okay so first of all let's write up dot post that is a post method and the route would be like upload a request and you will get request and response so here I will call a middleware for this file uploading okay so first of all we should upload the file and I will call that middleware here so to upload a file so let's come here the right const storage for Safari we will specify where we would like to store storage is equal to multer dot disk storage okay so now let's so here first we will specify the destination and get a request and file and also a callback function so let's call the Callback function uh in this callback where we would like to store our file okay the destination that we want to store our image so we will store our image inside just come here so let's create a new folder inside this uh yeah let's create a new one hey Blick and inside that let's create another folder images so I will store the image inside this images Okay so let's write here the first parameter is the error that we will we don't want to specify that and the second one is the destination we will be protect the store we want to store inside the public slash images yeah we will store our image inside public and images and the second parameter that would be to specify that is the file name okay so to specify the file name okay whenever we want to store our image inside this we will specify and import that okay a unique name for every image you will get request file and also a callback function so let's again call the Callback and in the first one is the error we will not specify that and the second one is that the name that we should specify first list let's check the name that we passed from our front end okay for example let's write this file okay file dot field name okay this field name I will show you the field name okay later okay I will show you what is the field name and plus we will specify we will attach a dash with that and plus date dot now you will specify now method and after that we will just attach the extension with it so for the extension let's write pulse path dot text name extension name and we will pass file dot original name okay it will just attach the extension with that a name and this was the destination and a file name that we attached so now let's create const let's assign a name for example upload is equal to motor and the storage is equal to with the storage okay the storage to the storage we will assign this storage that we have created okay so now let's come here to the back to this upload API so now let's check okay before calling this middleware this one to upload the file we will just check the file okay that we passed from front end so let's write console request dot file so it will just print as the file in the properties of file and just come here to the front end inside it I will just pass now the file let's try to access that post here is the route that we should write the route is the localhost CTP localhost and after that uh this that port number the port number is 3001 and also the route name that is upload okay this one upload and let's specify pass the data how to pass this file okay so fast the data we will assign that to a forum data object form data is equal to new Forum data create this and let's assign to this forum data data paint let's first of all assign the names in the video the name is the file the value is the file that we have okay that variable so now let's pass this form data object in we will get a result console.log result dot cage here was and here so okay so now let's try it okay just come here and let's just choose again that one and let's press the upload button let's check that okay let's come here to the console so we got undependent means we didn't get the file so let's uh just okay we should call it first just come here let's write upload dot here we have different methods but we will use the single one okay we will We would like to pass upload a single file here we should write the name of the field that we have passed from our front-end side okay this file the name of this file so now let's stick it again come here and let's press the upload button here to the terminal see we have these properties okay a destination file name path again we don't have all the properties so let's replace it shows the file D it again press the button and just come here now we have all the properties okay field name this is the field name that we have used before okay I told you before I will show you I'll get the field name this is the field name it will attach file with the date in millisecond and also the extension okay this is the extension the original name it will just extract this png.png from this original name so these are the properties so now let's store these data in database then we will display it okay so to store it in the disability database first of all let's create connection with the database the mongodb database so for that let's write mongos dot connect and here we will pass the connection string so let's come here to the mongod we can pass and just copy this connection string after copying that let's just use it paste it here and here we will specify the database the database let's specify for example imply okay I will specify employee table and here sometime localhost doesn't work so for that I will write the 127.0 this IP address okay on AP IP address this means also localhost after creating the connection with the mongodb so now we need to create a model for our database so to click the model I have already created a model and let's just come here to the models and to the users this is the model okay this is the model for the hour table okay what we want to store in our table we want to store just a name and image I will just remove this name just I would like to store the image in our table so this is the schema and this is the model that we have created this is the user table which it will be created in the mongodb database okay it will be created here later okay whenever we run our up and then we exported it so let's import it in our this server side up so to import it let's write const user model is equal to require total slash users so we have imported user model so now let's create a save our data in our in the user table so for that just come here instead of this we will just write user model dot create and we will pass the the file okay the name is what is the name in the database then here yeah we don't have here just come here the name is image so let's write image is equal to with the request start file with the request dot file and we should assign the file name okay so let's we should assign this name just come here this name okay file name we will store just this file in our database Press Start file dot file name and after that we will get a result and also we should write it in the curly braces you will get a result so let's return that done KH console.log here so it will just store inside that so let's try it okay let's just come here and run our server and let's depreciate and just come here to the front end whenever we upload so we will just cancel the result let's specify just this one and let's upload it see regard this data okay it means we successfully uploaded this one and we returned it okay it means that we have stored our data inside that let's replace our this table so let's appreciate see the user's table has created this collection so let's check it see we have this record inside that so now we want to just pitch this record and display it back on the screen so to pitch it let's write an API for that in our this file index.js of dot git so we will just get so let's write here the route would be like up that git route is git image and here we will let's write current speeding you will get request and response and also let's fix the records from the database so to pitch the records we will use the user model that find I will use find method we have other methods with find but I will use fine to fetch all the records and after that let's I will pitch all the records okay now then we will get the users and result.json return that cage if there was any error result.json we return the error so now let's move to the object G6 and here I will use use effect hook that will render as the first whenever we run our application use effect hook let's write array dependency at the last and just come here and here I will use the access that git instead of this one okay copy that one and instead of that I will use after git and the route is git image yeah the route is the time is okay and let's remove this and we will get the result and let's cancel that before consoling yeah let's first of all cancel that and okay yeah let's check it and let's refresh the application yeah we got this data okay we have just one array it means there is one record with us so now let's store that record inside a variable just come here to the data we have this ID and the image okay so let's store this the data in somewhere in our variable so let's const image shift image is equal to use state and just come here instead of console come here here I will call sit image I will just assign result dot data Dot it is an array type with us so I will just assign 0 it means the first record that image yeah so let's check that yeah result.data that is zero record and take the image install that inside this image okay it means this means that we just switch the first record image okay because that return an array paper with us so we just fix the first record so whenever we store that here so let's print it now just come here and here I will just paint that so let's use image the SRC would be like something like this so let's write the path first of all the part is that for the path we should use this path okay let's copy this paste it here and write public slash images so no we should write something like no we should write localhost we should write this path okay we should get image from server side just come here slash public slash image slash image let's just come here and come to the server app come to the public come to the images parties images slash the image name what is the name of this image so let's copy this dot PNG or V Dot PNG so right now we cannot get the image from our server side so for that let's write something here in the server index searches here I will just try it up dot use Express dot static public okay it means that the public we can access the public directory let's appreciate dot experience start static I think it is okay but why yeah public to come here appreciate we cannot access that so let's just come here here we should remove the state like okay we can access it directly the public diary facing so let's copy now this path and just come here and where we would like to print here just come here and write this path instead of this image we will like to pitch the name from the database let's plus the image okay this variable that we have okay we will print this variable that we pitched from database so let's see it and just come here to the console it compared to the react app and let's depreciate we didn't display the image so let's check where is the error so first of all let's check to print this image is there anything in our image or not so let's just come here instead of UC picked where I wrote that sorry instead of this I have written it here copy this and just come here paste it here yeah result the data yes that was I was written that in the wrong place so let's check it now see we got this image okay that was the image let's upload another one this one okay so date appreciate so if I want to display the second one so just come here and instead of this this just write the first record okay let's appreciate C we got it okay so it was all about fetching uh storing the image in the database and displaying that back using react Chase uh I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 15,862

Keywords: file upload in node js using multer, multiple image upload in react js, image upload in react js, upload image in node js using multer, multiple image upload in node js, how to upload image in react js, uploading images to a node.js backend using multer and express, multer node js file upload in hindi, react image upload, upload image in react js, profile image upload in react js, how to upload images from react app, image upload, file upload

Id: jfZyqZycjmA

Length: 25min 9sec (1509 seconds)

Published: Sun Jun 11 2023