Swagger upload file

I’m submitting a…

[ ] Regression 
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

After update to 4.x version, stops working uploading files in swagger ui

Expected behavior

File uploaded

Minimal reproduction of the problem with instructions

https://github.com/gulaandrij/nest-monorepo-swagger

1. yarn
2. nest start
3. go to http://localhost:3000/api
4. try to upload

What is the motivation / use case for changing the behavior?

Environment

Nest version: 6.7.2

 
For Tooling issues:
OS Version     : Linux 5.3
NodeJS Version : v13.1.0
YARN Version    : 1.19.2

[nartc]

Please double check the latest documentations on File Upload

Here’s a quick fix:

  @Post('upload')
  @ApiConsumes('multipart/form-data')
  @ApiBody({
    schema: {
      type: 'object',
      properties: {
        file: {
          type: 'string',
          format: 'binary',
        },
      },
    },
  })
  @UseInterceptors(FileInterceptor('file'))
  uploadFile(@UploadedFile('file') file) {
    console.log(file);
  }

You can always create a custom decorator like this:

import { ApiBody } from '@nestjs/swagger';

export const ApiFile = (fileName: string = 'file'): MethodDecorator => (
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor,
) => {
  ApiBody({
    schema: {
      type: 'object',
      properties: {
        [fileName]: {
          type: 'string',
          format: 'binary',
        },
      },
    },
  })(target, propertyKey, descriptor);
};

then use it:

  @Post('upload')
  @ApiConsumes('multipart/form-data')
  @ApiFile()
  @UseInterceptors(FileInterceptor('file'))
  uploadFile(@UploadedFile('file') file) {
    console.log(file);
  }

If your FileInterceptor() has a different fieldName like FileInterceptor('avatar') then adjust like so:

  @Post('upload')
  @ApiConsumes('multipart/form-data')
  @ApiFile('avatar')
  @UseInterceptors(FileInterceptor('avatar'))
  uploadFile(@UploadedFile() file) {
    console.log(file);
  }

Make sure to adjust your UploadedFile if you submit a FormData with many different values + file.

[goors]

I figured this one out after a long time:

ApiBody({
        type: 'multipart/form-data', /// this is redundant.
})

since you already have

@ApiConsumes("multipart/form-data")

Swagger generated code is ok. But Swagger UI will not work since multiple file upload is not supported yet.

So, in a fact you don’t really need seperate decorator you can just use

export class FileUploadDto {
  @ApiProperty({ type: "string", format: "binary" })
  file: any;
}

and then in your TS client you will just have new FormData() and then append files.

Both of these decorators generate Typescript code with function(model: Blob).

What a waste of time!!!

By far these @nestjs guys are so slow on to respond. They could saved me 5 days!