A Detailed Guide to NestJS File Upload

In this detailed guide to NestJS File Upload, we will learn how to upload files to a NestJS Application.

To handle file upload, Nest provides a built-in module. This module is baed on the multer middleware package for Express.

Multer handles data in the multipart/form-data format. This basically allows us to upload files using the standard HTTP POST request.

1 – Installation

To enable better type safety, let’s install the multer types package. See below command:

$ npm i -D @types/multer

This package provides the Express.Multer.File type. We use this type in our controller definition.

2 – Basic NestJS File Upload

We will first understand a very basic example of file upload. In other words, uploading a single file via an HTTP end-point.

See below example:

@Post('file-upload')
@UseInterceptors(FileInterceptor('file'))
uploadFile(@UploadedFile() file: Express.Multer.File) {
    console.log(file);
}

We have a POST endpoint that accepts the file as input. In case you want to know more about endpoints and controllers, we have a detailed post on NestJS Controllers.

Some key points to note here are as follows:

• We use the FileInterceptor decorator from the @nestjs/platform-express package. This decorator accepts two arguments. First is the field name from the HTTP form that holds the file. In this example, the field name is file. The second input to the decorator is an options object. Basically, this object is optional and belongs to the type MulterOptions.
• Next, we use the UploadedFile decorator from the @nestjs/common package. Basically, this decorator extracts the file from the incoming request.
• Lastly, we simply the print the file object to the console. Basically, this displays the file meta-data.

3 – Upload an Array of Files

We can also upload an array of files with a single name. To do so, NestJS provides the FilesInterceptor. Notice the plural files.

Below is an example for the same:

@Post('files-upload')
@UseInterceptors(FilesInterceptor('files'))
uploadFiles(@UploadedFiles() files: Array<Express.Multer.File>) {
    console.log(files);
}

The FilesInterceptor takes three input. First is the fieldName, maxCount (defining the max number of files) and options. The UploadedFiles decorator helps extract files from the request object. Again, note the plural files.

There is another way to upload an array of files using NestJS. It is by using the AnyFilesInterceptor. See below example:

@Post('any-files-upload')
@UseInterceptors(AnyFilesInterceptor())
uploadAnyFiles(@UploadedFiles() files: Array<Express.Multer.File>) {
    console.log(files);
}

With this, we can use any arbitrary key name for the files. This decorator can also accept the options object.

4 – NestJS Multiple File Upload

We can also upload multiple files in NestJS with each file having a different field name key. This is done by using the FileFieldsInterceptor(). See below example:

@Post('multiple-files-upload')
@UseInterceptors(FileFieldsInterceptor([
    {name: 'file1', maxCount: 1},
    {name: 'file2', maxCount: 2}
]))
uploadMultipleFiles(@UploadedFiles() files: {file1? : Express.Multer.File[], file2? : Express.Multer.File[]}) {
    console.log(files);
}

The FileFieldsInterceptor decorator takes two arguments:

• First is the uploadedFields which is an array of objects. Each object specifies a name property with a string value. This value is the fieldName. Here, the field names are file1 and file2. Also, there is the optional maxCount field.
• Second is the options object for the MulterOptions.

We extract the files using the @UploadedFiles() decorator and finally display the file objects to the console.

Conclusion

With this, we have successfully learnt how to perform NestJS File Upload using the built-in multer package. We also looked at how we can upload an array of files and also multiples files.

The code for this post is available on Github.

In the next post, we will look at how to stream files using NestJS.

If you have any queries or comments, please feel free to mention in the comments section below.