This content originally appeared on DEV Community and was authored by Madhav Pandey
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.
Thanks for reading.
This content originally appeared on DEV Community and was authored by Madhav Pandey
Madhav Pandey | Sciencx (2024-07-13T23:02:16+00:00) How to upload image using multer and Express.js. Retrieved from https://www.scien.cx/2024/07/13/how-to-upload-image-using-multer-and-express-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.