adias-file-uploader

File Uploader for Angular

• [x] Currently Support single file upload
• [x] Set Custom File Url After Upload
• [x] Transparent Uploader
• [x] Multiple File Uploader

see Demo here

Example:

app.module.ts

import { FileUploaderModule } from "adias-file-uploader";

FileUploaderModule.forRoot({
  endPoint: "https://api.example.com/api/upload"
});

OR

FileUploaderModule.forRoot({
  endPoint: "/upload"
});

app.component.html

<div ngxFilePicker (uploadSuccess)="onUploadSuccess($event)"></div>

OR

Custom file url can be also used

<div ngxFilePicker [fileUrl]="uploadedFileUrl" (uploadSuccess)="onUploadSuccess($event)"></div>

OR

For Transparent File uploader

<div ngxFilePicker transparent (uploadSuccess)="onUploadSuccess($event)"></div>

OR

For Multiple File upload

<div ngxFilePicker transparent multiple (uploadMultiSuccess)="onUploadSuccess($event)" (uploadFailed)="onUploadFail($event)"></div>

Events

• uploadSuccess (Output):

_function launched after picture successfully uploaded.

The value returned in $event.

app.component.ts

 onUploadSuccess(e:  FilePickerRespnse) {
  console.log("fileUrl ===", e.fileUrl);
  console.log("fileName ===", e.fileName);
  console.log("fileSize ===", e.fileSize);
 }

Nestjs

controller.ts

  @Post()
  @AllowWithoutToken()
  @UseInterceptors(FilesInterceptor('files'))
  async uploadAvatar(@UploadedFiles() files: S3Response[]) {
    return files.map(file => {
      return {
        fileUrl: buildFileUrl(file.key),
        fileName: file.key,
        fileSize: file.size,
        fileType: file.mimetype,
      };
    });
  }

s3.service.ts

import { Injectable, Logger } from "@nestjs/common";
import {
  MulterModuleOptions,
  MulterOptionsFactory
} from "@nestjs/platform-express";
import * as AWS from "aws-sdk";
import * as Express from "express";
import * as Multer from "multer";
import * as MulterS3 from "multer-s3";
import { Random } from "random-js";

const random = new Random();
@Injectable()
export class S3Service implements MulterOptionsFactory {
  private s3: any;
  private readonly FILE_LIMIT_SIZE = 3145728; // 사용자 프로필 이미지는 3MB 제한
  config = {
    acesssKeyId: acesssKeyId,
    bucket: bucket,
    secretAccessKey: secretAccessKey
  };
  constructor() {
    this.s3 = new AWS.S3();

    AWS.config.update({
      accessKeyId: acesssKeyId,
      secretAccessKey: secretAccessKey
    });
  }

  // CallBack 함수로, NestJS의 MulterModule에 사용될 MulterModuleOption을 리턴한다.
  createMulterOptions(): MulterModuleOptions | Promise<MulterModuleOptions> {
    const bucket: string = this.config.bucket;
    const acl: string = "public-read";

    const multerS3Storage = MulterS3({
      s3: this.s3,
      bucket,
      //   acl,
      metadata: (req, file, cb) => {
        cb(null, { fieldName: file.fieldname });
      },
      key: (req, file, cb) => {
        cb(
          null,
          `${Date.now().toString()}-${String(file.originalname).replace(
            /[&\/\\#, +()$~%'":*?<>{}]/g,
            "_"
          )}`
        );
      }
    });

    return {
      storage: multerS3Storage,
      fileFilter: this.fileFilter,
      limits: {
        fileSize: this.FILE_LIMIT_SIZE
      }
    };
  }

  public fileFilter(
    req: Express.Request,
    file: Multer.File,
    cb: (error: Error | null, acceptFile: boolean) => void
  ) {
    if (file.mimetype.match(/\/(jpg|jpeg|png|gif)$/)) {
      cb(null, true);
    } else {
      Logger.log(`No! ${JSON.stringify(file)}`);
      cb(new Error("unsupported file"), false);
    }
  }
}