Skip to content

Commit 8320c91

Browse files
kzrfaisalkzrfaisal
committed
Version 7.1.0 released
1 parent 0f106e4 commit 8320c91

File tree

9 files changed

+115
-80
lines changed

9 files changed

+115
-80
lines changed

‎README.md

Lines changed: 23 additions & 15 deletions
Large diffs are not rendered by default.

‎projects/angular-file-uploader/README.md

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
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.
1+
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.
22

33
### Demo
44
<https://kzrfaisal.github.io/#/afu>
@@ -52,7 +52,8 @@ Support this package if it really helped you, send your support at [Patreon](htt
5252
<angular-file-uploader
5353
[config]="afuConfig"
5454
[resetUpload]=resetVar
55-
(ApiResponse)="DocUpload($event)">
55+
(fileSelected)="fileSelected($event)"
56+
(ApiResponse)="docUpload($event)">
5657
</angular-file-uploader>
5758
```
5859
```javascript
@@ -71,12 +72,15 @@ Support this package if it really helped you, send your support at [Patreon](htt
7172
'page': '1'
7273
},
7374
responseType: 'blob',
75+
withCredentials: false,
7476
},
7577
theme: "dragNDrop",
7678
hideProgressBar: true,
7779
hideResetBtn: true,
7880
hideSelectBtn: true,
81+
hideSelectBtn: true,
7982
fileNameIndex: true,
83+
autoUpload: false,
8084
replaceTexts: {
8185
selectFileBtn: 'Select Files',
8286
resetBtn: 'Reset',
@@ -93,23 +97,28 @@ Support this package if it really helped you, send your support at [Patreon](htt
9397
| **Properties** | **Description** | **Default Value** |
9498
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
9599
| 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. | {} |
96-
| 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. | |
100+
| 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. | |
101+
| 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. | |
97102
| 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 |
98103

99104

100105
| **[config]** | **Description** | **Default Value** |
101106
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
102107
| multiple : boolean | Set it as " true " for uploading multiple files at a time and as " false " for single file at a time. | false |
103-
| formatsAllowed : string | Specify the formats of file you want to upload. | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg'|
108+
| 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, | `'*'`|
104109
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
105110
| uploadAPI.url : string | Complete api url to which you want to upload. | undefined |
106111
| uploadAPI.method : string | HTTP method to use for upload. | POST |
107-
| uploadAPI.headers : {} | Provide headers you need here. | {} |
112+
| uploadAPI.headers : {} | Provide headers in HttpClient Options here. | {} |
113+
| uploadAPI.params : {} | Provide params in HttpClient Options here. | {} |
114+
| uploadAPI.responseType : string | Provide responseType in HttpClient Options here. | 'json' |
115+
| uploadAPI.withCredentials : boolean | Provide withCredentials in HttpClient Options here. | false |
108116
| 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.|
109117
| hideProgressBar:boolean | Set it as " true " to hide the Progress bar. | false |
110118
| hideResetBtn:boolean | Set it as " true " to hide the 'Reset' Button. | false |
111119
| hideSelectBtn:boolean | Set it as " true " to hide the 'Select File' Button. | false |
112120
| fileNameIndex:boolean | Set it as " false " to get the same file name as 'file' instead of 'file1', 'file2'.... in formdata object. | true |
121+
| autoUpload:boolean | Set it as "true" to upload the files directly after files are selected without the need of Upload Button. | false |
113122
| replaceTexts:object | Replace default texts with your own custom texts. | refer to example-2|
114123

115124
---

‎projects/angular-file-uploader/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-file-uploader",
3-
"version": "7.0.2",
3+
"version": "7.1.0",
44
"license": "MIT",
55
"peerDependencies": {
66
"@angular/common": "^10.0.5",
@@ -9,7 +9,7 @@
99
"dependencies": {
1010
"tslib": "^2.0.0"
1111
},
12-
"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.",
12+
"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.",
1313
"deprecated": false,
1414
"readme": "README.md",
1515
"keywords": [
@@ -29,6 +29,8 @@
2929
"angular 8",
3030
"angular 9",
3131
"angular 10",
32+
"angular 11",
33+
"angular 12",
3234
"universal",
3335
"img",
3436
"image",

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,13 @@
2525
text-decoration: none;
2626
color: #ce0909;
2727
}
28+
29+
.selectBtnDisabled {
30+
border: 1px solid #999999;
31+
background-color: #cccccc;
32+
color: #666666;
33+
cursor: no-drop;
34+
}
2835
/*--------------------- DRAG N DROP ----------------------*/
2936
.dragNDrop .div1 {
3037
display: border-box;

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

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,30 @@
1111
</div>
1212
</div>
1313
<!-- Drag n Drop theme Ends -->
14-
<label for="sel{{id}}" class="btn btn-primary btn-sm afu-select-btn"
15-
*ngIf="!hideSelectBtn">{{replaceTexts?.selectFileBtn}}</label>
16-
<input type="file" id="sel{{id}}" style="display: none" *ngIf="!hideSelectBtn" (change)="onChange($event)"
17-
title="Select file" name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? '' : null" />
18-
<button class="btn btn-info btn-sm resetBtn afu-reset-btn" (click)="resetFileUpload()"
19-
*ngIf="!hideResetBtn">{{replaceTexts?.resetBtn}}</button>
14+
15+
<label for="sel{{id}}" class="btn btn-primary btn-sm afu-select-btn" [ngClass]="progressBarShow ? 'disabled' : null"
16+
*ngIf="!hideSelectBtn" [disabled]="progressBarShow">{{replaceTexts?.selectFileBtn}}</label>
17+
<input type="file" id="sel{{id}}" style="display: none" *ngIf="!hideSelectBtn" [disabled]="progressBarShow"
18+
(change)="onChange($event)" title="Select file" name="files[]" [accept]=formatsAllowed
19+
[attr.multiple]="multiple ? '' : null" />
20+
<button class="btn btn-info btn-sm resetBtn afu-reset-btn" (click)="resetFileUpload()" *ngIf="!hideResetBtn"
21+
[disabled]="progressBarShow">{{replaceTexts?.resetBtn}}</button>
2022
<br *ngIf="!hideSelectBtn">
21-
<p class="constraints-info afu-constraints-info">({{formatsAllowed}}) {{replaceTexts?.sizeLimit}}: {{(convertSize(maxSize))}}
23+
<p class="constraints-info afu-constraints-info">{{formatsAllowedText}} {{replaceTexts?.sizeLimit}}:
24+
{{(convertSize(maxSize))}}
2225
</p>
2326
<!--Allowed file list-->
2427
<div class="row afu-valid-file" *ngFor="let sf of allowedFiles;let i=index">
2528
<p class="col-xs-3 textOverflow"><span class="text-primary">{{sf.name}}</span></p>
2629
<p class="col-xs-3 padMarg sizeC"><strong>({{convertSize(sf.size)}})</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
2730
<!-- <input class="col-xs-3 progress caption" type="text" placeholder="Caption.." [(ngModel)]="Caption[i]" *ngIf="!uploadStarted"/> -->
28-
<div class="progress col-xs-3 padMarg afu-progress-bar" *ngIf="isAllowedFileSingle && progressBarShow && !hideProgressBar">
31+
<div class="progress col-xs-3 padMarg afu-progress-bar"
32+
*ngIf="isAllowedFileSingle && progressBarShow && !hideProgressBar">
2933
<span class="progress-bar progress-bar-success" role="progressbar"
3034
[ngStyle]="{'width':uploadPercent+'%'}">{{uploadPercent}}%</span>
3135
</div>
32-
<a class="col-xs-1" role="button" (click)="removeFile(i,'sf')" *ngIf="!uploadStarted"><i class="fa fa-times"></i></a>
36+
<a class="col-xs-1" role="button" (click)="removeFile(i,'sf')" *ngIf="!uploadStarted"><i
37+
class="fa fa-times"></i></a>
3338
</div>
3439
<!--Not Allowed file list-->
3540
<div class="row text-danger afu-invalid-file" *ngFor="let na of notAllowedFiles;let j=index">
@@ -40,18 +45,19 @@
4045
class="fa fa-times"></i></a>
4146
</div>
4247

43-
<p *ngIf="uploadMsg" class="{{uploadMsgClass}} + afu-upload-status">{{uploadMsgText}}<p>
44-
<div *ngIf="!isAllowedFileSingle && progressBarShow && !hideProgressBar">
45-
<div class="progress col-xs-4 padMarg afu-progress-bar">
46-
<span class="progress-bar progress-bar-success" role="progressbar"
47-
[ngStyle]="{'width':uploadPercent+'%'}">{{uploadPercent}}%</span>
48-
</div>
49-
<br>
50-
<br>
51-
</div>
52-
<button class="btn btn-success afu-upload-btn" type="button" (click)="uploadFiles()"
53-
[disabled]=!enableUploadBtn>{{replaceTexts?.uploadBtn}}</button>
54-
<br>
48+
<p *ngIf="uploadMsg" class="{{uploadMsgClass}} + afu-upload-status">{{uploadMsgText}}
49+
<p>
50+
<div *ngIf="!isAllowedFileSingle && progressBarShow && !hideProgressBar">
51+
<div class="progress col-xs-4 padMarg afu-progress-bar">
52+
<span class="progress-bar progress-bar-success" role="progressbar"
53+
[ngStyle]="{'width':uploadPercent+'%'}">{{uploadPercent}}%</span>
54+
</div>
55+
<br>
56+
<br>
57+
</div>
58+
<button class="btn btn-success afu-upload-btn" type="button" (click)="uploadFiles()"
59+
[disabled]="!enableUploadBtn && progressBarShow" *ngIf="!autoUpload">{{replaceTexts?.uploadBtn}}</button>
60+
<br>
5561
</div>
5662

5763
<!--/////////////////////////// ATTACH PIN THEME //////////////////////////////////////////////////////////-->
@@ -60,7 +66,7 @@
6066
<a class='btn up_btn afu-attach-pin' (click)="attachpinOnclick()">
6167
{{replaceTexts?.attachPinBtn}}
6268
<i class="fa fa-paperclip" aria-hidden="true"></i>
63-
<!-- <p style="margin-top:10px">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize))}}</p> -->
69+
<!-- <p style="margin-top:10px">({{formatsAllowedText}}) Size limit- {{(convertSize(maxSize))}}</p> -->
6470
<input type="file" id="sel{{id}}" (change)="onChange($event)" style="display: none" title="Select file"
6571
name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? '' : null" />
6672
<br>
@@ -69,4 +75,3 @@
6975
<span class='label label-info' id="upload-file-info{{id}}">{{allowedFiles[0]?.name}}</span>
7076
</div>
7177
</div>
72-

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

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export class AngularFileUploaderComponent implements OnChanges {
4040
ApiResponse = new EventEmitter();
4141

4242
@Output()
43-
everythingDone: EventEmitter<UploadInfo[]> = new EventEmitter<UploadInfo[]>();
43+
fileSelected: EventEmitter<UploadInfo[]> = new EventEmitter<UploadInfo[]>();
4444

4545
// Properties
4646
theme: string;
@@ -50,10 +50,11 @@ export class AngularFileUploaderComponent implements OnChanges {
5050
uploadAPI: string;
5151
method: string;
5252
formatsAllowed: string;
53+
formatsAllowedText: string;
5354
multiple: boolean;
5455
headers: HttpHeaders | { [header: string]: string | string[] };
5556
params: HttpParams | { [param: string]: string | string[] };
56-
responseType: string;
57+
responseType: 'json' | 'arraybuffer' | 'blob' | 'text';
5758
hideResetBtn: boolean;
5859
hideSelectBtn: boolean;
5960
allowedFiles: File[] = [];
@@ -75,6 +76,8 @@ export class AngularFileUploaderComponent implements OnChanges {
7576
replaceTexts: ReplaceTexts;
7677
currentUploads: any[] = [];
7778
fileNameIndex = true;
79+
withCredentials = false;
80+
autoUpload = false;
7881

7982
private idDate: number = +new Date();
8083

@@ -95,13 +98,17 @@ export class AngularFileUploaderComponent implements OnChanges {
9598
this.maxSize = (this.config.maxSize || 20) * 1024000; // mb to bytes.
9699
this.uploadAPI = this.config.uploadAPI.url;
97100
this.method = this.config.uploadAPI.method || 'POST';
98-
this.formatsAllowed =
99-
this.config.formatsAllowed || '.jpg,.png,.pdf,.docx,.txt,.gif,.jpeg';
101+
this.formatsAllowed = this.config.formatsAllowed || '*';
102+
this.formatsAllowedText =
103+
this.formatsAllowed === '*' ? '' : '(' + this.formatsAllowed + ')';
100104
this.multiple = this.config.multiple || false;
101105
this.headers = this.config.uploadAPI.headers || {};
102106
this.params = this.config.uploadAPI.params || {};
103-
this.responseType = this.config.uploadAPI.responseType || null;
107+
this.responseType = this.config.uploadAPI.responseType || 'json';
108+
this.withCredentials = this.config.uploadAPI.withCredentials || false;
104109
this.fileNameIndex = this.config.fileNameIndex === false ? false : true;
110+
this.autoUpload = this.config.autoUpload || false;
111+
105112
this.replaceTexts = {
106113
selectFileBtn: this.multiple ? 'Select Files' : 'Select File',
107114
resetBtn: 'Reset',
@@ -127,7 +134,6 @@ export class AngularFileUploaderComponent implements OnChanges {
127134
this.resetFileUpload();
128135
}
129136
}
130-
131137
}
132138

133139
// Reset following properties.
@@ -141,7 +147,7 @@ export class AngularFileUploaderComponent implements OnChanges {
141147

142148
// When user selects files.
143149
onChange(event: any) {
144-
150+
this.fileSelected.emit(event);
145151
this.notAllowedFiles = [];
146152
const fileExtRegExp: RegExp = /(?:\.([^.]+))?$/;
147153
let fileList: FileList;
@@ -163,7 +169,9 @@ export class AngularFileUploaderComponent implements OnChanges {
163169
const currentFileExt = fileExtRegExp
164170
.exec(fileList[i].name)[1]
165171
.toLowerCase(); // Get file extension.
166-
const isFormatValid = this.formatsAllowed.includes(currentFileExt);
172+
const isFormatValid = this.formatsAllowed.includes('*')
173+
? true
174+
: this.formatsAllowed.includes(currentFileExt);
167175

168176
const isSizeValid = fileList[i].size <= this.maxSize;
169177

@@ -182,8 +190,8 @@ export class AngularFileUploaderComponent implements OnChanges {
182190
// If there's any allowedFiles.
183191
if (this.allowedFiles.length > 0) {
184192
this.enableUploadBtn = true;
185-
// Upload the files directly if theme is attach pin (as upload btn is not there for this theme).
186-
if (this.theme === 'attachPin') {
193+
// Upload the files directly if theme is attach pin (as upload btn is not there for this theme) or autoUpload is true.
194+
if (this.theme === 'attachPin' || this.autoUpload) {
187195
this.uploadFiles();
188196
}
189197
} else {
@@ -226,19 +234,15 @@ export class AngularFileUploaderComponent implements OnChanges {
226234
params.append(key, this.params[key]);
227235
} */
228236

229-
const options = {
230-
headers: this.headers,
231-
params: this.params,
232-
};
233-
234-
if (this.responseType) (options as any).responseType = this.responseType;
235-
236237
this.http
237238
.request(this.method.toUpperCase(), this.uploadAPI, {
238239
body: formData,
239240
reportProgress: true,
240241
observe: 'events',
241-
...options,
242+
headers: this.headers,
243+
params: this.params,
244+
responseType: this.responseType,
245+
withCredentials: this.withCredentials,
242246
})
243247
.subscribe(
244248
(event) => {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ export interface UploadApi {
1515
url: string;
1616
method?: 'POST' | 'PUT' | 'PATCH';
1717
headers?: HttpHeaders | { [header: string]: string | string[] };
18-
params?: HttpParams | { [param: string]: string | string[]; };
19-
responseType?: string;
18+
params?: HttpParams | { [param: string]: string | string[] };
19+
responseType?: 'json' | 'arraybuffer' | 'blob' | 'text';
20+
withCredentials?: boolean;
2021
}
2122

2223
export interface AngularFileUploaderConfig {
@@ -32,6 +33,7 @@ export interface AngularFileUploaderConfig {
3233
multiple?: boolean;
3334
fileNameIndex?: boolean;
3435
replaceTexts?: ReplaceTexts;
36+
autoUpload?: boolean;
3537
}
3638

3739
export interface UploadInfo {

0 commit comments

Comments
 (0)