kzrfaisal / angular-file-uploader

Angular file uploader is an Angular 2/4/5/6/7/8/9/10/11/12/13 + 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.

Angular file uploader is an Angular 2/4/5/6/7/8/9/10/11/12/13 + 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
      (fileSelected)="fileSelected($event)"
      (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',
      withCredentials: false,
    },
    theme: "dragNDrop",
    hideProgressBar: true,
    hideResetBtn: true,
    hideSelectBtn: true,
    hideSelectBtn: true,
    fileNameIndex: true,
    autoUpload: false,
    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'
    }
};

Properties	Description	Default Value
config : object	It's a javascript object. Use this to add custom constraints to the module. All available key-value pairs are given in example 2.For detailed decription refer the table below.	{}
fileSelected:EventEmitter	It will return the standard html onchange/drop event when the file is selected/dropped. Assign one custom function ,for example " fileSelected($event) " here, to catch the event.
ApiResponse:EventEmitter	It will return the response it gets back from the uploadAPI. Assign one custom function ,for example " docUpload($event) " here, where " $event " will contain the response from the api.
resetUpload : boolean	Give it's value as " true " whenever you want to clear the list of uploads being displayed. It's better to assign one boolean variable ('resetVar' here)to it and then change that variable's value. Remember to change 'resetVar' value 'true' to 'false' after every reset.	false

[config]	Description	Default Value
multiple : boolean	Set it as " true " for uploading multiple files at a time and as " false " for single file at a time.	false
formatsAllowed : string	Specify the formats of file you want to upload (ex: '.jpg,.png' for jpg and png), you can also specify formats like 'image/*' for all images, 'video/*' for videos , 'audio/*' for all audios and '*' for everything,	'*'
maxSize : number	Maximum size limit for files in MB.	20 MB
uploadAPI.url : string	Complete api url to which you want to upload.	undefined
uploadAPI.method : string	HTTP method to use for upload.	POST
uploadAPI.headers : {}	Provide headers in HttpClient Options here.	{}
uploadAPI.params : {}	Provide params in HttpClient Options here.	{}
uploadAPI.responseType : string	Provide responseType in HttpClient Options here.	'json'
uploadAPI.withCredentials : boolean	Provide withCredentials in HttpClient Options here.	false
theme : string	Specify the theme name you want to apply. Available Themes: ' dragNDrop ', ' attachPin '	If no theme or wrong theme is specified, default theme will be used instead.
hideProgressBar:boolean	Set it as " true " to hide the Progress bar.	false
hideResetBtn:boolean	Set it as " true " to hide the 'Reset' Button.	false
hideSelectBtn:boolean	Set it as " true " to hide the 'Select File' Button.	false
fileNameIndex:boolean	Set it as " false " to get the same file name as 'file' instead of 'file1', 'file2'.... in formdata object.	true
autoUpload:boolean	Set it as "true" to upload the files directly after files are selected without the need of Upload Button.	false
replaceTexts:object	Replace default texts with your own custom texts.	refer to example-2

---

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 !'
    };
};

Properties	Description	Default Value
config : object	It's a javascript object. Use this to add custom constraints to the module. All available key-value pairs are given in example 2.For detailed decription refer the table below.	{}
ApiResponse:EventEmitter	It will return the response it gets back from the uploadAPI. Assign one custom function ,for example " docUpload($event) " here, where " $event " will contain the response from the api.
resetUpload : boolean	Give it's value as " true " whenever you want to clear the list of uploads being displayed. It's better to assign one boolean variable ('resetVar' here)to it and then change that variable's value. Remember to change 'resetVar' value 'true' to 'false' after every reset.	false

[config]	Description	Default Value
multiple : boolean	Set it as " true " for uploading multiple files at a time and as " false " for single file at a time.	false
formatsAllowed : string	Specify the formats of file you want to upload.	'.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg'
maxSize : number	Maximum size limit for files in MB.	20 MB
uploadAPI.url : string	Complete api url to which you want to upload.	undefined
uploadAPI.method : string	HTTP method to use for upload.	POST
uploadAPI.headers : {}	Provide headers you need here.	{}
theme : string	Specify the theme name you want to apply. Available Themes: ' dragNDrop ', ' attachPin '	If no theme or wrong theme is specified, default theme will be used instead.
hideProgressBar:boolean	Set it as " true " to hide the Progress bar.	false
hideResetBtn:boolean	Set it as " true " to hide the 'Reset' Button.	false
hideSelectBtn:boolean	Set it as " true " to hide the 'Select File' Button.	false
replaceTexts:object	Replace default texts with your own custom texts.	refer to example-2

---

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

Properties	Description	Default Value
config : object	It's a javascript object. Use this to add custom constraints to the module. All available key-value pairs are given in example 2.For detailed decription refer the table below.	{}
ApiResponse:EventEmitter	It will return the response it gets back from the uploadAPI. Assign one custom function ,for example " docUpload($event) " here, where " $event " will contain the response from the api.
resetUpload : boolean	Give it's value as " true " whenever you want to clear the list of uploads being displayed. It's better to assign one boolean variable ('resetVar' here)to it and then change that variable's value. Remember to change 'resetVar' value 'true' to 'false' after every reset.	false

[config]	Description	Default Value
multiple : boolean	Set it as " true " for uploading multiple files at a time and as " false " for single file at a time.	false
formatsAllowed : string	Specify the formats of file you want to upload.	'.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg'
maxSize : number	Maximum size limit for files in MB.	20 MB
uploadAPI.url : string	Complete api url to which you want to upload.	undefined
uploadAPI.method : string	HTTP method to use for upload.	POST
uploadAPI.headers : {}	Provide headers you need here.	{}
theme : string	Specify the theme name you want to apply. Available Themes: ' dragNDrop ', ' attachPin '	If no theme or wrong theme is specified, default theme will be used instead.
hideProgressBar:boolean	Set it as " true " to hide the Progress bar.	false
hideResetBtn:boolean	Set it as " true " to hide the 'Reset' Button.	false
hideSelectBtn:boolean	Set it as " true " to hide the 'Select File' Button.	false
attachPinText:string	If you are 'attachPin' theme, then you can use it to set custom text.	'Attach supporting documents..'

---

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>

Properties	Description	Default Value
multiple : boolean	Set it as " true " for uploading multiple files at a time and as " false " for single file at a time.	false
formatsAllowed : string	Specify the formats of file you want to upload.	'.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg'
maxSize : number	Maximum size limit for files in MB.	20 MB
uploadAPI : string	Complete api url to which you want to upload.	undefined
ApiResponse:EventEmitter	It will return the response it gets back from the uploadAPI. Assign one custom function ,for example " docUpload($event) " here, where " $event " will contain the response from the api.
resetUpload : boolean	Give it's value as " true " whenever you want to clear the list of uploads being displayed. It's better to assign one boolean variable ('resetVar' here)to it and then change that variable's value. Remember to change 'resetVar' value 'true' to 'false' after every reset.	false
hideProgressBar : boolean	Set it as " true " to hide the Progress bar.	false

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.

angular-file-uploader's Issues

defineInjectable Not found

Hey.
How are you?
My name is Guy and I tried to implement your upload-file plugin in a project of mine.
Implementing It on an empty project was easy and worked beautifully but when I plugged it into a working project this message popped up:

WARNING in ./node_modules/angular-file-uploader/fesm5/angular-file-uploader.js
24:66-82 "export 'defineInjectable' was not found in '@angular/core'

And my app crushed.
I have an ng5 project.

The 'defineInjectable' does exists.
And the dependencies also is up to date.
Do you have any idea what could have went wrong?
Maybe it's a versioning issue?

Hope to hear from you soon.

Best regards,
Guy Reshef

typo in package.json

hello

in the scripts section there is a typo:
"build-afu":"ng build angular-fil-uploader"

this gives an error and should be:
"build-afu":"ng build angular-file-uploader"

thanks for the module 👍

configuration object issue - replaceTexts

Hi, I have been trying to reassign the default values in 'replaceTexts' object in [email protected], but the changes are not being detected at all.
Furthermore, when trying to use the latest version, the module is not being recognized at all, i.e. I cannot import the { AngularFileUploaderModule } from 'angular-file-uploader'

Problems with authorization headers

Hi, When I send the request with:
afuConfig = {
uploadAPI: {
url: 'https://xxxxxxxxxxx/xxxxxxxxxxx/storedFile/',
headers: {
"Content-Type" : "multipart/form-data; ",
"Authorization" : localStorage.getItem('authorization')
}
},
multiple: true,
maxSize: "1",
theme: "dragNDrop"
};
the URL is ok but it get me a bad response (No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 400).
What I can do?

Override or remove MessageText

Hello, I would like to override or hide the text
this.uploadMsgText = "Successfully Uploaded !";
with my own logic and with another language.

This is my code:

  afuConfig = {
      multiple: false,
      formatsAllowed: ".jpg,.png",
      maxSize: "1",
      uploadAPI:  {
        url:"https://file.io" // demo
      },
      theme: "dragNDrop",
      hideProgressBar: false,
      hideResetBtn: true,
      hideSelectBtn: false
  };

  DocUpload(env) {
    var obj = JSON.parse(env.response);
    console.log(obj);  // the API will return {"success":true/false,"message":"The files have errores", "data": {...}}
    if(obj.success)
      console.log('GO TO ANOTHER PAGE');
    else
      console.log('SHOW A DIV WITH SOME ERROR DESCRIPCION (FROM obj.message) AND LOAD obj.data');
  }

Thanks in advance

unknow defineInjectable

I'm using angular 5.2, showing error as unknow defineInjectable in angular core.
Working fine when I have changed to defineInjectable to Injectable.
please update the same in npm repo in angular-file-uploader/fesm5/angular-file-uploader.js

in line number 1:
import { Injectable, NgModule, defineInjectable, EventEmitter, Component, Input, Output } from '@angular/core'; should be import { Injectable, NgModule, Injectable, EventEmitter, Component, Input, Output } from '@angular/core';

in line number 19:

'AngularFileUploaderService.ngInjectableDef = defineInjectable({ factory: function' Should be
/** @nocollapse */ AngularFileUploaderService.ngInjectableDef = Injectable({ factory: function

Styling the progress bar

The progress bar appears to be very very small. Is there any specific ID or class on the progress bar so that i can style it? The upload happens too quickly for me to inspect and it appears that it's hidden on the DOM unless an actual upload is taking place.

How to hide buttons while uploading

Hello,

Can someone point me in the correct direction of documentation that explains how to hide the "Select File", "Reset" and "Upload" buttons and also get percentage value as uploading to change custom progress bar when the data transfer is happening? I can only see (ApiResponse)="fileUploaded($event)" as an event after the API returns.

Thank you.

Files are not getting selected in IE

Can anyone help on this . Files are not getting selected in IE

Does it upload files in chunks?

Can we use this to upload files in chunks and does it allow files with size in 1-2 gbs?

Add formData

Any help on add form-data in config or in any other place ?
I need to send id in url or in request but i can't do.
Please let me know how i can do.

Suggestion: directly upload on select

Hi there,

love your package.

I did some user testing and some folks don't click on the upload Button after selecting a file. It would be cool to have this as an option. Or an output event onFileSelect and an input to upload files.

What do you think?

cheers

It is only uploading the second file

Hello,

I'm trying to upload multiple files at the same time but it is taking only second file.
I'm using latest angular version 6 and spring boot for back end.

Getting this issue.

need add params

i don't send params. Please add this function .Thx

Customise height and width of drag and drop window

How can I resize the drag-and-drop window size to fit col-md-12 (complete page)? Also, how can I change the text Drag N Drop?

Unexpected value 'FileUploadModule' imported by the module 'AppModuleShared'. Please add a @NgModule annotation

I am trying this package with angular 5. but I am getting Unexpected value 'FileUploadModule' imported by the module 'AppModuleShared'. Please add a @NgModule annotation .

Kindly suggest how can this issue be resolved

the same id

If you use multiple loaders on the same page, it is likely that the input will be assigned the same id. Please make it possible to specify id in configuration or complicate id generation

Multiple files use the same name; only last one appears on server

I think this is the Caption property. If it is empty it gets set to file for each file. Each section in the request has name='file'. When it hits my backend running Laravel, only the last file is available. Seemingly this is because it uses the name attribute to build its array of files. I can't see any way to change the Caption array.

'Select File' does not work in IE 11

I know nobody cares about IE anymore, but I have to support it. Drag an drop seems to work. Using the select button allows you to choose a file, but it doesn't get listed in the selected files.

How do I replace the 'Invalid format' text for invalid file format?

As mentioned in the README it is possible to replace some texts like (selectFileBtn, resetBtn...). Unfortunately, I was not able to replace the 'Invalid format' text in case we attach an invalid file format.

How can I do that?

Thank you.

Doesn't work with aot

Compiler error when attempting to run Angular 5 with ng serve --aot:

ERROR in Error during template compile of 'FileUploadModule'
  Function calls are not supported in decorators but 'makeDecorator' was called in 'NgModule'
    'NgModule' references 'NgModule'
      'NgModule' references 'NgModule'
        'NgModule' references 'NgModule'
          'NgModule' calls 'makeDecorator'.

Need feature: Upload aditional json data along with file

Hi I want to send additional data along with the file. Is it possible in current version?? Or can I expect any updates ?

Critical dependency: the request of a dependency is an expression

When I use this module, my console throws above error.

Is this something that happens to any others?

Http Headers inclusion via Http Interceptor

I'm trying to send a POST file request but no authorization header is appended to the request. I'm using HttpInterceptors, are they supported or your component's POST call?

Doe's it have MiT license?

I want to use your component but couldn't find any licensing!

file content on body

How can us send the file content on request body? API get me an error because the body is bad built.
And, if the API get a response, how I can manage it? Thanks!

AngularFileUploaderModule

I have encountered the following error when I upgraded from 4.0.5 to 4.1.2

WARNING in ./src/app/app.module.ts
58:16-41 "export 'AngularFileUploaderModule' was not found in 'angular-file-uploader'

ERROR in ./node_modules/angular-file-uploader/index.js
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Qarun\Desktop\Internship project\ng-test\uwiprogrammes\node_modules\angular-file-uploader\index.js'

Are any fixes for this?
I will revert back to 4.0.5 for now

Drap and Drop, also support for select file functionality

Hello,

For the example 2, Drap and Drop can we also get on click event ? i.e., Select File functionality.

Normally the user wants either to select file / drag & drop.

if this can be combined in example 2, it would be great.

Config changes are not being detected

changes to config.uploadAPI.headers is not being detected and angular file upload uses old/initial auth header.

angular-file-uploader/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts line 50
never gets fired when config gets updated with new values:

also not sure why in ngOnChanges this.config is being used instead of rst["config"] ?

ngOnChanges(rst: SimpleChanges) {
    if (rst["config"]) {
....

<angular-file-uploader #fileUpload1 [config]="config" (ApiResponse)="uploadResponse($event)"></angular-file-uploader>

I've also tried object assign and reinitializing config but ngOnChanges is not being fired
any suggestions?

Thanks

Add parameters to request

Please add a way to add parameters to the request.

There are often cases where it's necessary to add metadata to a posted file.

Thanks.

Display Image before Upload

how can i catch the event after file selection for display file before press upload button ?

Not able to handle exceptions

Hi
We are using angular-file-uploader (Ver. 4.1.2). I’ve set up config for the same and in the config I’ve set formatsAllowed = .xls, .xlsx. But when user selects All Files option on Open Dialog and selects file with unwanted extension though it is not throwing an exception but we need some way to handle such scenario, so that, we can show proper message to user.

Component URL: https://www.npmjs.com/package/angular-file-uploader (https://www.npmjs.com/package/angular-file-uploader)
Thank you!

Kind regards,
Madan Deshpande PMP® ITIL

ResponseType

Can the config be modified to pass a response type for the xmlhttprequest? I need a blob response and there is not a way to pass the responsetype

could you please create 5.0.2 tag?

I see the version is on https://www.npmjs.com/package/angular-file-uploader/v/5.0.2, but the source code has not the tag.
I found the commit id e425a10 is the 5.0.2

page doesn't load OR becomes blank

When I add the following tag in my page, the page doesn't load OR becomes blank.

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

What am I missing? Or can you provide complete sample implementation of a page?

Regarding the text

I wanted the 'Drag N Drop' text to be replaced by below
.

And I wanted it in the HTML file. so whatever the labels in 'replaceTexts' are in TS file, but I wanted it in HTML file.

Could you please let me know how can this be done.

Translation

Awesome work! Love the component!
Question: how can I translate the component? My app is in Brasilian-Portuguese. Whats my best option, besides forking this project and translating it?

Thank you!

withCredentials param for session cookie support

Hello, would it be possible to support the param withCredentials during file upload process?

This is necessary if the server used session cookies (ok, maybe session cookies are old school; but however).

On regular HTTP call you can set this parameter additional to the headers params.
https://angular.io/api/http/RequestOptions

Thanks!

localization

hi,
first things first, thank you for this good module.

how can i change the strings and styles of this module!?

not showing progress bar in Example-3 (Theme - attachPin)

progress bar not showing in attached pin theme
when hideProgressBar:false,

Select button is not working on IE11

I am also facing same issue. Drag and drop working for me. Any idea?

Does it support I18n(other languages)?

Hello,

excellent job bro, nicely done but I do have project that will use three languages so is it possiable?
can you tell me how to append my own id with file name uploaded ?

Change the Content-Type from form data

.

Change the text from Drag N Drop

This should be fairly straightforward and work in the same way that the attachPinText config parameter works.

i need change method

It had method POST as default. We should have method field in config to set it to PUT, PATCH...My api need PUT not POST.

Thanks!

Send file in service

I need to send file through service and send csrf with file .Is there any example to help me?

Personalizable Lables

Is there the possibility for modify the labels (Drag N Drop for example)?

I'm new to angular and do not understand how this works.

File parameter name

I noticed that if I upload multiple files, they are named "file0", "file1" etc:

-----------------------------5936291719523
Content-Disposition: form-data; name="file0"; filename="a2.txt"
Content-Type: text/plain

22222
-----------------------------5936291719523
Content-Disposition: form-data; name="file1"; filename="a1.txt"
Content-Type: text/plain

11111
-----------------------------5936291719523--

In the Spring Controller I would like to receive the files as array, which does not work since they have all different names.

Can you tell me how I can have all the files just be named "file" ?