How to upload images in mongoDB with express js and multer

 

Hi. welcome to another learning session on trycoder.com. Today, we are going to learn how to upload images in mongo database using express and multer middleware. This tutorial requires basic knowledge in express js and mongoose. If you are a total beginner, I recommend you check our past tutorials both on this website and our Youtube channel.

Multer is a module used to upload files like images and other form of files using node js. There are equally other alternatives to multer like gridFS and the formidable module.

Have you ever wondered how images are uploaded to the server or database?

Lets figure it out!, When the images are submitted from the form on the front end, they need to be stored in a folder available in the server. The path to that file is then uploaded to the database which when called, will point out to the path and display the image like when adding images in html using a source path.

If you got the point above, then you have gotten the whole idea.

Let us look a small example using express js, multer and EJS (embedded JavaScript template engine) which will be used as our frontend.

In this case we will create a folder in our project directory with name “uploads”, create a route to display the form which we will use to submit image file and finally create a route for our post request.

Before we write some code, we need to install the multer module. Just navigate to your project directory from your command line and run the command:

npm install multer

ofcourse! ensure you already have node js, express, mongoose and ejs modules. The command above will download and install multer in your npm modules folder.

setting up multer to upload an image file is very simple.

• We need to set up the destination of the image file and how the file name should be stored (multer storage) Remember we said the image file is first of all uploaded in a server folder and then before saving the path in the database.
• So lastly, the schema will then be created and then the post route setup too. We also need to ensure the folder “uploads” is made public by using express.static() method.
• NB: multer acceps data from forms with enctype="multipart/form-data"

server.js

Note the following:

• In the schema, the image data type is String.
• To include the file to be uploaded in the post route, notice the parameter upload.single() which gives the opportunity to upload one image.
• Multer has other parameters to suit the interest of a project and can be read their npm official documentation.
• The properties of the image file is stored in req.file

form.ejs

After the file will be submitted, the server will handle the post request and save it in mongo database. 

Now let us look at the database and see if our code was successful.