How to upload image in React js Mongo db and node. Display image from Mongo. Convert image to Base64

hello guys welcome back to the debug arena in this video I am going to show you that how you can upload an image from your react application to your mongodb and then fetch it before moving forward I want you to know that there are many ways in which you can store the images to the database but in this video the procedure which I am going to follow is that I will take the image file convert it into the base64 and store that base64 as a string in our mongodb this is not the most efficient way to store the images because it can take a larger amount of memory so if you are working for a bigger project then don't follow this procedure but if you are a beginner then you can follow this because it takes less time and also it is very easy not that much complicated and also if you want to know the most efficient way to store the images into a database then please let me know in comments I will cover that topic in the next video so without any delay let's get started so this is my code currently I am just displaying this message so first thing let me just create the input box yeah okay now I will call here on change function non-change I will call this function convert to base64 yeah let me quickly make this function and I will console this let's see what is the output let me just open the console [Music] Okay so this image and you can see yes I'm gay getting this console [Music] now I have already written the function to convert the uh this image to base64 let me just paste it okay so this is my function to convert this image whatever we get it inside e into a base 60 volt and this will display our base64 let's just check it out whether it is working fine or not I will just refresh this yeah I will choose any file [Music] base and you can see that it is converting the image to base64. this is the thing which I am controlling okay so this is done actually it is very easy now what I will do I will create a state name image [Music] okay and here I will write this image [Music] and here inside SRC what I will do I will just write your image and I will set this image inside this this base64 inside image so in this way we can preview whatever image we are uploading before this we can just write condition that if image is equal equals to this or our images null then we don't have to do anything otherwise we have to show this image [Music] and also I will write here BR tag [Music] now I will upload the image [Music] just downloaded it and you can see base64 generated and also we are getting the preview of the image okay now we are good okay now let's move to our back end so you can see here that this is my previous project only where I have taught you about node.js and mongodb from scratch so if you don't know about the basics of node and mongodb then you can watch that tutorial so you can see that I have imported the express I have imported this Mongoose also this is my URL to connect to Mongoose and this is the code where I am doing the connection and you can see that I have already started the server so now the first thing is to create a new schema let me just create a schema I will name it image details.js this is my previous schema I will copy this paste it here you can see here here I have imported Mongoose this is my schema name which I will change it to image previously it was user schema that's why it should have fname and name email and password now we are creating a schema for only image so I will write your image and give it as string type because we are going to store string here this is my collection name which I will write as image details and I will just paste the name here and here so this will create a new collection in our mongodb so just you can just save this now come here [Music] now we have to import that so we can import require image details [Music] and also we have to import that model also so I will write here images is equals to mongoose dot model and I will write this name image details so if you don't understand these things so you can watch my previous tutorial to understand it better okay now we are done now I will just go to bottom and create a new API so I will write your app Dot so here I will receive you can write here launched [Music] code and we will receive it from our request.body okay done now we have to what we have to do is I will write here images which I have just created Dot create so this is the function provided by mongodb now here I will write images which represent this field we have to store actually it is image so I will just write image and I will pass this base64 here [Music] now I will send your response dot send if this is okay I will send status as op otherwise okay so let's see whether it is working or not let's come to our front end here I will create a button upload image [Music] I will create a function and I will call the file function here okay so this is my fetch function I will just write here okay let me just copy paste that name so we'll write here upload image okay I am passing here base64 and inside this I am passing a image this image is this state now I will receive that as okay so my fetch function is also done you can see here that I have called this API and I am passing this base64 image here and I am controlling this data let me just open the mongodb also to check whether it is working properly or not you can see that this is my mongodb and currently here there is no collection name as image details okay so let me just take you through whatever we have done till now so first I've created this input box [Music] from which we are getting the image and after that we are calling this function which will convert that image into a base64 and we are storing that inside this state name image with the help of this state [Music] we can preview the image which we are uploading after that we have created our schema in which we are only storing image as a string and then we have created an API which is responsible for creating an images collection okay and after that I've created this function name as upload image which will be called when the button is this button is clicked and inside this I have called Fetch function which is calling this API and to this API I am sending this base image so let's see whether it is working or not okay so uh actually I have to call this not here yeah okay I will just come here refresh this let's check it out whether it is working properly or not so here you can see I will select this image open and you can see we are getting preview and when I click on upload I am getting the message that status is okay I'll come here I will refresh this I hope image detail collection should come yeah it is there and you can see that there is data here yeah now I will just click another image here [Music] and you can see the base 64 file has been generated I will click on upload the status is okay I will come here I will refresh this and it should have two data yeah okay so we are successfully uploading the image to our mongodb now we just have to fetch it to our react application so let's just quickly make the API for that also I will write here for this I will be using the mongodb function name as find so what I will do I will just write here images dot find and this will find all we'll just write then data and I will send this data one thing we have to call here await otherwise [Music] some time don't forget to add a bit [Music] we have to change the method here to get now let's see whether we are getting this or not so we can check it on a browser also you just come here right localhost 5000 pages and yes I am getting the data now let's just call it inside our react application so I will come here foreign and I will call [Music] this fetch function I will give you my API name I will change the method to get [Music] I will remove these things now we can remove all these things and we will not just console I will also set it inside the state so I will create a new state here name is all image [Music] I will write here set all image and we will pass our data dot data here okay that's it now just one thing remaining I will call all image here and map over it and inside this I can write this thing image [Music] and I can write data dot image let's see whether it is working or not oh there are tons of error and I'm getting all image.map is not a function so I will come here let's see from here just refresh this okay actually uh we have not we have created this API [Music] to get our images but we have not called it so what I can do I can call use effect here and here I can write like this let's see whether it will work now or not and you can see here that this both these two are the image already uploaded okay let me just design it a little beautiful not much just giving a break here [Music] uh yeah okay so you can see that this both these two are the image which is already uploaded and now I will upload the another image let's see whether it will work or not so you can see I am uploading this and when I will refresh this it should have three images and yes so in this way you can easily upload an image from your react application to mongodb using a base64 now if you want to know that how we can upload an image in the most efficient way then please let me know in comments and I will cover that thing in the next video that's it for this video and if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 20,240

Keywords: How to upload image in react js, 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 reac application, react js, node js, mongo, mern stack, learn mern, upload file in react, upload in react input tag, schema, mongo db, convert image to base 64, file to base 64, how to fetch base64, base 64, image react js, image mongo db, image node js

Id: YH63fnqG7F0

Length: 15min 10sec (910 seconds)

Published: Mon Feb 20 2023