Step 1: Install Nest.js CLI

To get started, install the Nest.js CLI globally:

npm install -g @nestjs/cli

Step 2: Install Type Definitions for Multer

Next, install the type definitions for Multer, which is used for file uploads:

npm install --save-dev @types/multer

What is Multer?

Multer is a Node.js middleware specifically designed to handle multipart/form-data, which is mainly used for file uploads.

Step 3: Install Sharp for Image Processing

Install the Sharp module, which facilitates image processing:

npm install sharp

What is Sharp?

Sharp is a fast Node.js library aimed at converting large images into smaller, web-friendly formats like JPEG, PNG, WebP, GIF, and AVIF, in various dimensions. Besides resizing, it supports operations like rotation, extraction, compositing, and gamma correction.

Step 4: Register the Multer Module

In your app.module.ts, register the Multer module:

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

import { AppController } from './app.controller';

import { AppService } from './app.service';

import { MulterModule } from '@nestjs/platform-express';

@Module({

imports: [MulterModule.register()],

controllers: [AppController],

providers: [AppService],

})

export class AppModule {}

Step 5: Set Up the Pipes Directory

Create a pipes folder in the src directory and add an image.pipe.ts file. Your folder structure should resemble this:

├── dist

├── node_modules

├── public/

│ └── images

├── src/

│ ├── pipes/

│ │ └── image.pipe.ts

│ ├── app.controller.ts

│ ├── app.service.ts

│ ├── app.module.ts

│ └── main.ts

├── .eslintrc.js

├── .gitignore

├── .prettierrc

├── nest-cli.json

├── package-lock.json

├── package.json

├── tsconfig.build.json

└── tsconfig.json

Step 6: Create the Upload Endpoint

In the app.controller.ts, set up the "upload" endpoint:

import {

Controller,

Post,

UseInterceptors,

UploadedFile,

} from '@nestjs/common';

import { AppService } from './app.service';

import { FileInterceptor } from '@nestjs/platform-express';

import { ImagePipe } from './pipes/image.pipe';

@Controller()

export class AppController {

constructor(private readonly appService: AppService) {}

@Post('upload')

@UseInterceptors(FileInterceptor('image'))

async uploadFile(@UploadedFile(ImagePipe) file: Express.Multer.File) {

console.log('Your file has been successfully saved!');

return file;

}

}

Explanation of the Code:

Here, we define the AppController class, which is essential for managing HTTP requests in Nest.js. The @Post("upload") endpoint is triggered when a file is uploaded via Postman. The UseInterceptors decorator specifies the middleware behavior for this endpoint, utilizing the FileInterceptor to handle the file uploads.

Step 7: Create the Custom Image Pipe

Now, let's implement our custom ImagePipe, which will adhere to the PipeTransform interface:

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

import { accessSync } from 'node:fs';

import { parse, join } from 'path';

import * as sharp from 'sharp';

@Injectable()

export class ImagePipe implements PipeTransform {

async transform(image: Express.Multer.File): Promise<string> {

const pathToSave = 'public/images';

try {

accessSync(pathToSave);

const imageType = image.mimetype.split('/')[1];

const originalName = parse(image.originalname).name;

const filename = Date.now() + '-' + originalName + .${imageType};

// Image processing magic

await sharp(image.buffer)

.resize({ width: 200, height: 200, fit: 'fill' })

.toFile(join(pathToSave, filename));

// End of magic

return filename;

} catch (err) {

console.error('Error', err);

}

}

}

Code Breakdown:

The ImagePipe class implements the PipeTransform interface, which allows for custom pipe creation in Nest.js. The transform method receives an uploaded image and processes it, ultimately returning a filename for storage.