Store Image in Base64 in MongoDB Using MERN Stack

hey everyone and welcome back to daily tuition in this video we're going to talk about how we can store the image in the mongodb database in base64 format so what if you are creating an application that requires user to upload their profile picture and you don't allow to use storage engine in that case you have to convert your image into base 64 format and store that in the database to learn how to do it you need to watch this video very carefully we are going to convert the image into base 64 format and then store it in the mongodb database so I'm going to first open the visual studio code and here I already have a backend server inside this backend server I'm just going to install a few libraries so if I open the package.json file you can notice here I have few packages here Express Mongols and nodemon I'm using Express to create a backend server using Mongols to create a database and using nodemon to restart the server every time when you make the changes and then we are using here mongodb memory Server create a mongodb connection so we can easily create a mongodb database and store data inside it so instead of creating the atlas server we are using this in memory mongodb server just for that if I back to the server.js then you will notice here here we have a simple express application we just created the app we have a simple get request on the road route and just return a response with Home Route and then I'm using here a connect method connect with a database so when we have the valid connection to the database only then we are going to start this server otherwise we are going to return this error message and inside the data service folder right here we have the connection.js file I'm using the in memory memory database to create a mongodb connection and using mongos.connect we create a mongodb database so once we have the mongodb database we can store the image inside it so I'm just going to call this connect right inside the server you will notice and then start the development server so if I open the server and say npm start then you will notice here this will start the development server on the localhost 8080 so it will first find mongodb successfully connected and will have this mongodb URL and then we are going to have this server connected console message I'm going to first create a schema to store the image inside the mongodb database so we need to specify the structure of us to the document and then we are going to create a new collection inside these database so inside This Server here I'm going to create a new folder model and inside this model I'm going to create a new file with the name post dot model dot JS and inside this file I'm going to say import mongos from the Mongoose library and then we say here constant post EMA is equal to Mongoose dot schema and we're going to create a new field here my file and this is a type of string so we're simply going to pass here string now we just have only one fill inside this mongodb document if you want you can add more than one that's upon you this or that we say here export default and say here Mongoose dot model and inside this module you specify name to your mongodb collection we simply space over here post and then specify structure of it so we pass here this post Hema variable like this and if we already have the existing collection we can return that so you can see here Mongoose dot modules Dot post so if we only have the post collection inside the mongodb database then return that otherwise create a new one and return from this but let me save this file back to the server at the top we need to First import this file so I'm going to say here import model and I'm going to say here import post from dot or slash then specify model and inside that we have post model dot JS file just after that right down here I'm going to create a new HD request so I'm going to create here comment and say post and we are going to make a request on this localhost 8080 like this and this is a type of post request and the endpoint name is upload so we create Here app Dot post we make a post request and the endpoint name is uploads that's about you you can specify any name to this endpoint then I'm going to say here a thing and say here request and response and call function here and just for that we get the data from the user so we say here constant body is equal to request Dot body so when we make a post request to this endpoint we need to pass data to this body variable these are that in the try block I'm going to say constant New Image is equal to a weight and then call here post schema this one we pass here post dot DN and then we pass this body variable here you pass the data of the user to this create just start that I'm going to say here new image this variable Dot so I'm going to save this data in the database and return of response so we say here response dot status 201 dot Json and I'm going to return a Json message MSG New Image uploaded and if we have an error we cache that error inside this error statement so we see here response dot status inside the status we specify 409 dot Json and in the object we specify message error Dot message that's it and just out of that we also need to get the user data so inside this root route to get this data to get this uploaded data I'm going to say here post dot find and we find all the documents so we pass here an object and say here then data like this response dot Json data if we have an error so we cache that error inside this sketch and say response dot Json and we return this error if you want you can return the status as well that's about you let me open the terminal you can see we have the mongodb URL and we successfully started the backend server so once we have the backend let's create the front end you can open the terminal and open a new batchel here and I'm going to create a new react project let me first save all the changes and then I'm going to back to the wheat js.day and create a new react template so I'm simply going to say here npm create read latest and then I'm going to specify name to this project which is react app and we specify Double Dash Double Dash template and then specify the template name which is area I'm creating the react application so I'm going to space over here template name react when I press enter it will going to create a scaffolding project inside this react app directory just for that you have to enter into your react app install all the dependencies and start the development server so I'm going to secure CD direct app npm iPhone install or you can say npm install to install all the dependencies inside this project and then you have to say npm run Dev to start the development server so I'm going to see here npm run Dev so this is going to start the wheat react project so you have to just open this link you can see you're going to have your react application ready yes or that I'm gonna back with the react app open the app.jsx get rid of all the code right on here and simply going to add here a one heading tag and say react app so we have this react application here just out of that let me open the index.css let me copy and paste my styling here like this then I'm going to copy the styling of app.css get rid of all this code and specify all the styling here don't worry you can download complete project from the link provided in the description close these files back to the app.jsx and right here in this div I'm going to get it off this H1 here I'm going to create a form get rid of this action attribute and I'm going to say on submit on submit I'm going to call in a Handler function so just for now I'm not going to return anything right from this function something like this but inside this form I'm going to say here input and this is a type of file and then I'm going to space over here first label image then I'm going to specify name which is my file then I'm going to specify ID which is going to be file upload and then I'm going to specify here accept and I'm only going to accept Dot jpeg dot PNG and Dot JP J5 and just for that right down here I'm gonna simply going to add here the hard-coded text so I'm going to add it's the heading tag here and say Doris welder this is just a hard-coded text for the design so I'm going to add here spawn design ER and a button to submit a data I'm going to say here submit and this is a type of submit button let me say a question yes let me Zoom this and open the console so you can see I'm going to have the result something like this now you can see right now I don't have this input type file inside this project because we only have display none so this input App instead of using this input type file I'm using label here so what we are going to do is at the top here I'm going to say label and this is for the file upload let me copy this ID specify that right here something like this and I'm going to space over here class name last name or is going to be custom file upload copy this class name specify that here and inside this label here I'm gonna add the image tag and then I'm going to add the image inside this project so inside the source I'm going to use this image this profile dot PNG I'm going to use this image here right inside the source so at the top I'm going to get rid of this import statement right from here and here I'm going to say import author from dot photo slash I said profile dot PNG copy this author and specify that right here save this file and you're going to have the results something like this when you click on this profile this is going to open a new window and now you can select your image and specify that and now you can select your image and upload inside a mongodb database when we select the image and click on the submit button we need to convert that image into base 64 format base64 is an encoding and decoding technique used to convert binary data into ASCII text format when an image is stored using base 64 in the database such as mongodb the image is stored as a string in the database this string can then be decoded back to its original form when needed so what we are going to do is inside this app right down here I'm going to create a new function the function name is one word to base 64. now this function is used to convert the image into base64 format and I'm going to pass here a parameter called file so when we call this convert to base64 function we need to pass the file object as an argument to this function inside this I'm simply going to set return new promise and then we need to see here resolve and return a function inside this you have to say constant file reader is equal to new file reader now you don't have to import this file leader inside the react application so I'm going to create a new file reader object and specify the instance inside this file reader variable just for that we say here file reader dot read as data URL we could call this method and then pass the file here something like this and then we say file reader Dot onload when the file is load we call this function and inside this function we say resolve and return the file reader dot result and if there is an error then we're simply going to say here file radar dot on error is equal to we return an error message using reject we will call here reject and call the error message that's it the using this read as data URL we convert the file into base64 format and then I'm going to return that using this result statement keep in mind you have to call these statements using the promises otherwise you will get an error message just out that right inside the component right up here let me get rid of the statement and here I'm going to say constant handle submit is equal to pause here the event parameter like this and say here e Dot prevent default and then I'm going to specify this handle submit to this on submit event so here I'm gonna pause handle submit just out of that we also need to add here on change event to this input type file right down here I'm going to say on change and then I'm going to call here a function with the event parameter and say here handle file upload and then we pass this event parameter to this handle file a block let me copy this and let me create this function right down here so I'm going to say here constant handle file upload don't forget to call here the event parameter and make this function completely asynchronous where we call here using now just out of that we need to get this file inside this handle file upload function so what we are going to do is we need to just simply specify here constant you know is equal to and using this event parameter we can get the file if we pass here e dot Target and if I see here console.log file back to the project and if I select the file they will notice I'm going to have here input type file as a response so I can just simply pass here Dot files reload the browser and now if I select the file you can see I'm going to get the files list object as response on zero property we have the file we have all the detail of the file as a response we're going to get this file using pattern pieces so we pass your parentheses particular zero below the browser select the file again you can see we get the file as a response and now we have to pass this file and convert that into base 64 format but before that at the top let me just create here a state where we pass here constant post image set post image is equal to use State and I'm going to specify here my file and the value is going to be no but I'm not going to pass anything to this my file just out of that right down here once you have the file inside this file variable I can just simply see here constant base 64 is equal to of it convert to base64 I'm going to call this function convert to base64 right here and then pass this file just for that if I say here console.log base64 reload the browser if I select a file this will convert this file into base64 format so you are going to have the data something like this and now I can store this data in the mongodb database so we can decode it so at the top right up here I'm going to say constant d8 post is equal to a thing a new function we pass your new image as a parameter and then call here a function we call here try and catch block so we call here try and catch the error and say console.law the error and inside this try I'm going to make the initiative request so we need to First install the exers library inside this project so I'm going to say here npm iPhone install here's an exos Library we are going to make a post request so once we have this Library let me just start the development server again npm run Dev close this terminal at the top you need to say import axios from axial just saw that inside this create post here you have to say oh wait axials dot post so to make a post request you need to call here a method called post and then specify the base URL so at the top let me first create a base URL here a variable constant URL or you can say base URL that's upon you you can specify any name to this URL if you open your terminal open your first batch shell then you will notice here this is your server based URL so copy it and then specify that here like this and now because this component is just for uploading a new image inside the mongodb database we are going to pass the endpoint as well uploads just copy this just copy this URL specify that here and as a second argument specify this parameter new image and then right down here inside its handle submit when you submit your form you're going to call this create post this function and then specify the post image variable and at the end I'm going to say console.la post image and at the end inside this handle file upload instead of this console.log I'm going to say set post image I'm going to call this function that post image like this and in the object I'm going to first specify the spread operator specify post image and update the value of the my file so I'm going to space over here my file base 64. I'm going to return this converted base 64 string to this post image and then I'm going to store that in the mongodb database something like this then if you want you can just simply specify here upload it just save the changes and just select your image click on open and click on the submit button you can see I'm going to have here uploaded message we also have here an error from ports so we need to First add correspondency inside the server inside is file so let me just stop the development server install npm iPhone install the course library inside This Server npm start at the top right up here I need to say import s from course and then you have to say here app dot use of course that's it save this file and if I select the image click on the submit button you can see you're going to have your uploaded message you select the image I want to change this image as well so instead of just the altar right here I'm going to say post image dot my file if we have value inside this my file then use it otherwise use this author you can see now we successfully uploaded this file in the mongodb database now to check this just back to the Thunder client click on get request and make a get request on the localhost 8080 you can see you're going to have your ID and my file property with the image value so now we successfully store the image in the base64 format and now if you want to display this image you just have to call this my file in the react application and specify that to the source attribute of your image that is going to display your image in the reactor application so I hope you understand how to convert the image into base 64 format and store it in the mongodb database if you find anything useful make sure to press the like button share this video with your friends subscribe for more latest videos that is all for now I will see you in the next one [Music] thank you [Music]

Channel: Daily Tuition

Views: 24,111

Keywords: Store Image in Base64 in MongoDB Using MERN Stack, react application, mern stack react app, working with react app, react tutorial, store files in mongodb database, mongodb tutorial, mongodb, mongodb store file, how to store image in mongodb database, mern, mern stack app to store image in mongodb, react, app, how to, base64, image to base64

Id: pfxd7L1kzio

Length: 22min 34sec (1354 seconds)

Published: Mon Dec 05 2022