kzrfaisal / Angular File Uploader

Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.

Demo

https://kzrfaisal.github.io/#/afu

Install

npm i angular-file-uploader

Support

Support this package if it really helped you, send your support at Patreon.

Video Guide

Youtube | Angular File Uploader

Usage

• Bootstrap.min.css is required. Include

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  

  in your index.html.
• Import AngularFileUploaderModule inside your app.module.ts

  import { AngularFileUploaderModule } from "angular-file-uploader";
  

  @NgModule({
    imports: [
        ...,
        AngularFileUploaderModule,
        ...
    ]
  })
  

Example-1 ( with minimal configuration )

<angular-file-uploader
      [config]="afuConfig">
</angular-file-uploader>

afuConfig = {
    uploadAPI: {
      url:"https://example-file-upload-api"
    }
};

Example-2 ( with all available configuration )

<angular-file-uploader 
      [config]="afuConfig"
      [resetUpload]=resetVar
      (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

afuConfig = {
    multiple: false,
    formatsAllowed: ".jpg,.png",
    maxSize: "1",
    uploadAPI:  {
      url:"https://example-file-upload-api",
      method:"POST",
      headers: {
     "Content-Type" : "text/plain;charset=UTF-8",
     "Authorization" : `Bearer ${token}`
      },
      params: {
        'page': '1'
      },
      responseType: 'blob',
    },
    theme: "dragNDrop",
    hideProgressBar: true,
    hideResetBtn: true,
    hideSelectBtn: true,
    hideSelectBtn: true,
    fileNameIndex: true,
    replaceTexts: {
      selectFileBtn: 'Select Files',
      resetBtn: 'Reset',
      uploadBtn: 'Upload',
      dragNDropBox: 'Drag N Drop',
      attachPinBtn: 'Attach Files...',
      afterUploadMsg_success: 'Successfully Uploaded !',
      afterUploadMsg_error: 'Upload Failed !',
      sizeLimit: 'Size Limit'
    }
};

A Better Way to reset the module

You have seen that by using 'resetUpload' property, you can reset the module easily, however if you need to reset more than one time, there's a better way of doing that( bcoz in 'resetUpload' property, you have to make it as false in order to use it again):-

Example-3

<angular-file-uploader #fileUpload1
      [config]="afuConfig"
      [resetUpload]=resetVar
      (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

• Assign one local reference variable (here 'fileUpload1') to the component.
• Now use this local reference variable in your xyz.component.ts file.

      @ViewChild('fileUpload1')
      private fileUpload1:  AngularFileUploaderComponent;
  

  • Remember to import ViewChild and AngularFileUploaderComponent properly in your component.

      import { ViewChild } from '@angular/core';
      import { AngularFileUploaderComponent } from "angular-file-uploader";
    

• That's it.....all done, now just use

      this.fileUpload1.resetFileUpload();
  

  to reset the module hassle-free anytime.

Styling:

Following classes are available for customisation :

Include them in your global css class (src/styles.css)

Use '!important' if something doesn't works

• .afu-select-btn {}
• .afu-reset-btn {}
• .afu-upload-btn {}
• .afu-dragndrop-box {}
• .afu-dragndrop-text {}
• .afu-constraints-info {}
• .afu-valid-file {}
• .afu-invalid-file {}
• .afu-progress-bar {}
• .afu-upload-status {}
• .afu-attach-pin {}

Points to note:

• Files are uploaded in FormData format.

Coming Soon:

• More themes.
• More customization options.

For Versions < 6.x : Click Here !

For Versions < 5.x : Click Here !

For Versions =< 4.0.12 :

• Replace AngularFileUploaderModule and AngularFileUploaderComponent with FileUploadModule and FileUploadComponent respectively.

For Versions < 2.x : Click Here !

For Versions < 6.x :

Angular file uploader is an Angular 2/4/5/6 file uploader module with Real-Time Progress Bar, Angular Universal Compatibility and multiple themes which includes Drag and Drop and much more.

Demo

https://kzrfaisal.github.io/#/afu

Install

npm i angular-file-uploader

Usage

• Bootstrap.min.css is required. Include

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  

  in your index.html.
• Import AngularFileUploaderModule inside your app.module.ts

  import { AngularFileUploaderModule } from "angular-file-uploader";
  

  @NgModule({
    imports: [
        ...,
        AngularFileUploaderModule,
        ...
    ]
  })
  

Example-1 ( with minimal configuration )

<angular-file-uploader
      [config]="afuConfig">
</angular-file-uploader>

afuConfig = {
    uploadAPI: {
      url:"https://example-file-upload-api"
    }
};

Example-2 ( with all available configuration )

<angular-file-uploader 
      [config]="afuConfig"
      [resetUpload]=resetVar
      (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

afuConfig = {
    multiple: false,
    formatsAllowed: ".jpg,.png",
    maxSize: "1",
    uploadAPI:  {
      url:"https://example-file-upload-api",
      method:"POST",
      headers: {
     "Content-Type" : "text/plain;charset=UTF-8",
     "Authorization" : `Bearer ${token}`
      }
    },
    theme: "dragNDrop",
    hideProgressBar: true,
    hideResetBtn: true,
    hideSelectBtn: true,
    replaceTexts: {
      selectFileBtn: 'Select Files',
      resetBtn: 'Reset',
      uploadBtn: 'Upload',
      dragNDropBox: 'Drag N Drop',
      attachPinBtn: 'Attach Files...',
      afterUploadMsg_success: 'Successfully Uploaded !',
      afterUploadMsg_error: 'Upload Failed !'
    };
};

A Better Way to reset the module

You have seen that by using 'resetUpload' property, you can reset the module easily, however if you need to reset more than one time, there's a better way of doing that( bcoz in 'resetUpload' property, you have to make it as false in order to use it again):-

Example-3

<angular-file-uploader #fileUpload1
      [config]="afuConfig"
      [resetUpload]=resetVar
      (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

• Assign one local reference variable (here 'fileUpload1') to the component.
• Now use this local reference variable in your xyz.component.ts file.

      @ViewChild('fileUpload1')
      private fileUpload1:  AngularFileUploaderComponent;
  

  • Remember to import ViewChild and AngularFileUploaderComponent properly in your component.

      import { ViewChild } from '@angular/core';
      import { AngularFileUploaderComponent } from "angular-file-uploader";
    

• That's it.....all done, now just use

      this.fileUpload1.resetFileUpload();
  

  to reset the module hassle-free anytime.

Styling:

Following classes are available for customisation :

Include them in your global css class (src/styles.css)

Use '!important' if something doesn't works

• .afu-select-btn {}
• .afu-reset-btn {}
• .afu-upload-btn {}
• .afu-dragndrop-box {}
• .afu-dragndrop-text {}
• .afu-constraints-info {}
• .afu-valid-file {}
• .afu-invalid-file {}
• .afu-progress-bar {}
• .afu-upload-status {}
• .afu-attach-pin {}

Points to note:

• Files are uploaded in FormData format.

Coming Soon:

• More themes.
• More customization options.

For Versions < 5.x :

Angular file uploader is an Angular 2/4/5/6 file uploader module with Real-Time Progress Bar, Angular Universal Compatibility and multiple themes which includes Drag and Drop and much more.

Demo

https://kzrfaisal.github.io/#/afu

Install

npm i angular-file-uploader

Usage

• Bootstrap.min.css is required. Include

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  

  in your index.html.
• Import AngularFileUploaderModule inside your app.module.ts

  import { AngularFileUploaderModule } from "angular-file-uploader";
  

  @NgModule({
    imports: [
        ...,
        AngularFileUploaderModule,
        ...
    ]
  })
  

Example-1 ( with minimal configuration )

<angular-file-uploader
      [config]="afuConfig">
</angular-file-uploader>

afuConfig = {
    uploadAPI: {
      url:"https://example-file-upload-api"
    }
};

Example-2 ( with all available configuration )

<angular-file-uploader 
      [config]="afuConfig"
      [resetUpload]=resetVar
      (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

afuConfig = {
    multiple: false,
    formatsAllowed: ".jpg,.png",
    maxSize: "1",
    uploadAPI:  {
      url:"https://example-file-upload-api",
      method:"POST",
      headers: {
     "Content-Type" : "text/plain;charset=UTF-8",
     "Authorization" : `Bearer ${token}`
      }
    },
    theme: "dragNDrop",
    hideProgressBar: true,
    hideResetBtn: true,
    hideSelectBtn: true
};

A Better Way to reset the module

You have seen that by using 'resetUpload' property, you can reset the module easily, however if you need to reset more than one time, there's a better way of doing that( bcoz in 'resetUpload' property, you have to make it as false in order to use it again):-

Example-3

<angular-file-uploader #fileUpload1
      [config]="afuConfig"
      [resetUpload]=resetVar
      (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

• Assign one local reference variable (here 'fileUpload1') to the component.
• Now use this local reference variable in your xyz.component.ts file.

      @ViewChild('fileUpload1')
      private fileUpload1:  AngularFileUploaderComponent;
  

  • Remember to import ViewChild and AngularFileUploaderComponent properly in your component.

      import { ViewChild } from '@angular/core';
      import { AngularFileUploaderComponent } from "angular-file-uploader";
    

• That's it.....all done, now just use

      this.fileUpload1.resetFileUpload();
  

  to reset the module hassle-free anytime.

Styling:

Following classes are available for customisation :

Include them in your global css class (src/styles.css)

Use '!important' if something doesn't works

• .afu-select-btn {}
• .afu-reset-btn {}
• .afu-upload-btn {}
• .afu-dragndrop-box {}
• .afu-dragndrop-text {}
• .afu-constraints-info {}
• .afu-valid-file {}
• .afu-invalid-file {}
• .afu-progress-bar {}
• .afu-upload-status {}
• .afu-attach-pin {}

Points to note:

• Files are uploaded in FormData format.

Coming Soon:

• More themes.
• More customization options.

For Versions < 2.x :

Example-1

<angular-file-uploader
    [uploadAPI]="'https://example-file-upload-api'">
</angular-file-uploader>

Example-2

<angular-file-uploader 
    [multiple]="true" 
    [formatsAllowed]="'.jpg,.png'" 
    [maxSize]="5" 
    [uploadAPI]="'https://example-file-upload-api'"
    [resetUpload]=resetVar
    (ApiResponse)="DocUpload($event)"
    [hideProgressBar]="false">
</angular-file-uploader>

You have seen that by using 'resetUpload' property, you can reset the module easily, however if you need to reset more than one time, there's a better way of doing that( bcoz in 'resetUpload' property, you have to make it as false in order to use it again):-

Example-3

<angular-file-uploader #fileUpload1
    [multiple]="true" 
    [formatsAllowed]="'.jpg,.png'" 
    [maxSize]="5" 
    [uploadAPI]="'https://example-file-upload-api'"
    [resetUpload]=resetVar
    (ApiResponse)="DocUpload($event)"
    [hideProgressBar]="false">
</angular-file-uploader>

• Assign one local reference variable (here 'fileUpload1') to the component.
• Now use this local reference variable in your xyz.component.ts file.

      @ViewChild('fileUpload1')
      private fileUpload1:  FileUploadComponent;
  

  • Remember to import ViewChild and FileUploadComponent properly in your component.

      import { ViewChild } from '@angular/core';
      import { FileUploadComponent } from "angular-file-uploader";
    

• That's it.....all done, now just use

      this.fileUpload1.resetFileUpload();
  

  to reset the module hassle-free anytime.

Points to note:

• Files are uploaded in FormData format.