Image to base64 and upload to MongoDB in MERN

Question

Hello and thanks to everyone for helping.

So I would like help with my project.

So what I would like to happen is get an image from react after posted,

then convert that to base64 so I can post to mongo with mongoose,

and finally, be able to display that but in the process of all of this,

I don't wanna use local saving or in any clouds.

Does anyone know how to accomplish that?

Please share you ideas.

-StayHome

are you asking for the whole procedure or just for the image conversion part? — Zirc, May 08 '20 at 16:14
the whole procedure but you don't have to code the whole thing just explain and small examples of code — Michael Kitas, May 08 '20 at 16:15
I will try to answer your question, I presume you have a sort of idea of each of the stack in MERN — Zirc, May 08 '20 at 16:20

score 2 · Accepted Answer · answered May 08 '20 at 16:31

React: Uploading For the Base64 Conversion, You could:

You could use plain javascript to accomplish that. Refer more here
Even better, use the advantage of NPMs for React. Use a library someone has already built in. This documentation looks awesome for it. Here's the demo for it.

Once you have converted that to base64. I presume you will be storing the details in the react state, you could now do some AJAX request to your server.

Express And Node: Receiving Data Most of this will be boilerplate code until you get to the part where you have to write the APIs. For this portion, you will need to create an API on a specific route that you will specify that will accept POST method.

Three important folders to take a look into:

Routes
Controllers
Models

Routes will be your entry point for APIs, and will use functions that are defined in the controllers. These controllers are made using mongoose functions that will be based on the models that you will create. The controllers you probably will need for this scenario is CREATE and READ.

Mongoose and MongoDB Connect those to MongoDB. There's a lot of resource for this such as this.

Express and Node: Giving Data Once you have finished the database models and controllers. You will have a controller for getting specific data in the database. Now you can create a route that will serve this API, usually in GET method.

React: Receiving the Stored Image In the page that you require the image, you could perform a AJAX request in componentDidMount and store the data in the state.

Using HTML and react, you could create this. More info here

<div>
   <p>Taken from wikpedia</p>
   <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
   AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

Image to base64 and upload to MongoDB in MERN

1 Answers1