Express file upload using Multer
Tags: express, node, upload, webdev
Published: 2023-04-03 07:34:45


![API with upload ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wpfdeda4yqp76o1eo4b.png)
When you are developing an **API** (Application Programming Interface) there must be a requirement which allows users to be able to upload or download file. A simple example of this implementation is the user able to change his picture profile. In this case, data sent by the user is not **JSON** (Javascript Object Notation), but the file data type. To send this data, the user has to send through the body using multipart/form data format.

> What is the library to be used to create an API which able to upload or download files? 

The answer to that question is Multer. [**Multer**](https://www.npmjs.com/package/multer) is one of the node.js libraries in the form of middleware which able to handle files through **multipart/form data**. You need to know that multipart/form data is one of content-type inside HTML form.

Multer works with adding an object body and object file to the request body. Through this, there is data containing a value from the text field and file data which is attached in HTML form. 

> How to create an API which able to upload and download the file in node.js?

To answer this question, we will build a simple express app which has two endpoints for uploading and downloading a file. The first step is to install the multer dependencies.
`npm i express multer`

Ok, before we start to write the code, we will create a folder structure like this:
```
src/
├── upload/
└── index.js
```

Great, next we will import the required dependencies. 
{% embed https://gist.github.com/Wildanzr/ae409a467a331add6c79849007e0992c %}

Nice, now we will create multer configuration, upload function, and delete file function.
{% embed https://gist.github.com/Wildanzr/8065d7a2e28a9b6166cd124430df5751 %}

You can see in the configuration section, we setting **uploads** folder as a file storage directory. Then we set file naming so that there are no similarities in names. On the **upload** function, we set **diskStorage** as storage and apply a file limit size of 25Mb. On the **deleteFile** function, we create a function which accepts one argument as the file we want to delete.

Hmm... looks like something is missing. Validation? Yup, this part is responsible to ensure the file format under the data we want.

{% embed https://gist.github.com/Wildanzr/7dbed9e4d4f4511d5405d6c86fa2bbc9 %}

Excellent, now is the time for us to implement the configurations and functions that have been made in the route API.

{% embed https://gist.github.com/Wildanzr/c7c1ac503b62792caef8ab82c52fb565 %}

Great job, now we have two routes which are **uploads** with **HTTP method POST** and **uploads/:id** with **HTTP method GET**. On the route **POST**, we applied a function **upload.single** with an argument _'file'_. This _'file'_ is the body of the form data use to send the file. You can change the name of _'file'_ with others, such as _'picture'_. Next, a check is applied to ensure the file is not empty and valid with our format. On the route **GET**, we use params **:id** to get the file that we want. Next, it will check whether the file exist or not.

## Conclusion
To create an API which able to receive a file, we can use [**Multer**](https://www.npmjs.com/package/multer). On the route we have created, it applied a function **upload.single** to accept one file. If you want to accept more than one file, you can use the function **upload.array**.

If you want to get this source code, feel free to take a look at [this GitHub repo](https://github.com/Wildanzr/art_nodejs_upload_file).

Thank you for reading this article, hope it's useful 📖. Don't forget to follow the account to get the latest information🌟. See you in the next article🙌.