Uploading Files with NodeJS and Multer

Last reviewed 2 Sept 2026

Setup the boiler code

Create project and install the dependencies

npm i express ejs

Create index.js and paste below code:

const express = require("express");

const path = require("path");

const app = express();

const PORT=8000;

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

app.set("views",path.resolve("./views"));

app.use(express.json());

app.get("/", (req, res) =>{

return res.render("homepage");

})

app.listen(PORT, () => console.log("Server started at ",PORT) )

Create views/homepage.ejs

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

File uploads

</head>

<body>

</body>

</html>

Let’s install multer

https://www.npmjs.com/package/multer

npm i multer

Update index.js

const express = require("express");

const path = require("path");

const multer = require("multer");

const app = express();

const PORT = 8000;

const storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, "./uploads");

filename: function (req, file, cb) {

const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);

cb(null, `${Date.now()}-${file.originalname}`);

});

const upload = multer({ storage })

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

app.set("views", path.resolve("./views"));

app.use(express.json());

app.get("/", (req, res) => {

return res.render("homepage");

});

app.post("/upload", upload.single("profileImage"), (req, res) => {

console.log(req.body);

console.log(req.file);

return res.redirect("/");

});

app.listen(PORT, () => console.log("Server started at ", PORT));

Update views/homepage.ejs

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

File uploads

</head>

<body>

</body>

</html>

Retrieve File data without uploading - Useful when we do not want to store the file and just forward the file to another endpoint.

React Dropzone front end

onDrop = async newFiles => {

let formData = new FormData()

for (let i = 0; i < newFiles.length; i++) {

let file = newFiles[i]

formData.append(‘files’, file)

}

try {

const response = await axios.post('/upload', **formData**)

} catch (error) {

console.log(error)

}

}

Express back end

**const fileUpload = require('express-fileupload')**

app.use(fileUpload())

const router = require('express').Router()

**const FormData = require('form-data')**

const axios = require('axios')

router.post('/upload', preAuth, async (request, response) => {

const { files } = request

const formData = new FormData()

for (let i = 0; i < files.length; i++) {

let file = files[i]

formData.append(‘files’, file)

const formHeaders = formData.getHeaders()

try {

const { data } = await axios.post(

`path/to/endpoint’,

formData,

{

headers: {

‘Content-Type’: formHeaders[‘content-type’],

…formHeaders,

}

)

response.status(200).send(data)

} catch (error) {

response.status(400).send({ message: ‘Error’})

})