Version 7.1.0 released

projects/angular-file-uploader/README.md

@@ -1,4 +1,4 @@
-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.
+Angular file uploader is an Angular 2/4/5/6/7/8/9/10/11/12 + 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>
@@ -52,7 +52,8 @@ Support this package if it really helped you, send your support at [Patreon](htt
   <angular-file-uploader 
         [config]="afuConfig"
         [resetUpload]=resetVar
-        (ApiResponse)="DocUpload($event)">
+        (fileSelected)="fileSelected($event)"
+        (ApiResponse)="docUpload($event)">
   </angular-file-uploader>
   ``` 
   ```javascript
@@ -71,12 +72,15 @@ Support this package if it really helped you, send your support at [Patreon](htt
           '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',
@@ -93,23 +97,28 @@ Support this package if it really helped you, send your support at [Patreon](htt
 | **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.                                                           |                                        |
+| 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.                                                                                                                                       | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg'|
+| 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 you need here.                                                                                                                                                        | {}                                     |
+| 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|
 
 ---

projects/angular-file-uploader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-file-uploader",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^10.0.5",
@@ -9,7 +9,7 @@
   "dependencies": {
     "tslib": "^2.0.0"
   },
-  "description": "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 and multiple themes which includes Drag and Drop and much more.",
+  "description": "Angular file uploader is an Angular 2/4/5/6/7/8/9/10/11/12 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility and multiple themes which includes Drag and Drop and much more.",
   "deprecated": false,
   "readme": "README.md",
   "keywords": [
@@ -29,6 +29,8 @@
     "angular 8",
     "angular 9",
     "angular 10",
+    "angular 11",
+    "angular 12",
     "universal",
     "img",
     "image",

projects/angular-file-uploader/src/lib/angular-file-uploader.component.css

@@ -25,6 +25,13 @@
   text-decoration: none;
   color: #ce0909;
 }
+
+.selectBtnDisabled {
+  border: 1px solid #999999;
+  background-color: #cccccc;
+  color: #666666;
+  cursor: no-drop;
+}
 /*--------------------- DRAG N DROP ----------------------*/
 .dragNDrop .div1 {
   display: border-box;

projects/angular-file-uploader/src/lib/angular-file-uploader.component.html

@@ -11,25 +11,30 @@
     </div>
   </div>
   <!-- Drag n Drop theme Ends -->
-  <label for="sel{{id}}" class="btn btn-primary btn-sm afu-select-btn"
-    *ngIf="!hideSelectBtn">{{replaceTexts?.selectFileBtn}}</label>
-  <input type="file" id="sel{{id}}" style="display: none" *ngIf="!hideSelectBtn" (change)="onChange($event)"
-    title="Select file" name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? '' : null" />
-  <button class="btn btn-info btn-sm resetBtn afu-reset-btn" (click)="resetFileUpload()"
-    *ngIf="!hideResetBtn">{{replaceTexts?.resetBtn}}</button>
+
+  <label for="sel{{id}}" class="btn btn-primary btn-sm afu-select-btn" [ngClass]="progressBarShow ? 'disabled' : null"
+    *ngIf="!hideSelectBtn" [disabled]="progressBarShow">{{replaceTexts?.selectFileBtn}}</label>
+  <input type="file" id="sel{{id}}" style="display: none" *ngIf="!hideSelectBtn" [disabled]="progressBarShow"
+    (change)="onChange($event)" title="Select file" name="files[]" [accept]=formatsAllowed
+    [attr.multiple]="multiple ? '' : null" />
+  <button class="btn btn-info btn-sm resetBtn afu-reset-btn" (click)="resetFileUpload()" *ngIf="!hideResetBtn"
+    [disabled]="progressBarShow">{{replaceTexts?.resetBtn}}</button>
   <br *ngIf="!hideSelectBtn">
-  <p class="constraints-info afu-constraints-info">({{formatsAllowed}}) {{replaceTexts?.sizeLimit}}: {{(convertSize(maxSize))}}
+  <p class="constraints-info afu-constraints-info">{{formatsAllowedText}} {{replaceTexts?.sizeLimit}}:
+    {{(convertSize(maxSize))}}
   </p>
   <!--Allowed file list-->
   <div class="row afu-valid-file" *ngFor="let sf of allowedFiles;let i=index">
     <p class="col-xs-3 textOverflow"><span class="text-primary">{{sf.name}}</span></p>
     <p class="col-xs-3 padMarg sizeC"><strong>({{convertSize(sf.size)}})</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
     <!--  <input class="col-xs-3 progress caption"  type="text"  placeholder="Caption.."  [(ngModel)]="Caption[i]"  *ngIf="!uploadStarted"/> -->
-    <div class="progress col-xs-3 padMarg afu-progress-bar" *ngIf="isAllowedFileSingle && progressBarShow && !hideProgressBar">
+    <div class="progress col-xs-3 padMarg afu-progress-bar"
+      *ngIf="isAllowedFileSingle && progressBarShow && !hideProgressBar">
       <span class="progress-bar progress-bar-success" role="progressbar"
         [ngStyle]="{'width':uploadPercent+'%'}">{{uploadPercent}}%</span>
     </div>
-    <a class="col-xs-1" role="button" (click)="removeFile(i,'sf')" *ngIf="!uploadStarted"><i class="fa fa-times"></i></a>
+    <a class="col-xs-1" role="button" (click)="removeFile(i,'sf')" *ngIf="!uploadStarted"><i
+        class="fa fa-times"></i></a>
   </div>
   <!--Not Allowed file list-->
   <div class="row text-danger afu-invalid-file" *ngFor="let na of notAllowedFiles;let j=index">
@@ -40,18 +45,19 @@
         class="fa fa-times"></i></a>
   </div>
 
-  <p *ngIf="uploadMsg" class="{{uploadMsgClass}} + afu-upload-status">{{uploadMsgText}}<p>
-      <div *ngIf="!isAllowedFileSingle && progressBarShow && !hideProgressBar">
-        <div class="progress col-xs-4 padMarg afu-progress-bar">
-          <span class="progress-bar progress-bar-success" role="progressbar"
-            [ngStyle]="{'width':uploadPercent+'%'}">{{uploadPercent}}%</span>
-        </div>
-        <br>
-        <br>
-      </div>
-      <button class="btn btn-success afu-upload-btn" type="button" (click)="uploadFiles()"
-        [disabled]=!enableUploadBtn>{{replaceTexts?.uploadBtn}}</button>
-      <br>
+  <p *ngIf="uploadMsg" class="{{uploadMsgClass}} + afu-upload-status">{{uploadMsgText}}
+  <p>
+  <div *ngIf="!isAllowedFileSingle && progressBarShow && !hideProgressBar">
+    <div class="progress col-xs-4 padMarg afu-progress-bar">
+      <span class="progress-bar progress-bar-success" role="progressbar"
+        [ngStyle]="{'width':uploadPercent+'%'}">{{uploadPercent}}%</span>
+    </div>
+    <br>
+    <br>
+  </div>
+  <button class="btn btn-success afu-upload-btn" type="button" (click)="uploadFiles()"
+    [disabled]="!enableUploadBtn && progressBarShow" *ngIf="!autoUpload">{{replaceTexts?.uploadBtn}}</button>
+  <br>
 </div>
 
 <!--/////////////////////////// ATTACH PIN THEME  //////////////////////////////////////////////////////////-->
@@ -60,7 +66,7 @@
     <a class='btn up_btn afu-attach-pin' (click)="attachpinOnclick()">
       {{replaceTexts?.attachPinBtn}}
       <i class="fa fa-paperclip" aria-hidden="true"></i>
-      <!-- <p style="margin-top:10px">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize))}}</p> -->
+      <!-- <p style="margin-top:10px">({{formatsAllowedText}}) Size limit- {{(convertSize(maxSize))}}</p> -->
       <input type="file" id="sel{{id}}" (change)="onChange($event)" style="display: none" title="Select file"
         name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? '' : null" />
       <br>
@@ -69,4 +75,3 @@
     <span class='label label-info' id="upload-file-info{{id}}">{{allowedFiles[0]?.name}}</span>
   </div>
 </div>
-

projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts

@@ -40,7 +40,7 @@ export class AngularFileUploaderComponent implements OnChanges {
   ApiResponse = new EventEmitter();
 
   @Output()
-  everythingDone: EventEmitter<UploadInfo[]> = new EventEmitter<UploadInfo[]>();
+  fileSelected: EventEmitter<UploadInfo[]> = new EventEmitter<UploadInfo[]>();
 
   // Properties
   theme: string;
@@ -50,10 +50,11 @@ export class AngularFileUploaderComponent implements OnChanges {
   uploadAPI: string;
   method: string;
   formatsAllowed: string;
+  formatsAllowedText: string;
   multiple: boolean;
   headers: HttpHeaders | { [header: string]: string | string[] };
   params: HttpParams | { [param: string]: string | string[] };
-  responseType: string;
+  responseType: 'json' | 'arraybuffer' | 'blob' | 'text';
   hideResetBtn: boolean;
   hideSelectBtn: boolean;
   allowedFiles: File[] = [];
@@ -75,6 +76,8 @@ export class AngularFileUploaderComponent implements OnChanges {
   replaceTexts: ReplaceTexts;
   currentUploads: any[] = [];
   fileNameIndex = true;
+  withCredentials = false;
+  autoUpload = false;
 
   private idDate: number = +new Date();
 
@@ -95,13 +98,17 @@ export class AngularFileUploaderComponent implements OnChanges {
       this.maxSize = (this.config.maxSize || 20) * 1024000; // mb to bytes.
       this.uploadAPI = this.config.uploadAPI.url;
       this.method = this.config.uploadAPI.method || 'POST';
-      this.formatsAllowed =
-        this.config.formatsAllowed || '.jpg,.png,.pdf,.docx,.txt,.gif,.jpeg';
+      this.formatsAllowed = this.config.formatsAllowed || '*';
+      this.formatsAllowedText =
+        this.formatsAllowed === '*' ? '' : '(' + this.formatsAllowed + ')';
       this.multiple = this.config.multiple || false;
       this.headers = this.config.uploadAPI.headers || {};
       this.params = this.config.uploadAPI.params || {};
-      this.responseType = this.config.uploadAPI.responseType || null;
+      this.responseType = this.config.uploadAPI.responseType || 'json';
+      this.withCredentials = this.config.uploadAPI.withCredentials || false;
       this.fileNameIndex = this.config.fileNameIndex === false ? false : true;
+      this.autoUpload = this.config.autoUpload || false;
+
       this.replaceTexts = {
         selectFileBtn: this.multiple ? 'Select Files' : 'Select File',
         resetBtn: 'Reset',
@@ -127,7 +134,6 @@ export class AngularFileUploaderComponent implements OnChanges {
         this.resetFileUpload();
       }
     }
-
   }
 
   // Reset following properties.
@@ -141,7 +147,7 @@ export class AngularFileUploaderComponent implements OnChanges {
 
   // When user selects files.
   onChange(event: any) {
-
+    this.fileSelected.emit(event);
     this.notAllowedFiles = [];
     const fileExtRegExp: RegExp = /(?:\.([^.]+))?$/;
     let fileList: FileList;
@@ -163,7 +169,9 @@ export class AngularFileUploaderComponent implements OnChanges {
       const currentFileExt = fileExtRegExp
         .exec(fileList[i].name)[1]
         .toLowerCase(); // Get file extension.
-      const isFormatValid = this.formatsAllowed.includes(currentFileExt);
+      const isFormatValid = this.formatsAllowed.includes('*')
+        ? true
+        : this.formatsAllowed.includes(currentFileExt);
 
       const isSizeValid = fileList[i].size <= this.maxSize;
 
@@ -182,8 +190,8 @@ export class AngularFileUploaderComponent implements OnChanges {
     // If there's any allowedFiles.
     if (this.allowedFiles.length > 0) {
       this.enableUploadBtn = true;
-      // Upload the files directly if theme is attach pin (as upload btn is not there for this theme).
-      if (this.theme === 'attachPin') {
+      // Upload the files directly if theme is attach pin (as upload btn is not there for this theme) or autoUpload is true.
+      if (this.theme === 'attachPin' || this.autoUpload) {
         this.uploadFiles();
       }
     } else {
@@ -226,19 +234,15 @@ export class AngularFileUploaderComponent implements OnChanges {
       params.append(key, this.params[key]);
     } */
 
-    const options = {
-      headers: this.headers,
-      params: this.params,
-    };
-
-    if (this.responseType) (options as any).responseType = this.responseType;
-
     this.http
       .request(this.method.toUpperCase(), this.uploadAPI, {
         body: formData,
         reportProgress: true,
         observe: 'events',
-        ...options,
+        headers: this.headers,
+        params: this.params,
+        responseType: this.responseType,
+        withCredentials: this.withCredentials,
       })
       .subscribe(
         (event) => {

projects/angular-file-uploader/src/lib/angular-file-uploader.types.ts

@@ -15,8 +15,9 @@ export interface UploadApi {
   url: string;
   method?: 'POST' | 'PUT' | 'PATCH';
   headers?: HttpHeaders | { [header: string]: string | string[] };
-  params?: HttpParams | { [param: string]: string | string[]; };
-  responseType?: string;
+  params?: HttpParams | { [param: string]: string | string[] };
+  responseType?: 'json' | 'arraybuffer' | 'blob' | 'text';
+  withCredentials?: boolean;
 }
 
 export interface AngularFileUploaderConfig {
@@ -32,6 +33,7 @@ export interface AngularFileUploaderConfig {
   multiple?: boolean;
   fileNameIndex?: boolean;
   replaceTexts?: ReplaceTexts;
+  autoUpload?: boolean;
 }
 
 export interface UploadInfo {