DEV Community

Cover image for Building a File Upload REST API with Node.js and Express🔥
Bilal Asghar
Bilal Asghar

Posted on

Building a File Upload REST API with Node.js and Express🔥

Introduction

In today's web applications, file uploads have become a common feature, enabling users to share images, documents, and other files with ease. As a developer, you can implement this functionality by building a File Upload REST API using Node.js and Express, providing a seamless experience for your users. In this article, we'll guide you through the process of creating a robust and secure file upload API step by step.

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

  • Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your machine.
  • Express.js: Set up an Express.js project by initializing a new Node.js application and installing the Express package.
  • Multer: Install the Multer package, which will facilitate handling multipart/form-data, allowing us to process file uploads.

Step 1: Setting Up the Project

Let's kickstart the project by creating a new directory and initializing a Node.js project:

mkdir file-upload-api
cd file-upload-api
npm init -y

Enter fullscreen mode Exit fullscreen mode

Install Express.js and Multer packages:

npm install express multer
Enter fullscreen mode Exit fullscreen mode

Step 2: Create the Server

Create an index.js file and set up the basic Express server:

// index.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000; // You can use any available port

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Multer for File Uploads

Next, we'll configure Multer to handle file uploads. Create a new folder named uploads to store the uploaded files:

mkdir uploads
Enter fullscreen mode Exit fullscreen mode

Update the index.js file to configure Multer:

// index.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// Multer Configuration
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

const upload = multer({ storage });

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Step 4: Define the File Upload Endpoint

Now, let's create an endpoint to handle file uploads. We'll use the upload.single() middleware from Multer to handle a single file upload with the field name 'file':

// index.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// Multer Configuration...
// ...

// File Upload Endpoint
app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'No file uploaded' });
  }
  res.json({ message: 'File uploaded successfully', filename: req.file.filename });
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Enter fullscreen mode Exit fullscreen mode

Step 5: Test the API

node index.js
Enter fullscreen mode Exit fullscreen mode

Use a tool like Postman or any other API client to send a POST request to http://localhost:3000/upload, with the file attached in the request as form data with the key 'file'. You should receive a response with a success message and the filename of the uploaded file.

Conclusion

Congratulations! You've successfully built a File Upload REST API using Node.js and Express. This API can handle single-file uploads securely and efficiently. You can further enhance this API by adding validation, supporting multiple file uploads, or integrating it with a database to store file metadata.

Github Repository: https://github.com/MalikBilal111/file-upload-node-rest-api

Connect with me on Linkedin and GitHub to stay updated and join the discussion!

Top comments (1)

Collapse
 
dheeraj_singh_79201bb15a0 profile image
Dheeraj Singh

Menstion url in postman