Introduction

The ability for users to share and keep various sorts of content is made possible by the essential element of file uploading in contemporary web development. File uploads may be handled in a stable environment thanks to Node.js's effective and event-driven architecture. The management of form submissions, the processing of file uploads, and the saving of files on the server are some of the several aspects of file uploading in Node.js that will be covered in this article. This tutorial will lead you through adding file-uploading support to your Node.js applications, whether you're a novice or a seasoned developer.

Setting Up a Node.js Project

Here we discuss how to set up a Node.js project.

Installing Node.js

Initializing a Node.js project with npm

Installing required dependencies

npm install express --save
npm install ejs --save
npm install multer --save

Project Structure

After a successful project setup, we need to add some folders below the image of the project structure.

project structure

In this file structure, node_modules, package-lock.json, and package.json these files is created while you set up a project. We created index.js, routes.js, and views folder. Below attached all files used in this project.

index.js

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

const path = require('path');
const multer = require('multer');

// Require the routes file
const routes = require('./routes');

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// Use the router middleware
app.use('/', routes);
const storage = multer.diskStorage({
    destination: path.join(__dirname, 'uploads'),
    filename: (req, file, cb) => {
      cb(null, file.originalname);
    }
  });
  
  const upload = multer({ storage });
  
  // Route handler for file upload
  app.post('/upload', upload.single('file'), (req, res) => {
    res.send('File uploaded successfully!');
    // res.redirect('/');
  });
app.listen(3000, () => {
  console.log('server is running on port 3000');
});

Explanation

This code configures a fundamental Express server with file upload capabilities. The required modules, including Express, path, and multer, are imported. It also sets the views directory and configures the server's view engine to use EJS templates. To process incoming requests, the routes module is necessary and employed as middleware. Multer is set up to manage file uploads, with the destination directory and filename being specified. When the server first starts up, it outputs a message and listens on port 3000. The '/upload' route accepts file uploads, saves them to the designated location, and then responds with an indication that the upload was successful.

routes.js

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

router.get('/', (req, res) => {
  // Route handler logic for the GET request
  res.render('first');
});

module.exports = router;

Explanation

Using the Express Router module, this code configures a router. Express.Router() is used to build a new instance of the Router after importing the "express" module. A GET request to the root URL ("/") will be handled by the router. The callback function, which renders the 'first' view using res.render('first'), is called when this request is received.

The 'first' EJS template is rendered using the res.render() method and is a dynamic HTML file that can be filled with data before being sent as a response. The router is finally exported so that it can be mounted as middleware in the main application file or used by other modules. In an Express application, this enables the routes to be organized and modularized.

first.ejs

<!-- upload.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title>File Upload Form</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f2f2f2;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    form {
      width: 300px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    label {
      display: block;
      margin-bottom: 10px;
      color: #333;
    }

    input[type="file"] {
      margin-bottom: 20px;
    }

    input[type="submit"] {
      background-color: #4CAF50;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <label for="file">Upload File:</label>
    <input type="file" name="file" id="file">
    <br>
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Output

output

Explanation

To render an HTML form for file uploads, an EJS (Embedded JavaScript) template file called "upload.ejs" is utilized. A title, style specifications, and a form element are all parts of the HTML structure. The form features a "Upload File" labeled file input field and a submit button. The uploaded file is included in a POST request to the "/upload" endpoint that is sent when the form is submitted.

The styling in the included CSS determines the font family, margin, padding, background color, and box shadow of the form. The submit button's background color is green, and the form's elements are styled with the proper spacing. A clean, basic, and centered arrangement characterizes the entire design.

Conclusion

A rudimentary implementation of file uploading capabilities in a Node.js application is provided by this code and project, in conclusion. It shows how to install Express, set up routes to handle requests, and use the multer middleware to handle file uploads. An EJS template that produces an HTML form for file uploads is also included in the code. Users can choose a file, submit it via the form, and have it uploaded to the server's specified directory with this implementation. This project can be modified and improved upon in accordance with the needs of certain applications and serves as a foundation for creating more sophisticated file-uploading functionalities.

FAQs

Q. How can I limit the size of uploaded files?

A. To limit the size of uploaded files, you can utilize the limits option provided by multer. For example, you can set the limits option in the upload middleware like this: const upload = multer({ storage, limits: { fileSize: 1024 * 1024 * 5 } }); This example limits the file size to 5 megabytes.

Q. How can I handle multiple file uploads at once?

A. To handle multiple file uploads, you can use the upload.array() method instead of upload.single() in your route handler. For example, app.post('/upload', upload.array('files', 3), (req, res) => { ... }); This allows multiple files to be uploaded simultaneously, and the files will be accessible in req.files array.

Q. How can I access the uploaded file's information in the route handler?

A. When using upload.single() middleware, the uploaded file information can be accessed through the req.file object in the route handler. For example, you can access the filename using req.file.filename or the original name using req.file.originalname.