Skip to content

Commit e425a10

Browse files
author
Mohd Faisal Ansari
committed
Readme previous versions appended
1 parent 912001f commit e425a10

16 files changed

+675
-27
lines changed

‎README.md‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,9 +147,218 @@ You have seen that by using 'resetUpload' property, you can reset the module eas
147147
- More themes.
148148
- More customization options.
149149

150+
---
151+
#### For Versions < 5.x : [Click Here !](https://github.com/kzrfaisal/angular-file-uploader#for-versions--5x-)
150152
---
151153
#### For Versions =< 4.0.12 :
152154
- Replace AngularFileUploaderModule and AngularFileUploaderComponent with FileUploadModule and FileUploadComponent respectively.
153155
---
154156
#### For Versions < 2.x : [Click Here !](https://github.com/kzrfaisal/angular-file-uploader#for-versions--2x-)
155157
---
158+
---
159+
#### For Versions < 5.x :
160+
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.
161+
162+
### Demo
163+
<https://kzrfaisal.github.io/#/afu>
164+
### Install
165+
```
166+
npm i angular-file-uploader
167+
```
168+
### Usage
169+
- Bootstrap.min.css is required.
170+
Include
171+
```html
172+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
173+
```
174+
in your index.html.
175+
- Import AngularFileUploaderModule inside your app.module.ts
176+
```javascript
177+
import { AngularFileUploaderModule } from "angular-file-uploader";
178+
```
179+
```javascript
180+
@NgModule({
181+
imports: [
182+
...,
183+
AngularFileUploaderModule,
184+
...
185+
]
186+
})
187+
```
188+
##### Example-1 ( with minimal configuration )
189+
```html
190+
<angular-file-uploader
191+
[config]="afuConfig">
192+
</angular-file-uploader>
193+
```
194+
```javascript
195+
afuConfig = {
196+
uploadAPI: {
197+
url:"https://example-file-upload-api"
198+
}
199+
};
200+
```
201+
##### Example-2 ( with all available configuration )
202+
```html
203+
<angular-file-uploader
204+
[config]="afuConfig"
205+
[resetUpload]=resetVar
206+
(ApiResponse)="DocUpload($event)">
207+
</angular-file-uploader>
208+
```
209+
```javascript
210+
afuConfig = {
211+
multiple: false,
212+
formatsAllowed: ".jpg,.png",
213+
maxSize: "1",
214+
uploadAPI: {
215+
url:"https://example-file-upload-api",
216+
headers: {
217+
"Content-Type" : "text/plain;charset=UTF-8",
218+
"Authorization" : `Bearer ${token}`
219+
}
220+
},
221+
theme: "dragNDrop",
222+
hideProgressBar: true,
223+
hideResetBtn: true,
224+
hideSelectBtn: true
225+
};
226+
```
227+
228+
| **Properties** | **Description** | **Default Value** |
229+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
230+
| 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. | {} |
231+
| 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. | |
232+
| 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 |
233+
234+
235+
| **[config]** | **Description** | **Default Value** |
236+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
237+
| multiple : boolean | Set it as " true " for uploading multiple files at a time and as " false " for single file at a time. | false |
238+
| formatsAllowed : string | Specify the formats of file you want to upload. | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg'|
239+
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
240+
| uploadAPI.url : string | Complete api url to which you want to upload. | undefined |
241+
| uploadAPI.headers : {} | Provide headers you need here. | {} |
242+
| 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.|
243+
| hideProgressBar:boolean | Set it as " true " to hide the Progress bar. | false |
244+
| hideResetBtn:boolean | Set it as " true " to hide the 'Reset' Button. | false |
245+
| hideSelectBtn:boolean | Set it as " true " to hide the 'Select File' Button. | false |
246+
| attachPinText:string | If you are 'attachPin' theme, then you can use it to set custom text. | 'Attach supporting documents..' |
247+
248+
---
249+
##### A Better Way to reset the module
250+
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):-
251+
252+
###### Example-3
253+
```html
254+
<angular-file-uploader #fileUpload1
255+
[config]="afuConfig"
256+
[resetUpload]=resetVar
257+
(ApiResponse)="DocUpload($event)">
258+
</angular-file-uploader>
259+
```
260+
- Assign one local reference variable (here 'fileUpload1') to the component.
261+
- Now use this local reference variable in your xyz.component.ts file.
262+
```javascript
263+
@ViewChild('fileUpload1')
264+
private fileUpload1: AngularFileUploaderComponent;
265+
```
266+
- Remember to import ViewChild and AngularFileUploaderComponent properly in your component.
267+
```javascript
268+
import { ViewChild } from '@angular/core';
269+
import { AngularFileUploaderComponent } from "angular-file-uploader";
270+
```
271+
- That's it.....all done, now just use
272+
```javascript
273+
this.fileUpload1.resetFileUpload();
274+
```
275+
to reset the module hassle-free anytime.
276+
277+
### Styling:
278+
###### Following classes are available for customisation :
279+
###### *Include them in your global css class (src/styles.css)*
280+
###### *Use '!important' if something doesn't works*
281+
- .afu-select-btn {}
282+
- .afu-reset-btn {}
283+
- .afu-upload-btn {}
284+
- .afu-dragndrop-box {}
285+
- .afu-dragndrop-text {}
286+
- .afu-constraints-info {}
287+
- .afu-valid-file {}
288+
- .afu-invalid-file {}
289+
- .afu-progress-bar {}
290+
- .afu-upload-status {}
291+
- .afu-attach-pin {}
292+
293+
##### Points to note:
294+
- Files are uploaded in FormData format.
295+
296+
### Coming Soon:
297+
- More themes.
298+
- More customization options.
299+
300+
---
301+
---
302+
#### For Versions < 2.x :
303+
##### Example-1
304+
```html
305+
<angular-file-uploader
306+
[uploadAPI]="'https://example-file-upload-api'">
307+
</angular-file-uploader>
308+
```
309+
##### Example-2
310+
```html
311+
<angular-file-uploader
312+
[multiple]="true"
313+
[formatsAllowed]="'.jpg,.png'"
314+
[maxSize]="5"
315+
[uploadAPI]="'https://example-file-upload-api'"
316+
[resetUpload]=resetVar
317+
(ApiResponse)="DocUpload($event)"
318+
[hideProgressBar]="false">
319+
</angular-file-uploader>
320+
```
321+
322+
| **Properties** | **Description** | **Default Value** |
323+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
324+
| multiple : boolean | Set it as " true " for uploading multiple files at a time and as " false " for single file at a time. | false |
325+
| formatsAllowed : string | Specify the formats of file you want to upload. | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg' |
326+
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
327+
| uploadAPI : string | Complete api url to which you want to upload. | undefined |
328+
| 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. | |
329+
| 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 |
330+
| hideProgressBar : boolean | Set it as " true " to hide the Progress bar. | false |
331+
332+
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):-
333+
334+
##### Example-3
335+
```html
336+
<angular-file-uploader #fileUpload1
337+
[multiple]="true"
338+
[formatsAllowed]="'.jpg,.png'"
339+
[maxSize]="5"
340+
[uploadAPI]="'https://example-file-upload-api'"
341+
[resetUpload]=resetVar
342+
(ApiResponse)="DocUpload($event)"
343+
[hideProgressBar]="false">
344+
</angular-file-uploader>
345+
```
346+
- Assign one local reference variable (here 'fileUpload1') to the component.
347+
- Now use this local reference variable in your xyz.component.ts file.
348+
```javascript
349+
@ViewChild('fileUpload1')
350+
private fileUpload1: FileUploadComponent;
351+
```
352+
- Remember to import ViewChild and FileUploadComponent properly in your component.
353+
```javascript
354+
import { ViewChild } from '@angular/core';
355+
import { FileUploadComponent } from "angular-file-uploader";
356+
```
357+
- That's it.....all done, now just use
358+
```javascript
359+
this.fileUpload1.resetFileUpload();
360+
```
361+
to reset the module hassle-free anytime.
362+
363+
##### Points to note:
364+
- Files are uploaded in FormData format.

0 commit comments

Comments
 (0)