Upload gambar pada Framwork Nest JS

Pada tutorial kali ini kita akan belajar cara mengupload File berupa gambar menggunakan Framework NestJS dan menseting supaya gambar bisa di akses secara public menggunakan HTTP

 

Prasyarat

• Pastikan kita sudah mengerti Cara kerja Framework Nest JS

 

Buat Module untuk Upload Gambar

Pada contoh kali ini saya akan membuat Module "upload-gambar" dengan menggunakan Nest CLI

npx nest g mo upload-gambar

 

Buat Service

Setelah membuat Module selanjutnya adalah membuat Service dengan nam yang sama dengan Module yaitu "upload-gambar"

npx nest g s upload-gambar

 

Buat fungsi upload pada service

Kemudian buatlah fungsi yang bertujuan untuk menyimpan path lokasi dari gambar yang di upload di dalam service.

import { Injectable } from '@nestjs/common';

@Injectable()
export class UploadGambarService {

    /**
     *
     * @param path
     */
    async upload(path: string) {

        // Kita bisa membuat fungsi untuk menyimpan lokasi path file disini

        return { statusCode: 200, path: path }
    }

}

pada fungsi upload di dalam class UploadGambarService diatas adalah hanya menampilkan lokasi path file saja, namun kita bisa juga menyimpan di dalam database tergantung dengan kebutuhan dari kita.

Install Multer

Kita akan menggunakan Multer untuk Filesystem di Nest JS

yarn add -D @types/multer

Buat Controller

Buat controller yang akan berguna sebagai Route yang akan langsung di akses menggunakan API.

Masukan perintah menggunakan Nest CLI

npx nest g co upload-gambar

perintah di atas akan membuat File "upload-gambar/upload-gambar.controller.ts"

import { Controller } from '@nestjs/common';

@Controller('upload-gambar')
export class UploadGambarController {}

Buat fungsi Upload di dalam Controller

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';

@Controller('upload-gambar')
export class UploadGambarController {

    @Post('upload')
    @UseInterceptors(FileInterceptor('file',{dest:'public/upload'}))
    async upload(@UploadedFile() file: Express.Multer.File){
        console.log(file)
    }

}

Pada fungsi upload di dalam controller di atas terdapat FileInterceptor yang di gunakan untuk mengolah request File oleh Multer.

Informasi File akan dimasukan ke dalam "@UploadedFile() file" dan kita bisa mengambil informasi File dengan "file"

Sekarang kita bisa mencoba melakukan upload file dengan menggunakan API dengan URL

/upload-gambar/upload

kita bisa mencoba API dengan method POST.

Jalankan Nest JS

Jalankan Nest JS dengan perintah

yarn start:dev

atau

npn run start:dev

Kemudian Test request menggunakan tools API Testing seperti Postman, Thunder Client. pada contoh ini saya menggunakan Thunder Client yang bisa langsung digunakan didalam Visual Studio Code.

 

   

Jika kita melakukan request upload File maka format file akan seperti gambar dibawah ini

   

File tersimpan di dalam folder public/upload dengan nama random dan tanpa Extension. untuk menambahkan extension bisa banyak cara, cara yang paling mudah adalah dengan mengkombinasi nama file dan extension. ubah code menjadi seperti

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';

@Controller('upload-gambar')
export class UploadGambarController {

    @Post('upload')
    @UseInterceptors(FileInterceptor('file',{
        dest:'public/upload',
        storage: diskStorage({
            destination:'public/upload',
            filename(req, file, cb) {
                return cb(null,file.originalname)
            },
        })
    }))
    async upload(@UploadedFile() file: Express.Multer.File){
        console.log(file)
    }

}

Kemudian coba test upload lagi seperti sebelumnya

 

pada gambar diatas file di simpan dengan original name.

Sampai saat ini kita berhasil mengupload file pada Framework Nest JS, selanjutnya adalah buat folder public supaya bisa di akses menggunakan HTTP.

Akses file menggunakan HTTP

Untuk mengakses file menggunakan HTTP kita harus mendaftarkan folder "public" supaya bisa di akses dari HTTP.

Install Server Static

yarn add @nestjs/serve-static

atau

npm install --save @nestjs/serve-static

Edit AppModule

Edit AppModule.ts dan tambahkan module ServerStatic

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UploadGambarModule } from './upload-gambar/upload-gambar.module';

@Module({
  imports: [
    UploadGambarModule,
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Jalankan Nest JS

yarn start:dev

Test Menggunakan Browser

Buka browser dan masukan URL "http://localhost:3000/upload/next.png"

 

 

Selamat Kita sudah berhasil membuat file bisa di akses menggunakan HTTP

Untuk menyimpan path gambar ke dalam database kita bisa meneruskan filepath ke dalam service yang sudah kita buat sebelumnya

 

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { UploadGambarService } from './upload-gambar.service';

@Controller('upload-gambar')
export class UploadGambarController {

    constructor(private uploadGambarService:UploadGambarService){}

    @Post('upload')
    @UseInterceptors(FileInterceptor('file',{
        dest:'public/upload',
        storage: diskStorage({
            destination:'public/upload',
            filename(req, file, cb) {
                return cb(null,file.originalname)
            },
        })
    }))
    async upload(@UploadedFile() file: Express.Multer.File){
        return await this.uploadGambarService.upload(file.path)
    }

}

Download Repository

https://github.com/mister-coding/example_nestjs

Branch : example_upload_gambar