Node.js Tutorial: Upload Files with Express and Multer

You are currently viewing Node.js Tutorial: Upload Files with Express and Multer

Node.js Tutorial: Upload Files with Express and Multer

Introduction:
In this tutorial, we’ll explore how to enable file uploading functionality in your Node.js web application using Express.js and Multer middleware. Uploading files is a common requirement for many web applications, whether it’s uploading images, documents, or any other file type. With Node.js, this process can be streamlined and efficient. Let’s get started!

Prerequisites:
Before we begin, make sure you have Node.js and npm (Node Package Manager) installed on your system. You should also have a basic understanding of JavaScript and Node.js.

Step 1: Setting Up the Project:
First, let’s create a new directory for our project and initialize a new Node.js project using npm. Open your terminal and run the following commands:

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

This will create a new directory called node-file-upload and initialize a new package.json file with default values.

Step 2: Installing Dependencies:
Next, we need to install Express.js and Multer. Express.js is a popular web framework for Node.js, and Multer is a middleware for handling multipart/form-data, which is primarily used for file uploads.

npm install express multer

Step 3: Creating the Server:
Now, let’s create a new file named server.js in our project directory and set up a basic Express server.

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

// Set up Multer
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage: storage });

// Define route for file upload
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully');
});

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

In this code:

  • We import Express.js and Multer.
  • Set up Multer to define where uploaded files will be stored and how they will be named.
  • Define a route /upload that will handle file uploads using Multer middleware.
  • Start the Express server on port 3000.

Step 4: Creating HTML Form for File Upload:
Now, let’s create an HTML file named index.html in our project directory to create a simple form for file uploading.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="http://localhost:3000/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">Upload</button>
  </form>
</body>
</html>

This HTML form contains an input field of type file and a submit button. The form’s action attribute is set to the /upload route of our Express server.

Step 5: Testing the File Upload:
Now, let’s start our server by running node server.js in the terminal. Then, open index.html in a web browser, choose a file to upload, and click the “Upload” button.

If everything is set up correctly, you should see a message saying “File uploaded successfully” in your browser.

Conclusion:
You’ve successfully implemented file uploading functionality in your Node.js web application using Express.js and Multer middleware. You can now extend this functionality to suit your specific needs, such as handling different file types, implementing validation, or integrating with cloud storage services.

Leave a Reply