DEV Community

Graita Sukma Febriansyah Triwildan Azmi
Graita Sukma Febriansyah Triwildan Azmi

Posted on • Updated on

Express file upload using Multer

API with upload
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 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
Enter fullscreen mode Exit fullscreen mode

Great, next we will import the required dependencies.

Nice, now we will create multer configuration, upload function, and delete file function.

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.

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

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. 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.

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🙌.

Top comments (0)