# Multer

Multer is a package used by Express server to handle uploaded files. Ts.ED provides a package @tsed/multer with some decorators to use Multer on your Controller.

# Installation

Before using the you must install multer and @tsed/multipartfile module on your project:

npm install --save multer 
npm install --save @types/multer
npm install --save @tsed/multipartfiles
1
2
3

# Configure the File upload directory

By default the directory used is ${projetRoot}/uploads. You can configure another directory on your Server settings.

import {Configuration} from "@tsed/common";
import "@tsed/multipartfiles";
import "@tsed/platform-express";

const rootDir = __dirname;

@Configuration({
  rootDir,
  mount: {
    "/rest": `${rootDir}/controllers/**/**.js`
  },
  uploadDir: `${rootDir}/custom-dir`,
  componentsScan: [
    `${rootDir}/services/**/**.js`
  ],

  multer: {
    // see multer options
  }
})
export class Server {

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Options

  • dest (string): The destination directory for the uploaded files.
  • storage (StoreEngine): The storage engine to use for uploaded files.
  • limits (Object): An object specifying the size limits of the following optional properties. This object is passed to busboy directly, and the details of properties can be found on https://github.com/mscdex/busboy#busboy-methods.
    • fieldNameSize (number): Max field name size (Default: 100 bytes).
    • fieldSize (number): Max field value size (Default: 1MB).
    • fields (number): Max number of non- file fields (Default: Infinity).
    • fileSize (number): For multipart forms, the max file size (in bytes)(Default: Infinity).
    • files (number): For multipart forms, the max number of file fields (Default: Infinity).
    • parts (number): For multipart forms, the max number of parts (fields + files)(Default: Infinity).
    • headerPairs (number): For multipart forms, the max number of header key => value pairs to parse Default: 2000(same as node's http).
    • preservePath (boolean): Keep the full path of files instead of just the base name (Default: false).

# Example

Ts.ED uses Multer to handle file uploads. Single file can be injected like this:

import {Controller, Post} from "@tsed/common";
import {MulterOptions, MultipartFile} from "@tsed/multipartfiles";

@Controller("/")
class MyCtrl {

  @Post("/file")
  private uploadFile1(@MultipartFile("file") file: Express.Multer.File) {

  }

  @Post("/file")
  @MulterOptions({dest: "/other-dir"})
  private uploadFile2(@MultipartFile("file") file: Express.Multer.File) {

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

TIP

Many frontend code examples are available on the web and some of them don't work correctly. So here is a short example:

export async function loadFile(file) {
  const formData = new FormData();
  formData.append("file", file);

  await fetch(`/rest/upload`, {
    method: "POST",
    headers: {
      // don't set Content-Type: multipart/form-data. It's set automatically by fetch (same things with axios)
    },
    body: formData
  });
}
1
2
3
4
5
6
7
8
9
10
11
12

For multiple files, just add Array type annotation like this:

import {Controller, Post} from "@tsed/common";
import {MultipartFile} from "@tsed/multipartfiles";

@Controller("/")
class MyCtrl {
  @Post("/files")
  private uploadFile(@MultipartFile("files", 4) files: Express.Multer.File[]) {
    // multiple files with 4 as limits
  }
}
1
2
3
4
5
6
7
8
9
10

WARNING

Swagger spec (v2.0) doesn't support multiple files.

TIP

You can find a working example on Multer here.

← Serve static files →