adias-file-uploader
TypeScript icon, indicating that this package has built-in type declarations

3.0.6 • Public • Published

adias-file-uploader

npm version


File Uploader for Angular

  • Currently Support single file upload
  • Set Custom File Url After Upload
  • Transparent Uploader
  • 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() filesS3Response[]) {
    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);
    }
  }
}

Package Sidebar

Install

npm i adias-file-uploader

Weekly Downloads

0

Version

3.0.6

License

MIT

Unpacked Size

285 kB

Total Files

32

Last publish

Collaborators

  • akash-gupta