A large number of mobile apps and websites allow users to upload profile pictures and other files. Therefore, handling files upload is a common requirement while building a REST API with Node.js & Express.
In this tutorial, we will go discuss how to handle single and multiple files uploads with Node.js and Express backend and save uploaded files on the server.
Installation
First of all, let's create a new Node.js app by running the below commands. I am using npm for package management. It should be fine to use yarn if you like.
# creat a new directory & switch to it
$ mkdir files-upload && cd files-upload
# run this for npm to create a new app
$ npm init -y
# run this for yarn to create a new app
$ yarn init -y
-y or --yes skips the interaction session and generates a package.json file based on your defaults. Next, run the following command to install required dependencies:
# run this for npm
$ npm install express body-parser cors express-fileupload morgan lodash --save
# or using yarn
$ yarn add express body-parser cors express-fileupload morgan lodash
Here is what each of the above packages does:
express- Popular web framework built on top of Node.js. We'll be using it for developing REST API.body-parser- Node.js request body parsing middleware which parses the incoming request body before your handlers, and makes it available underreq.bodyproperty. In short, it simplifies the incoming request.cors- Another Express middleware for enabling CORS (Cross-Origin Resource Sharing) requests.express-fileupload- Simple Express middleware for uploading files. It parsesmultipart/form-datarequests, extracts the files if available, and make them available underreq.filesproperty.morgan- Node.js middleware for logging HTTP requests.lodash- A JavaScript library that provides utility functions for arrays, numbers, objects, strings, etc.
Create Express Server
After installing the required dependencies, let's start creating our Express server.
index.js
const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const _ = require('lodash');
const app = express();
// enable files upload
app.use(fileUpload({
createParentPath: true
}));
//add other middleware
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(morgan('dev'));
//start app
const port = process.env.PORT || 3000;
app.listen(port, () =>
console.log(`App is listening on port ${port}.`)
);
The above code is very easy to understand. It first setups express-fileupload middleware to enable multipart/form-data requests. Afterward, other Express middleware are added to allow Cross-Origin Resource Sharing (CORS), request body parsing, and HTTP request logging. In the end, it starts the server at port 3000.
Upload Single File
Let's create our first route that allows users to upload their profile pictures.
app.post('/upload-avatar', async (req, res) => {
try {
if(!req.files) {
res.send({
status: false,
message: 'No file uploaded'
});
} else {
//Use the name of the input field (i.e. "avatar") to retrieve the uploaded file
let avatar = req.files.avatar;
//Use the mv() method to place the file in upload directory (i.e. "uploads")
avatar.mv('./uploads/' + avatar.name);
//send response
res.send({
status: true,
message: 'File is uploaded',
data: {
name: avatar.name,
mimetype: avatar.mimetype,
size: avatar.size
}
});
}
} catch (err) {
res.status(500).send(err);
}
});
The above code snippet is an HTTP POST function. When you send a multipart/form-data request to /upload-avatar route to upload a file, this function saves the file to the uploads folder on the server.
How express-fileupload middleware works?
It makes the uploaded files accessible from req.files property. For example, if you are uploading a file called my-profile.jpg, and your field name is avatar, you can access it via req.files.avatar. The avatar object will contain the following information:
avatar.name- The name of the uploaded file i.e.my-profile.jpgavatar.mv- The function to move the file elsewhere on the serveravatar.mimetype- The mime-type of the fileavatar.size- The size of the file in bytesavatar.data- A buffer representation of the uploaded file
Upload Multiple Files
Let's start creating another route to allow users to upload multiple photos at once.
app.post('/upload-photos', async (req, res) => {
try {
if(!req.files) {
res.send({
status: false,
message: 'No file uploaded'
});
} else {
let data = [];
//loop all files
_.forEach(_.keysIn(req.files.photos), (key) => {
let photo = req.files.photos[key];
//move photo to uploads directory
photo.mv('./uploads/' + photo.name);
//push file details
data.push({
name: photo.name,
mimetype: photo.mimetype,
size: photo.size
});
});
//return response
res.send({
status: true,
message: 'Files are uploaded',
data: data
});
}
} catch (err) {
res.status(500).send(err);
}
});
The above code is quite similar to single file upload, except that we now receive a field photos instead of avatar. We use lodash utilities functions ( _.forEach() & _.keysIn()) to loop over photos field and then save each photo to uploads directory.
Testing the Application
We're almost done! Run the following command in your terminal from the root directory of the project to start the application:
$ node index.js
It will start the application at port 3000. Let's use Postman for sending HTTP multipart/form-data requests:
1. Single File
2. Multiple Files
If you want to make the uploaded files publicly accessible from anywhere, just make the uploads directory static:
app.use(express.static('uploads'));
Now, you can open the uploaded file directly in the browser:
http://localhost:3000/icon.png
File Size Limit
If you want to limit the size of the files uploaded at once, pass the limits options directly to the express-fileupload middleware:
app.use(fileUpload({
createParentPath: true,
limits: {
fileSize: 2 * 1024 * 1024 * 1024 //2MB max file(s) size
},
}));
Source code: Download the complete source code from GitHub available under MIT license.
Conclusion
That's all folks! We learn how to upload single and multiple files using Node.js and Express framework. express-fileupload is an easy-to-use Express middleware for handling file(s) upload. Checkout its documentation for more configuration options.
If you have any questions or feedback, please feel free to send me a tweet anytime.
Happy Learning Node.js 😍
Read Next: Express File Upload with Multer in Node.js
✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.
👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, ☕ Buy me a coffee (cost $5).