Adding File Upload functionality with Multer
Step 6: Create a file named file-upload.js in the current directory to store the file upload handling functions and Multer configuration.
Javascript
const multer = require("multer");const path = require("node:path");const storageConfig = multer.diskStorage({ // destinations is uploads folder // under the project directory destination: path.join(__dirname, "uploads"), filename: (req, file, res) => { // file name is prepended with current time // in milliseconds to handle duplicate file names res(null, Date.now() + "-" + file.originalname); },});// file filter for filtering only imagesconst fileFilterConfig = function(req, file, cb) { if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") { // calling callback with true // as mimetype of file is image cb(null, true); } else { // false to indicate not to store the file cb(null, false); }};// creating multer object for storing// with configurationconst upload = multer({ // applying storage and file filter storage: storageConfig, limits: { // limits file size to 5 MB fileSize: 1024 * 1024 * 5 }, fileFilter: fileFilterConfig,});module.exports = upload; |
Explanation of the above code:
- A multer object is created as “upload” and exported from the module, in the multer object storage, limits, fileFilter options are used to configure the multer object.
- Storage option is for configuring the process of storing the file, like the destination folder, file name to use for the uploaded files.
- destination: uploads, a folder is created inside the project directory to store the uploaded files.
- filename: Current time in milliseconds is fetched with Date.now() and prepended to avoid conflict of file names.
- FileFilter option is used to filter out files, call the cb() with true to pass the file, here we are filtering out files which are not images.
Step 7: Import the upload function in the server.js to use in the “/upload” REST endpoint.
Javascript
const express = require("express");const app = express();// port for our project to runconst PORT = 8080;// A simple greeting message to// test the appapp.get("/", (req, res) => { res.send("Hello from Express!");});// add code for upload functinality using POST methodapp.post("/upload", upload.single("file"), (req, res) => { // check whether req.file contians the file // if not multer is failed to parse so notify the client if (!req.file) { res.status(413).send(`File not uploaded!, Please attach jpeg file under 5 MB`); return; } // successfull completion res.status(201).send("Files uploaded successfully");});// Start the server using listen method of express// pass the port and callback function on successful startapp.listen(8080, () => { console.log(`server is started and listening at port: ${PORT}`);}); |
Explanation of the above code:
- Here we have created a post request and passed the upload object’s single function as a middleware to handle the file storing.
- upload.single(“file”) is used to accept a single file input and store it under the destination folder, where “file” is the name of the FORM-DATA attachment, this should match when we send the request.
- Once, multer has handled the request, the file will be stored under req.file. For simple error handling we will check the req.file, if it is undefined we will intimate the client about this client error with a error message.
How to Handle file upload in Node with Multer and Postman
In this article, we will discuss about file upload functionality using Node, Multer and Postman. File Uploading is a significant functionality of any web service to get the data from the users in the form of files.
To implement this feature we will use Node JS with Express and Multer library. Finally, we will use the Postman API platform to test the REST endpoint for file uploading.
Contact Us