How to Handle file upload in Node with Multer and Postman

File uploading is an important feature in web applications, enabling users to send files like images, documents, or videos to a server. It helps applications collect and manage user-generated content efficiently.

Prerequisites

Install Node.js and Postman (use the given links if not already installed) and ensure the specified versions are used.

• Node
• Postman
• Express JS
• Multer

Approach to handle file upload in Node

Let's discuss our approach for implementing the file upload functionality in Node.js.

• Create a Node.js application and install Express and Multer.
• Configure Multer with storage location, file size, and type limits.
• Define a POST /upload endpoint and use Multer as middleware.
• Run the server and test the API in Postman by sending a file through form-data.
• Verify the uploaded file is saved in the backend.

Project Structure:

Handling File Upload in Node JS

Follow the step by step procedure to handle file upload in node, create a folder to store the project files and open that folder in VS Code or any of your preferred Text Editor. The entire workflow has been divided into three major process.

• Create a basic express application with Node.js
• Set up the file upload REST endpoint and configure the multer library to save the files to the disk.
• Test the file upload REST endpoint using the Postman API tool.

Steps to create Basic Express Application

Step 1: Create a basic node application with the below npm command.

npm init -y

`-y` flag is used to say yes to all of the details asked by npm, if you need to change any option, answer it manually by omitting the flag in the command.

Step 2:

• Install the express.js and multer dependency using the npm install command.
• The dependencies will be installed under a folder called node_modules under the current directory.

npm install --save express multer

• --save option is used to add these libraries in the package.json file as a dependency for running the application.

Step 3: Create a file named server.js under the same directory to host the express server. Add the below code to bootstrap the server for giving a hello message on hitting the "/" endpoint

const express = require("express");
const app = express();

// port for our project to run
const PORT = 8080;

// A simple greeting message to
// test the app
app.get("/", (req, res) => {
res.send("Hello from Express!");
});

// Start the server using listen method of express
// pass the port and callback function on successful start
app.listen(8080, () => {
console.log(`server is started and 
			listening at port: ${PORT}`);
});

A simple get method is added to the "/" path to check whether the app is starting fine and responding back to the request.

Step 4: Start the server and test the initial greeting message in Postman, to start the server use the below command.

npm start

Step 5:

• Once the server is started, open Postman and create a new HTTP request using the `New` button located after My Workspace in the screen.
• Enter your server url in the address bar of the request and select the HTTP method for the request, here => http://localhost:8080/ and GET method.
• Click the send button to send the request to the server.
  

• Once the request has been sent, the server will respond with plain text saying "Hello from Express!".
• You can find the response from the server in the below area of the request under the Body tab.

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.

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 images
const 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 configuration
const 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.
• The storage option configures file saving by setting the destination folder (e.g., uploads/) and generating unique filenames with Date.now().
• 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.

const express = require("express");
const app = express();

// port for our project to run
const PORT = 8080;

// A simple greeting message to
// test the app
app.get("/", (req, res) => {
	res.send("Hello from Express!");
});

// add code for upload functinality using POST method
app.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 start
app.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.

Testing File Upload with Postman

Step 8:

• Start the server and enter the "http://localhost:8080/upload" endpoint and use the POST method.
• Add the file under BODY tab, use the "FORM-DATA" encoding for the body and send the request.

Output: