A. Upload Satu File

Pada aplikasi kita membutuhkan fitur upload file seperti gambar, dokumen, dan lain-lain. Kita akan tambahkan fitur ini pada project ini. NestJs sendiri sudah menyediakan module untuk fitur ini dengan package multer. Dengan menggunakan Multer, kita dapat mengunggah file dari klien (client) ke server dengan lebih efisien.

Note

Gunakan multipart/form-data pada body request pada saat mengirimkan file. Jika menggunakan Postman pilih body kemudian form-data.

Selanjutkan kita mulai membuat kode untuk menambahkan fitur ini.

1. Instalasi Type Multer

Karena kita menggukana TypeScript, kita instalasi dahulu type/multer

terminal

npm i -D @types/multer

2.Buat controller fitur upload

Pada fitur ini, kita hanya akan membaut controller tanpa module dan service

terminal

npx nest g controller app/upload

3. Buat endpoint upload file

upload.controller.ts

import {
  Controller,
  Delete,
  HttpException,
  HttpStatus,
  Param,
  Post,
  UploadedFile,
  UploadedFiles,
  UseGuards,
  UseInterceptors,
} from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { ResponseSuccess } from 'src/interface/response';
import BaseResponse from 'src/utils/response/base.response';
import { JwtGuard } from '../auth/auth.guard';

@UseGuards(JwtGuard)
@Controller('upload')
export class UploadController extends BaseResponse {
  constructor() {
    super();
  }
  @UseInterceptors(
    FileInterceptor('file', {
      storage: diskStorage({
        destination: 'public/uploads',
        filename: (req, file, cb) => {
          const fileExtension = file.originalname.split('.').pop();
          cb(null, `${new Date().getTime()}.${fileExtension}`);
        },
      }),
    }),
  )
  @Post('file')
  async uploadFile(
    @UploadedFile() file: Express.Multer.File,
  ): Promise<ResponseSuccess> {
    try {
      const url = `${process.env.BASE_SERVER_URL}/uploads/${file.filename}`;
      return this._success('OK', {
        file_url: url,
        file_name: file.filename,
        file_size: file.size,
      });
    } catch (err) {
      throw new HttpException('Ada Kesalahan', HttpStatus.BAD_REQUEST);
    }
  }

}

• Decorator @UseInterceptors akan menerapkan FileInterceptor(...) dengan paramter file maka dari Postman nama dari field yang dikirim pada form-data adalah `file``.

Note

decorator FileInterceptor menerima dua argument, yaitu:

• fieldName: nama field sesuai dengan yang dikirim dari client baik melalui Postman atau form HTML.
• optional: objek-objek opsional yang disediakan oleh Multer melalui MulterOptions, seperti misalnya penamaan file, direktory dan lainnya.

• Folder public/uploads adalah folder tempat disimpan file yang di upload.
• Pada bagian filename , kita memberikan nama baru untuk file yang di upload dengna nama waktu ketika di upload ditambah extensi dari file yang di upload , contoh nama yang akan dibuat seperti 1690640378860.pdf
• Response yang diberikan pada client yaitu
  • url = lokasi untuk mengakses file dari client
  • file_name = nama file yang dibuat
  • size = ukuran dari file yang di upload

4. Pengujian pada Postman

5. Hasil Upload