Upload dynamic multiple files in Nest JS

ONLINECAST

3 min read

·

05-10-2024

9

0

Share

Uploading Dynamic Multiple Files in NestJS: A Comprehensive Guide

Uploading multiple files dynamically is a common requirement in web applications. This article will guide you through the process of implementing this feature in a NestJS application. We'll cover essential concepts, provide code examples, and explore best practices to ensure a smooth and efficient file upload experience.

Understanding the Challenge

Imagine you're building a platform where users can create projects. Each project requires uploading multiple images, potentially with varying file types and sizes. How can you handle this dynamically, allowing users to upload files without a predetermined limit?

Scenario: Project Image Uploads

Let's consider a simplified scenario where users can create projects and upload images for each. We'll use NestJS with the multer package for file handling.

Original Code (Simplified):

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

@Controller('projects')
export class ProjectsController {
  @Post()
  @UseInterceptors(FileInterceptor('images', {
    storage: diskStorage({
      destination: './uploads',
      filename: (req, file, cb) => {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, `${file.originalname}-${uniqueSuffix}`);
      },
    }),
  }))
  async createProject(@UploadedFiles() images: Express.Multer.File[]) {
    // Process images and create the project
    // ...
  }
}

Analysis:

This code defines a createProject endpoint that accepts an array of images (@UploadedFiles()) using the FileInterceptor. The multer configuration stores uploaded files in the uploads directory with unique filenames.

Dynamic Upload Implementation:

To handle dynamic multiple uploads, we need to modify the code to allow users to add and remove file input fields. This can be achieved using JavaScript on the frontend, creating new input fields as needed.

Frontend (Simplified):

<form id="projectForm">
  <div id="fileInputs">
    <input type="file" name="images[]" accept="image/*">
  </div>
  <button type="button" onclick="addFileInput()">Add Image</button>
  <button type="submit">Create Project</button>
</form>

<script>
  function addFileInput() {
    const fileInputs = document.getElementById('fileInputs');
    const newInput = document.createElement('input');
    newInput.type = 'file';
    newInput.name = 'images[]';
    newInput.accept = 'image/*';
    fileInputs.appendChild(newInput);
  }
</script>

Backend (Modified):

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

@Controller('projects')
export class ProjectsController {
  @Post()
  @UseInterceptors(FileInterceptor('images', {
    storage: diskStorage({
      destination: './uploads',
      filename: (req, file, cb) => {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, `${file.originalname}-${uniqueSuffix}`);
      },
    }),
  }))
  async createProject(@UploadedFiles() images: Express.Multer.File[]) {
    // Process images and create the project
    // ...
  }
}

Explanation:

• Frontend: The HTML code defines a form with an initial file input field. The addFileInput function dynamically creates new input fields for additional image uploads.
• Backend: The NestJS controller remains unchanged, accepting the multiple uploaded files as an array (images: Express.Multer.File[]).

Key Considerations:

• File Size Limits: Configure multer to limit file sizes to prevent server overload.
• File Types: Restrict allowed file types using the fileFilter option in multer.
• Validation: Implement backend validation to ensure uploaded files meet the required criteria.
• Security: Sanitize filenames and implement proper security measures to prevent vulnerabilities.
• Error Handling: Handle potential errors during upload, such as exceeding file size limits or invalid file types.

Best Practices:

• Asynchronous File Processing: Use asynchronous operations for file uploads to avoid blocking the main thread.
• Progress Tracking: Provide visual feedback to users on upload progress using AJAX or WebSockets.
• Database Integration: Store file metadata (filename, size, type, etc.) in your database for efficient management and retrieval.
• File Storage: Consider using cloud storage services like AWS S3 for scalability and reliability.

Further Enhancements:

• File Preview: Display thumbnails or previews of uploaded files before submission.
• Drag-and-Drop: Implement drag-and-drop functionality for a more user-friendly upload experience.
• Image Optimization: Use libraries like sharp to optimize images for web display.

Conclusion:

By combining a dynamic frontend approach with the power of NestJS and multer, you can seamlessly implement multiple file uploads in your web applications. Remember to address security, validation, and performance considerations for a robust and user-friendly experience.

Resources:

• NestJS Documentation: https://docs.nestjs.com/
• Multer Documentation: https://www.npmjs.com/package/multer
• Sharp Documentation: https://sharp.pixelplumbing.com/