Next Phenomenal Microbrewery

    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);
        }
      }
    }

    Install

    npm i adias-file-uploader

    DownloadsWeekly Downloads

    1

    Version

    3.0.6

    License

    MIT

    Unpacked Size

    285 kB

    Total Files

    32

    Last publish

    Collaborators

    • akash-gupta