In this blog post we will learn to upload image using multer. multer is a middleware of NodeJS to handle file upload.

Instalation

npm install multer

Frontend

<div class="form-wrapper">
<h3>Upload Profile Picture</h3>

<div class="main">
<form action="/upload" method="POST" enctype="multipart/form-data">

<input type="file" accept="image/*" id="imageInput"  name="userProfile" />
<button type="submit" id="submit" class="btn btn-primary">Upload</button>
</form>

<div class="image-preview">
<img id="imageOutPut"  />
<p id="imageName"></p>
</div>

</div>

Upload preview

Following code will enable the preview of choosen image


let imageInput = document.getElementById("imageInput");
let imageOutput = document.getElementById("imageOutPut");
let imageName = document.getElementById("imageName");
imageInput.onchange = (ev)=>{
    imageOutput.alt = "preview";
    imageOutput.src = URL.createObjectURL(ev.target.files[0]);
    imageName.innerHTML = `<b> ${ev.target.files[0].name} </b>`
    imageOutput.onload = ()=>{
        URL.revokeObjectURL(imageOutput.src);
    }
}

Backend

We have to setup basic multer configuration which includes where do we want to save uploaded image, what name do we want to set up. We can filter the file as well and we can set the file size limit.

//fineName: fileUpload.js

 const multer = require("multer");
const path =  require("path");

const upload = multer({
    limits:800000,
    storage: multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,"upload/images")
},
filename:(req,file,cb)=>{
    let ext = path.extname(file.originalname);
cb(null,`${someUniqueName}.${ext}`)
}
    }),

    fileFilter:(req,file,cb)=>{
        const allowedFileType = ["jpg", "jpeg", "png"];
        if(allowedFileType.includes(file.mimetype.split("/")[1])){
            cb(null,true)
        }else{
            cb(null,false)
        }
    }

})
module.exports = upload;

Explationation of above code

multer take 3 objects limits, storage and fileFilter as a parameter. storagehave 2 parameter which are diskStorage and give full control on storing file to disk and filename.

Now, we can export this as a middleware and we can use to upload image as follow:

Route setup to handle uploaded file

As our frontend form will hit the endpoint /upload we have to setup our route to handle this endpoint which has image in it plus we need to require the middleware that we created.

//fileName: route.js

const express = require ("express");
const router = express.Router();
const upload = require("./fileUpload");


router.post("/upload/",  upload.single("userProfile"),(req,res)=>{

    if(!req.file){
        return res.redirect("/")
    }
    else{   

        let filePath = `images/${req.file.filename}`;
       res.render("image",{
        filePath
       }) 
    }
})

upload.single() will handle single image came from request and saved it to specified folder. The image is saved to upload/images folder.
Now, we have to make upload folder static so that images saved there can be served to the frontend and file path will be images/${req.file.filename} we can save this imageURL to the database as well.

//fileName:app.js

const route = require("./route");
const app = express();
const PORT = process.env.PORT || 8000

app.use(express.urlencoded({extended:true}))


//router connection
app.use("/", route);



//uses of public folder

app.use(express.static(path.join(__dirname,"/public")))
//app.use(express.static(path.join(__dirname,"/upload")))
app.use(express.static(`${__dirname}/upload`))


//init handlebars
app.engine("handlebars", handlebars());

app.set("view engine", "handlebars");


app.listen(PORT,()=>console.log(`Server is running on ${PORT}`))

This way you can upload image to the server using Expressjs with the help of multer.

How to upload image using multer and Express.js