Integrating file upload feature to a nodejs project
Tags: node, webdev, tutorial, javascript
Published: 2022-12-21 15:13:32

As a web developer or backend engineer, you may often get into a situation where you have to allow the users to upload some files to a server through the application you are working on. This can be images, videos, documents or anything. There are tons of paid saas products or cloud storage solutions available in the market to solve this problem but what if I tell you that there is an open-source npm package which can help you out with this? In Node js, there is a popular package named multer which can handle file uploads in your application.

Multer allows you to handle HTTP requests with `enctype="multipart/form-data"` which is used for file uploads. Here `enctype` is an HTML attribute which means an encoding type used in HTML forms and the `multipart/form-data` is the protocol for sending form data to the server in multiple parts due to the large size of files to be uploaded.

Multer is very easy to use and Integrating it into a Node js application is very simple and can be done using a few lines of code.

In this article, we will be looking through the process of integrating multer and also discuss the various use cases and customization features.

## Prerequisites

*   Nodejs installed in your machine
    
*   Any prefered code editor I'm using vs code
    
*   express js app. Check out the template [here](https://github.com/kumar-kalyan/express-app)
    

## Setup the express app from the above template

*   Open up the terminal and paste the below command
    
    ```bash
    git clone https://github.com/kumar-kalyan/express-app.git
    ```
    
    This will copy all the template files to your local machine
    
    ![animage](https://cdn.hashnode.com/res/hashnode/image/upload/v1671558319335/bnpHouwjO.png )
    
*   Now enter the root directory of the template
    
    ```bash
    cd express-app
    ```
    
    ![animage](https://cdn.hashnode.com/res/hashnode/image/upload/v1671558352323/artIVFkLc.png )
    
    *   Install all the directories using `npm install`
        
        ![animage](https://cdn.hashnode.com/res/hashnode/image/upload/v1671558407884/C_fIaAn5R.png )
        

## Getting started

*   Open up the terminal in the root directory and use the below command to add multer to the Node js project
    

```bash
npm install multer
```

*   Once the installation is completed now you need to import the multer module into your project using the `require` keyword and finally set up the middleware. This can be done inside the `server.js` file or any separate module as per project structure.
    
    Middleware in Express is a special function which has access to the request object, response object and the next middleware function within the application request-response lifecycle.
    
*   In this article, we will implement multer middleware in the server.js file.
    
    ```javascript
    const multer = require('multer')
    ```
    
    The above code shows how to import a module in a Node js project.
    

## Setup the storage function

*   Now let's setup `storage` function inside the multer module to store the uploaded files
    
    ```javascript
    // SET STORAGE
    var storage = multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, 'uploads/')
        },
        filename: function (req, file, cb) {
            cb(null, file.fieldname + '-' + Date.now() + ".png")
        }
    })
    var upload = multer({ storage: storage })
    ```
    
    multer has a `diskStorage` function which takes two parameters named `destination` and `filename` the former is responsible for handling the upload destination which is set to a folder named `uploads` and the latter is responsible for handling the name of the file which is to be uploaded. For the file name, we are taking the `file.fieldname` which can be accessed from the request object and followed by a concatenation of the current date using the javascript date object lastly adding the filename type will store all the uploaded files in png format
    

after that, we are configuring the `upload` variable and setting the storage inside the multer function.

## Create a POST request for file upload

*   Now let's create the post request for uploading files
    
    ```javascript
    app.post('/profile', upload.single('upfile'), function (req, res) {
        // req.file is the `avatar` file
        try {
            res.json({
                "name": req.file.originalname,
                "type": req.file.mimetype,
                "size": req.file.size
            })
        }
        catch (err) {
            res.json({ "err": err })
        }
        // req.body will hold the text fields, if there were any
    })
    ```
    
    So in the above request, we are passing the `upload.single` middleware function and inside it specifying the name of the file. On successful upload, we are sending a JSON response to the user and on errors, we are sending the error message as a JSON response. We are using `try` `catch` block to handle errors
    

## Let's build the front end for file upload

*   Now let's build the front end for the file upload
    
    Create a folder named `views` inside it create a file named `index.html`
    
    Inside the `index.html` create a simple form using the following code
    
    ```elm
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <form action="/profile" method="post" enctype="multipart/form-data">
            <input type="file" name="upfile" />
            <input type="submit" value="upload" class="btn btn-default">
          </form>
    </body>
    </html>
    ```
    
    Make sure to specify the attribute of `enctype="multipart/formdata"` which I have mentioned earlier in this article. create an `input` element of type `file` and name to `upfile` this can be anything of your choice but make sure to keep it the same which we have used in the upload middleware in the `server.js` file. In the form make the `method` attribute to a `POST` request and the `action` attribute to `/profile` which is our route to the `POST` request for file upload.
    

## Setup server.js for rendering index.html

*   Now let's create a basic `GET` request and will send this file to the user using the `process.cwd` in Node Js. `cwd` stands for the current working directory is a function inside the Node Js process module and is used to work with files. Importing the `process` module can be done by following a piece of code
    
    ```javascript
    const process = require('process');
    ```
    
    The `GET` request can be defined like this
    
    ```javascript
    app.get('/', function (req, res) {
        res.sendFile(process.cwd() + '/views/index.html');
    });
    ```
    
    So the above code is responsible for sending the `index.html` to the user.
    
    ## Let's check the result
    
    *   Start the server using
        
        ```bash
        node server.js
        ```
        
        ![animage](https://cdn.hashnode.com/res/hashnode/image/upload/v1671463758391/7aXkKoaWH.png )
        
*   open your browser and open the link [http://localhost:5000/](http://localhost:5000/)
    
    ![animage](https://cdn.hashnode.com/res/hashnode/image/upload/v1671463856970/m4Kt5HE1y.png )
    
*   Click on the `Choose File` button to select files
    
    ![animage](https://cdn.hashnode.com/res/hashnode/image/upload/v1671463983538/bk7P03BVz.png )
    
*   Now click on `upload`
    
    ![animage](https://cdn.hashnode.com/res/hashnode/image/upload/v1671464034560/JWIOQidJs.png )
    
    You must see a response like this
    

## Conclusion

Overall, Multer makes it easy to add file upload functionality to your Node.js application. Whether you are working on a small personal project or a large enterprise application, Multer has you covered. There are many customizing options available for multer like multiple file uploads, specifying the size, etc. which can be found on the multer's NPM page. Make sure to share this article with your peers and reach out for any queries. Follow Documatic for amazing content like this one.

Happy Coding :)