Skip to content

Commit c7d9720

Browse files
kzrfaisalkzrfaisal
committed
Attributes moved to config
1 parent 42631a0 commit c7d9720

File tree

5 files changed

+145
-55
lines changed

5 files changed

+145
-55
lines changed

‎README.md‎

Lines changed: 87 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
Angular file uploader is an Angular 2+ file uploader module with Real-Time Progress Bar and Angular Universal Compatibility.
22

3-
###Install
3+
### Install
44
```
55
npm install angular-file-uploader
66
```
7-
###Usage
7+
### Usage
88
- Bootstrap.min.css is required.
99
Include
1010
```html
@@ -24,6 +24,90 @@ npm install angular-file-uploader
2424
]
2525
})
2626
```
27+
##### Example-1 ( with minimal configuration )
28+
```html
29+
<angular-file-uploader
30+
[config]="afuConfig">
31+
</angular-file-uploader>
32+
```
33+
```javascript
34+
afuConfig = {
35+
uploadAPI: "https://example-file-upload-api"
36+
};
37+
```
38+
##### Example-2 ( with all available configuration )
39+
```html
40+
<angular-file-uploader
41+
[config]="afuConfig"
42+
[resetUpload]=resetVar
43+
(ApiResponse)="DocUpload($event)">
44+
</angular-file-uploader>
45+
```
46+
```javascript
47+
afuConfig = {
48+
hideProgressBar: "true",
49+
maxSize: "1",
50+
uploadAPI: "https://example-file-upload-api",
51+
formatsAllowed: ".jpg,.png",
52+
multiple: "false"
53+
};
54+
```
55+
56+
| **Properties** | **Description** | **Default Value** |
57+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
58+
| 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. | {} |
59+
| 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. | |
60+
| 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 |
61+
62+
63+
| **[config]** | **Description** | **Default Value** |
64+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
65+
| multiple : boolean | Set it as " true " for uploading multiple files at a time and as " false " for single file at a time. | false |
66+
| formatsAllowed : string | Specify the formats of file you want to upload. | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg' |
67+
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
68+
| uploadAPI : string | Complete api url to which you want to upload. | undefined |
69+
| 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. | |
70+
| 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 |
71+
| hideProgressBar : boolean | Set it as " true " to hide the Progress bar. | false |
72+
73+
---
74+
##### A Better Way to reset the module
75+
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):-
76+
77+
###### Example-3
78+
```html
79+
<angular-file-uploader #fileUpload1
80+
[config]="afuConfig"
81+
[resetUpload]=resetVar
82+
(ApiResponse)="DocUpload($event)">
83+
</angular-file-uploader>
84+
```
85+
- Assign one local reference variable (here 'fileUpload1') to the component.
86+
- Now use this local reference variable in your xyz.component.ts file.
87+
```javascript
88+
@ViewChild('fileUpload1')
89+
private fileUpload1: FileUploadComponent;
90+
```
91+
- Remember to import ViewChild and FileUploadComponent properly in your component.
92+
```javascript
93+
import { ViewChild } from '@angular/core';
94+
import { FileUploadComponent } from "angular-file-uploader";
95+
```
96+
- That's it.....all done, now just use
97+
```javascript
98+
this.fileUpload1.resetFileUpload();
99+
```
100+
to reset the module hassle-free anytime.
101+
102+
#####Points to note:
103+
- Files are uploaded in FormData format.
104+
105+
###Coming Soon:
106+
- Multiple themes.
107+
- Drag n Drop.
108+
- More customization options.
109+
110+
#### For Versions < 2.x :
27111
#####Example-1
28112
```html
29113
<angular-file-uploader
@@ -85,9 +169,4 @@ You have seen that by using 'resetUpload' property, you can reset the module eas
85169
to reset the module hassle-free anytime.
86170
87171
#####Points to note:
88-
- Files are uploaded in FormData format.
89-
90-
###Coming Soon:
91-
- Multiple themes.
92-
- Drag n Drop.
93-
- More customization options.
172+
- Files are uploaded in FormData format.

‎file-upload.component.d.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
22
export declare class FileUploadComponent implements OnInit, OnChanges {
3-
multiple: boolean;
4-
formatsAllowed: string;
5-
uploadAPI: string;
6-
maxSize: number;
7-
idDate: number;
8-
id: number;
9-
ApiResponse: EventEmitter<{}>;
3+
config: any;
104
resetUpload: boolean;
5+
ApiResponse: EventEmitter<{}>;
116
theme: string;
7+
id: number;
128
hideProgressBar: boolean;
9+
maxSize: number;
10+
uploadAPI: string;
11+
formatsAllowed: string;
12+
multiple: boolean;
13+
idDate: number;
1314
reg: RegExp;
1415
selectedFiles: Array<any>;
1516
notAllowedList: Array<Object>;
@@ -25,8 +26,8 @@ export declare class FileUploadComponent implements OnInit, OnChanges {
2526
percentComplete: number;
2627
constructor();
2728
ngOnChanges(rst: SimpleChanges): void;
28-
resetFileUpload(): void;
2929
ngOnInit(): void;
30+
resetFileUpload(): void;
3031
onChange(event: any): void;
3132
uploadFiles(): void;
3233
removeFile(i: any, sf_na: any): void;

0 commit comments

Comments
 (0)