Skip to content

Commit 63bb408

Browse files
committed
unminified and untranspiled code
1 parent 67f5b0c commit 63bb408

19 files changed

+583
-656
lines changed

README.md

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ npm i angular-file-uploader
8080
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
8181
| uploadAPI.url : string | Complete api url to which you want to upload. | undefined |
8282
| uploadAPI.headers : {} | Provide headers you need here. | {} |
83-
| 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.|
83+
| 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.|
8484
| hideProgressBar:boolean | Set it as " true " to hide the Progress bar. | false |
8585
| hideResetBtn:boolean | Set it as " true " to hide the 'Reset' Button. | false |
8686
| hideSelectBtn:boolean | Set it as " true " to hide the 'Select File' Button. | false |
@@ -122,5 +122,67 @@ You have seen that by using 'resetUpload' property, you can reset the module eas
122122
- More customization options.
123123
124124
---
125-
#### For Versions < 2.x : [Click Here !](https://github.com/kzrfaisal/angular-file-uploader#for-versions--2x-)
126125
---
126+
#### For Versions < 2.x :
127+
##### Example-1
128+
```html
129+
<angular-file-uploader
130+
[uploadAPI]="'https://example-file-upload-api'">
131+
</angular-file-uploader>
132+
```
133+
##### Example-2
134+
```html
135+
<angular-file-uploader
136+
[multiple]="true"
137+
[formatsAllowed]="'.jpg,.png'"
138+
[maxSize]="5"
139+
[uploadAPI]="'https://example-file-upload-api'"
140+
[resetUpload]=resetVar
141+
(ApiResponse)="DocUpload($event)"
142+
[hideProgressBar]="false">
143+
</angular-file-uploader>
144+
```
145+
146+
| **Properties** | **Description** | **Default Value** |
147+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
148+
| multiple : boolean | Set it as " true " for uploading multiple files at a time and as " false " for single file at a time. | false |
149+
| formatsAllowed : string | Specify the formats of file you want to upload. | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg' |
150+
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
151+
| uploadAPI : string | Complete api url to which you want to upload. | undefined |
152+
| 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. | |
153+
| 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 |
154+
| hideProgressBar : boolean | Set it as " true " to hide the Progress bar. | false |
155+
156+
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):-
157+
158+
##### Example-3
159+
```html
160+
<angular-file-uploader #fileUpload1
161+
[multiple]="true"
162+
[formatsAllowed]="'.jpg,.png'"
163+
[maxSize]="5"
164+
[uploadAPI]="'https://example-file-upload-api'"
165+
[resetUpload]=resetVar
166+
(ApiResponse)="DocUpload($event)"
167+
[hideProgressBar]="false">
168+
</angular-file-uploader>
169+
```
170+
- Assign one local reference variable (here 'fileUpload1') to the component.
171+
- Now use this local reference variable in your xyz.component.ts file.
172+
```javascript
173+
@ViewChild('fileUpload1')
174+
private fileUpload1: FileUploadComponent;
175+
```
176+
- Remember to import ViewChild and FileUploadComponent properly in your component.
177+
```javascript
178+
import { ViewChild } from '@angular/core';
179+
import { FileUploadComponent } from "angular-file-uploader";
180+
```
181+
- That's it.....all done, now just use
182+
```javascript
183+
this.fileUpload1.resetFileUpload();
184+
```
185+
to reset the module hassle-free anytime.
186+
187+
##### Points to note:
188+
- Files are uploaded in FormData format.

0 commit comments

Comments
 (0)