NestJS: Type-safe File Uploads

[giscus[bot]]

NestJS: Type-safe File Uploads

Learn how to apply Swagger decorators for type-safe file upload endpoints.

https://notiz.dev/blog/type-safe-file-uploads

[OsmodiarSimpson]

I've been struggling to make some NestJS things work for long time. Getting good examples about specific topics was hard, until I found your posts. Thank you very much for the clear and detailed explanations!

[johnyung88]

Thanks very much for your blog, I gain a clear understanding of how NestJS file upload and OpenAPI work together.

A quick question, when using FileFieldsInterceptor, how can I access individual items within files.

In FilesInterceptors, I can loop throught files

async uploadMultipleFiles(
    @UploadedFiles() files: Array<Express.Multer.File>,
  ) {
    const response = [];
    files.forEach((file) => {
      const fileReponse = {
        originalname: file.originalname,
        newfilename: file.filename,
      };
      response.push(fileReponse);
    });
    return response;
  }

The same code would generate this error in FileFieldsInterceptor

[Nest] 24176 - 11/23/2021, 8:27:32 PM ERROR [ExceptionsHandler] files is not iterable
TypeError: files is not iterable

I have to do this to make FileFieldsInterceptor works for me

@Post('uploadFields')
  @ApiConsumes('multipart/form-data')
  @UseInterceptors(
    FileFieldsInterceptor(
      [
        // 👈  multiple files with different field names
        { name: 'avatar', maxCount: 1 },
        { name: 'background', maxCount: 1 },
      ],
      {
        storage: diskStorage({
          destination: getFileUploadFolder,
          filename: randomizedFileName,
        }),
        fileFilter: imageFileFilter,
      },
    ),
  )
  @ApiBody({
    schema: {
      type: 'object',
      properties: {
        // 👈 matches field names
        avatar: {
          type: 'string',
          format: 'binary',
        },
        background: {
          type: 'string',
          format: 'binary',
        },
      },
    },
  })
  async uploadFields(
    @UploadedFiles()
    files: {
      avatar?: Express.Multer.File[];
      background?: Express.Multer.File[];
    },
  ) {
    const response = [];
    files.avatar.forEach((file) => {
      const fileReponse = {
        originalname: file.originalname,
        newfilename: file.filename,
      };
      response.push(fileReponse);
    });

    files.background.forEach((file) => {
      const fileReponse = {
        originalname: file.originalname,
        newfilename: file.filename,
      };
      response.push(fileReponse);
    });
    return response;
  }

TIA

[JCLMAQ]

Thank you very much for this good example.
Perhaps, you could help me...
I did try to implement it within a nx Monorepos, but I get this error:
TS2503: Cannot find namespace 'Express'.
9 | files: Express.Multer.File | Express.Multer.File[],
10 | metadata: ArgumentMetadata,

11 | ): Express.Multer.File | Express.Multer.File[] {
| ^^^^^^^
12 | if (files === undefined || files === null) {
13 | throw new BadRequestException('Validation failed (file expected)');
14 | }
Do you have any idea how to solve ?

[marcjulian]

Hi @JCLMAQ, can you try adding Multer as types in your tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["node", "Multer"], // here
    "emitDecoratorMetadata": true,
    "target": "es2015"
  },
  "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
  "include": ["**/*.ts"]
}

Found about this solution in this issue DefinitelyTyped/DefinitelyTyped#47780 (comment)

[Prooksius]

Thank s a lot. Good example. Official documentation lacks such info.

[susahin80]

Thank you for this blog. I have a question, is it possible to to extend ApiImageFile to ApiImageFiles?

[ducminh98-dev]

How i can validate file size ? I can't get file size in fileFilter.

[Prooksius]

 @Injectable()
 export class ParseFile implements PipeTransform {

      transform(
         files: Express.Multer.File | Express.Multer.File[], 
         metadata: ArgumentMetadata 
      ): Express.Multer.File | Express.Multer.File[] {

      console.log('files', files);
      if (files === undefined || files === null) {
           throw new BadRequestException('Validation failed (file expected)');
      }

      if (Array.isArray(files) && files.length === 0) {
          throw new BadRequestException('Validation failed (files expected)');
      }

      return files;
    }
  }

1. This is an example of pipe ParseFile.
   Here I check whether file(s) exists. You can add a check for the file size. Just look into console log of file and you will find size parameter.

2. Use this pipe in controller like this:

    @Controller('files')
    export class FilesController {
       constructor(private readonly filesService: FilesService) {}
   
      @Post('images')
      async uploadImages(
          @Request() { query },
          @UploadedFiles(ParseFile) files: Express.Multer.File[],
      ) {
          console.log('upload images');
   
          return await this.filesService.create('images', query.path, files);
    }
   

[ducminh98-dev]

thank you so much <3.

[Prooksius]

https://docs.nestjs.com/techniques/file-upload#file-validation - here also link to official documentation, where it is implemented in a slightly different way. You may use it.

[blobmold]

What if you got a dto and fileupload in the same endpoint?