How to upload image in React Node and Mongo db using MULTER | Node JS + MULTER | Upload & Retrieve

hello guys welcome back to the debug arena in the previous video I have shown you that how we can upload an image from a react to our mongodb database and then retrieve it so what we have done is that we have converted our image into a base64 and then stored that base64 in our database and then retrieve it but let me tell you that that was not an efficient way to upload an image because if you have a large amount of image or your image size is Big then it will not only take large amount of memory but also it will take large amount of time to be rendered in our website so in this video I am going to show you the efficient way to store an image into a database that is by using multi so the basic idea behind this is that we will upload an image from our react and then by using Malta in node.js we will store that image into a particular location and it will return as the file name and we will store only that file name into our database so that it will not take a large amount of memory and then at the time of retriving we will only retract the file name and check whether that file name exists in the folder created by Malta so without any delay let's get started so first let me take you through my project structure you can see here this is my backend folder where all my node.js code is located and this is my SRC where all my react code is there I have merged it because I have to store the image from here into one of the folder of SRC inside app.js of SRC currently there is nothing much just a form with one input box which will accept all kind of images and a submit button and inside backend.js I have already imported all the required contents that is Express mongos and also I have done the mongodb connection to our database I have created the schema in which I am going to store the image you can see here this is the schema in which I will store my image and currently I will pass only one data that is image so if you don't know these basic things then you can watch my previous videos in which I have explained everything in depth like how you can connect to mongodb database how you can create a schema and how these things make sense and then you can see here that I have started my server on 5000 and this is a basic get API so let's first start with front end so currently this is the output we are getting that is this input box to choose an image and the submit button but we haven't created any function to perform on this so let's just create that first so I will create one function name as on input change which will be called when user will select any image here so we can call on on change so in this we will get e and as you know whatever image user will select we will get inside e dot Target dot files so let's just control that e dot Target Dot files and to get the first image we have to pass 0 here okay so now let's just store this value inside one state so I will create one state name as image set image is equals to you say and I will store this value inside this image so let's see whether this is working fine or not so I will come here I will open my console yeah I will just clear all the things I will choose one file select this image and you can see I am getting this file name and uh its size and all so it is working totally fine now let's just create a function which will be called on form submit its name will be submit image and it will be called on on submit okay now in this I will pass e so as this is on submit we have to use e dot prevent default to prevent it from reloading okay so this is done okay now here I will create one variable name as form data which will consist all the form data from here let's just create that form data equal to new sum data and now I will append all the form data we have in this case we have only one form data so we will append only one so I will write form data dot append its name will be image and we will pass the value from here so that is also image foreign now the only thing remaining here is to call an axios that will pass this form data to our backend API so now let's just create that API we can come to our backend.js let's just separate this code from other now here the first step is that we have to install the multi so you can search for Malta at Google you will come here and you can run this command to install I have already installed it after installation let's create an API which will accept the file from our front end and its name will be upload image and now we have to come to the documentation of the malta and copy these two lines and paste it in our code so the first line will import the malta to our project and the second line will Define the destination where our images will be uploaded so to upload the image we have to pass here one more argument that is upload dot single as we are uploading the single image we have to pass this and inside this we have to pass the name of the variable which will contain our image that is in our case image so it is referring to this file you can see we have passed here image so it should be image only nothing else let me add response dot send uploaded okay we are done here now let's go to our front end and send request to this API and see what will happen so I will come to app.js I have already created an xcos function so I will call it here okay you can see here this is my access function I am sending a request to this API that is upload image which we have just created and I have used a weight here so I have to use a sync and in this I am passing this form data which we are getting from here and we have to use this header because we are passing the files so we can I can just format it hit on Save also I will import this axios okay so we are done here let's see the output so I will come here refresh this we'll choose one file click on open and now I will click on submit okay let's see in console in console I am getting this null prototype and let's see whether our file has been uploaded or not so here inside uploads folder you can see there is one file which is not an image but at least there is one file which we have uploaded so it has been corrupted so we have to fix this issue for that we have to come to multi documentation so you can come here just scroll a little bit down and copy this thing storage I will come here in our code and paste it here we will remove this here we are creating this variable name as storage which is using a method from a multi name is this storage to Define two things one is destination and one is file name so the destination will accept a function with a three argument that is request a file this will be a file which we are sending in a callback function this callback function will be called after he received the file and this callback function can have two argument too the first one will be regarding the error that if you want to handle error and all so you can do that here but we are passing it null and the second one will be its destination so we are passing the destination as uploads same like destination we can also edit the file name it is because as a user I can upload a single image multiple time so if there will be a multiple image with a single image name then there will be a confusion to avoid that we can create a unique file name by using date dot now so just like destination file name will also accept a function with three argument request file and a callback so in this we are passing this date dot now we can remove all these things okay and also I will remove this thing to create a unique file name now I will create the unique file name by using this unique suffix which will contain the date and time as of now and we will append this by using our original file name that is file dot original name so we are done here save let's see the output so I will come here and I will click on submit I will come here and you can see that our image has been uploaded this is our image at the start of the image this is current date and time and after that this is the original name of our file so in this way we can upload an image using a melter at a particular location now I will just have to upload this image name to our database and then retrieve it so let's do that super fast now to store the image file name to our mongodb we can create a variable name as image name and it will get the name of a image from request dot file Dot file name okay now you can see that I have already created a schema name as image detail and imported it using images so I will just use it here so here I can write try and catch block okay inside try block you can write a weight we'll call images I will just create this in this I will pass image and it will contain this image name okay let me just give you only one e save it save it why I am passing image here because in schema I have defined it as image variable okay so we are done here after this we will just pass here response dot Json status will be okay and here we can pass status will be error okay so we are done here so I will just first show you my mongodb so here there is already one data so I will delete this whole schema now there is no schema name as image details so I will come here I will just click on submit and I will come here you can see the image has been uploaded and let's see whether it has been uploaded to mongodb or not so I will refresh it and you can see there is one schema name as image detail whether it has data or not yes it has the name of the file so we are good till here now let's create an API which will fetch this image and show it in our react website so I will go to our backend code and create a new API its name will be get foreign in this I will write try and catch block inside this I will use my schema which is images Dot find it will find all the data which is present then I will just write call back position here data and I will send this data to our front end using response dot send status will be okay and data will be data otherwise I will handle this error now let's call this API in our front end and show all the uploaded images so I will come here I will create a new function name is get images already created okay so here I am calling this get function and it is calling this API get API get image and I will just console.log this value result okay and also here I will create one variable known as all image comma set all image equal to use your stage and I will store this result of data in that set all image inside result dot data dot data so why I am writing this you will get to know very soon so I will just save this okay we have to call this get image so we have to use here use effect so whenever a page is loaded it will call this so I will just do that so we'll just write get image and I will pass here a empty array so let's see whether it is working fine or not I will come here now I am getting this data in control so here you can see I have console only result but we are getting our main data inside result inside result there is one data and inside that there is another data which have these three images I have already uploaded it so now we just have to map over this to get all three images so let's do this quickly so I have stored all this data inside this all image so I will just map over it I will come here write all image dot map I will write data is equals to I will write your return and inside return I will just pass image SRC is equals to and I will close it inside SRC our data is inside data dot image you can see here that our main image is inside this image variable so you can see that we are not getting this data because we are only getting the name of the images but we haven't specified the location yet also if you are inside the react project now you cannot access the folders outside the SRC directly like you have to install some packages and all so I will show you a better way of doing this here so I will just go to backend folder So currently we are uploading our images in this uploads folder which is inside our backend but we cannot access it so for that we can create a new folder inside this SRC make sure to give it in lower case name as images and we will store all the images inside this image folder so I will access that so I will just delete this and I will access the SRC folder and then inside that I will access the image folder and we will store our images there so I will just hit save there after this you can see currently images have zero image I will come to here I will just edit modify this and we can write it like this Rico wire okay sorry not like this we can write like require and inside this I can write Dot images slash data dot image so as of now I will just comment this so that our website will work let's just add two conditions here so the first one will be if all image is equal equals to null then we will show nothing otherwise we will do all image.map also we can pass null here at both the places so that our map will not run until the data will come and here I will pass height and width okay also I have deleted all the images from this image folder and our mongodb database so that we can upload the fresh images so let me just reload this and you can see here currently there is zero image so let me just upload the image here so I will upload this image click on submit then I will upload this image click on submit and I will upload this image twice and I will just reload this and you can see here that we are getting our uploaded images so let's just upload one more image it will be Premium Photo and when I hit on Save submit you can see that we are getting the images so in this way we can easily upload our images from our react project using multi in node.js to our mongodb database and retrieve it and show it to our react project that's it for this video I hope you have found this video helpful and if you have any doubts you can let me know in comments thank you for watching the video and if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 5,629

Keywords: How to upload image in react js using multer, how to upload file in react js, how to upload image in react to mongo, how to fech data from mongo db, learn mongo db, fetch image, display image from mongo db to react application, react js, node js, mongo, mern stack, learn mern, upload file in react, schema, mongo db, convert image to base 64, file to base 64, how to fetch base64, image react js, image mongo db, image node js, Upload image using multer, multer, node multer

Id: j_EAwG9Rwd4

Length: 18min 31sec (1111 seconds)

Published: Tue Jul 11 2023