File Upload with node.js and Multer

How to use multer for file upload with node.js

30 Days of Node | Node.js Tutorial series

Inside this article!

  1. Overview
  2. Prerequisites
  3. Code
  4. Run the app
  5. Summary

Overview

In this we will learn about how we can upload a single file with node.js using multer. Multer is

  • A Node.js Middleware
  • Used to handle multipart/form-data in node.js Apps.
  • multipart/form-data is primarily used for files and images upload mechanism.
  • We can upload single or multiple file/files as per requirements
  • Multer will not process any form which is not multipart/form-data.

Prerequisites and Installation

We need node.js and NPM to run this application.

  1. Nodejs [ LTS ]
  2. NPM
Also we need to install the following packages :
  1. Express: We can install express using the following command - 

                                        
npm install express --save
    2. Uploading single file
  2. Multer: Same as express, we can install multer using the following command - 

                                        
npm install multer --save

    3. Note that before running the above written commands, you have already run npm init command to create the package.json file.

Code

  • single.html 
    										
<html>
    <head>
        <title> File Upload in Node.js using multer | nodejsera </title>
    </head>
    <body>
    
        <br>
        <br>
        <br>
        <div class="container" >
            <div class="row">
                <div class="col-md-3">
                    <!-- Blank DIV -->
                </div>
                
                <div class="col-md-6 main">
                    <!-- Form Tag starts here -->
                    <!-- Action attribute is the route on backend. Method is POST -->
                    <form action="/" enctype="multipart/form-data" method="post">
                        <input class="box" type="file" name="single" id="single" /><br>
                        <input type="submit" id="submitDetails"  name="submitDetails" value="Upload single file" /><br>
                    </form>  
                    
                </div>
                
                
                <div class="col-md-3">
                    <!-- Blank DIV -->
                </div>
                
            </div>
        </div>
    </body>
</html>

  • success.html 
    										
<span> Single file Uploaded successfully using multer </span>

  • server.js 
    										
const express = require('express');
const multer = require('multer');
const upload = multer({
    dest: 'uploads/' // this saves your file into a directory called "uploads"
}); 

const app = express();

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

// It's very crucial that the file name matches the name attribute in your html
app.post('/', upload.single('single'), (req, res) => {
    res.sendFile(__dirname + '/success.html');
});

app.listen(3000, () => {
    console.log('Server is listening at 3000')
});

Run the app

We can run the code using the following command and we will get the output shown below: 

								
>node server.js
Server is listening at 3000


now go to your http://localhost:3000 and try uploading a single file. Your file will be uploded in the upload folder of root directory.

Summary

In this article we learned how we can use node.js and multer to upload single file. We will learn about multiple files upload in the next part of the tutorial.