Upload files

Ts.ED supports now the uploading files by default. We use Multer module to handle multipart/form-data from request.

• Kit Multer

TIP

Originally, multer is provided by Express.js, but Ts.ED implements a multer wrapper to support Koa.js platform based on the official @koa/multer module.

Configuration

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

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

@Configuration({
  multer: {
    dest: `./../uploads`
    // see multer options
  }
})
export class Server {}

Live example:

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.
  • 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).
• fileFilter (Function): Optional function to control which files are uploaded. This is called for every file that is processed.

Usage

Single file

A single file can be injected to your endpoint by using the MultipartFile decorator like this:

import {MulterOptions, MultipartFile, PlatformMulterFile} from "@tsed/platform-http";
import {Post} from "@tsed/schema";
import {Controller} from "@tsed/di";

@Controller("/")
class MyCtrl {
  @Post("/file")
  private uploadFile1(@MultipartFile("file") file: PlatformMulterFile) {}

  @Post("/file")
  @MulterOptions({dest: "/other-dir"})
  private uploadFile2(@MultipartFile("file") file: PlatformMulterFile) {}
}

TIP

Many frontend code examples are available on the web and some of them don't work as expected. So, to help you, here is a short vanilla Javascript code 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
  });
}

Multiple files

For multiple files, just use PlatformMulterFile[] annotation type. Ts.ED will understand that you want to inject a list of files even if your consumer only sends you one:

import {MultipartFile, PlatformMulterFile} from "@tsed/platform-http";
import {Post} from "@tsed/schema";
import {Controller} from "@tsed/di";

@Controller("/")
class MyCtrl {
  @Post("/files")
  private uploadFile(@MultipartFile("files", 4) files: PlatformMulterFile[]) {
    // multiple files with 4 as limits
  }
}