Skip to content

Commit 9695be6

Browse files
kzrfaisalkzrfaisal
committed
npm folder, future updates file added and default theme h tag added
1 parent 4d51487 commit 9695be6

29 files changed

+2690
-1
lines changed

‎Future Updates.txt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
include bootstrap internally.
2+
provide option to pass additional data.
3+
Provide user custom class to edit
4+
check this out quality etc : https://npms.io/about
5+
when invalid and valid selected simultaneously, bring cross icon before error msg.
6+
round number for size limit
7+
additional classes for buttons.

‎npm/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Mohd Faisal Ansari
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎npm/README.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
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.
2+
3+
### Demo
4+
<https://kzrfaisal.github.io/#/afu>
5+
### Install
6+
```
7+
npm i angular-file-uploader
8+
```
9+
### Usage
10+
- Bootstrap.min.css is required.
11+
Include
12+
```html
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
14+
```
15+
in your index.html.
16+
- Import AngularFileUploaderModule inside your app.module.ts
17+
```javascript
18+
import { AngularFileUploaderModule } from "angular-file-uploader";
19+
```
20+
```javascript
21+
@NgModule({
22+
imports: [
23+
...,
24+
AngularFileUploaderModule,
25+
...
26+
]
27+
})
28+
```
29+
##### Example-1 ( with minimal configuration )
30+
```html
31+
<angular-file-uploader
32+
[config]="afuConfig">
33+
</angular-file-uploader>
34+
```
35+
```javascript
36+
afuConfig = {
37+
uploadAPI: {
38+
url:"https://example-file-upload-api"
39+
}
40+
};
41+
```
42+
##### Example-2 ( with all available configuration )
43+
```html
44+
<angular-file-uploader
45+
[config]="afuConfig"
46+
[resetUpload]=resetVar
47+
(ApiResponse)="DocUpload($event)">
48+
</angular-file-uploader>
49+
```
50+
```javascript
51+
afuConfig = {
52+
multiple: false,
53+
formatsAllowed: ".jpg,.png",
54+
maxSize: "1",
55+
uploadAPI: {
56+
url:"https://example-file-upload-api",
57+
headers: {
58+
"Content-Type" : "text/plain;charset=UTF-8",
59+
"Authorization" : `Bearer ${token}`
60+
}
61+
},
62+
theme: "dragNDrop",
63+
hideProgressBar: true,
64+
hideResetBtn: true,
65+
hideSelectBtn: true
66+
};
67+
```
68+
69+
| **Properties** | **Description** | **Default Value** |
70+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
71+
| 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. | {} |
72+
| 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. | |
73+
| 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 |
74+
75+
76+
| **[config]** | **Description** | **Default Value** |
77+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
78+
| multiple : boolean | Set it as " true " for uploading multiple files at a time and as " false " for single file at a time. | false |
79+
| formatsAllowed : string | Specify the formats of file you want to upload. | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg'|
80+
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
81+
| uploadAPI.url : string | Complete api url to which you want to upload. | undefined |
82+
| 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.|
84+
| hideProgressBar:boolean | Set it as " true " to hide the Progress bar. | false |
85+
| hideResetBtn:boolean | Set it as " true " to hide the 'Reset' Button. | false |
86+
| hideSelectBtn:boolean | Set it as " true " to hide the 'Select File' Button. | false |
87+
| attachPinText:string | If you are 'attachPin' theme, then you can use it to set custom text. | 'Attach supporting documents..' |
88+
89+
---
90+
##### A Better Way to reset the module
91+
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):-
92+
93+
###### Example-3
94+
```html
95+
<angular-file-uploader #fileUpload1
96+
[config]="afuConfig"
97+
[resetUpload]=resetVar
98+
(ApiResponse)="DocUpload($event)">
99+
</angular-file-uploader>
100+
```
101+
- Assign one local reference variable (here 'fileUpload1') to the component.
102+
- Now use this local reference variable in your xyz.component.ts file.
103+
```javascript
104+
@ViewChild('fileUpload1')
105+
private fileUpload1: AngularFileUploaderComponent;
106+
```
107+
- Remember to import ViewChild and AngularFileUploaderComponent properly in your component.
108+
```javascript
109+
import { ViewChild } from '@angular/core';
110+
import { AngularFileUploaderComponent } from "angular-file-uploader";
111+
```
112+
- That's it.....all done, now just use
113+
```javascript
114+
this.fileUpload1.resetFileUpload();
115+
```
116+
to reset the module hassle-free anytime.
117+
118+
### Styling:
119+
###### Following classes are available for customisation :
120+
###### *Include them in your global css class (src/styles.css)*
121+
###### *Use '!important' if something doesn't works*
122+
- .afu-select-btn {}
123+
- .afu-reset-btn {}
124+
- .afu-upload-btn {}
125+
- .afu-dragndrop-box {}
126+
- .afu-dragndrop-text {}
127+
- .afu-constraints-info {}
128+
- .afu-valid-file {}
129+
- .afu-invalid-file {}
130+
- .afu-progress-bar {}
131+
- .afu-upload-status {}
132+
- .afu-attach-pin {}
133+
134+
##### Points to note:
135+
- Files are uploaded in FormData format.
136+
137+
### Coming Soon:
138+
- More themes.
139+
- More customization options.
140+
141+
---
142+
#### For Versions =< 4.0.12 :
143+
- Replace AngularFileUploaderModule and AngularFileUploaderComponent with FileUploadModule and FileUploadComponent respectively.
144+
---
145+
#### For Versions < 2.x : [Click Here !](https://github.com/kzrfaisal/angular-file-uploader#for-versions--2x-)
146+
---

‎npm/angular-file-uploader.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* Generated bundle index. Do not edit.
3+
*/
4+
export * from './public_api';

‎npm/angular-file-uploader.metadata.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"__symbolic":"module","version":4,"metadata":{"AngularFileUploaderService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"AngularFileUploaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":1,"character":1},"arguments":[{"selector":"angular-file-uploader","template":"<div class=\"container\" *ngIf=\"(theme !== 'attachPin')\" id=\"default\">\n\n <!-- Drag n Drop theme Starts -->\n <div *ngIf=\"theme == 'dragNDrop'\" id=\"dragNDrop\" [ngClass]=\"(hideSelectBtn && hideResetBtn) ? null : 'dragNDropBtmPad'\" class=\"dragNDrop\">\n <div style=\"position:relative;\">\n <div id=\"div1\" class=\"div1 afu-dragndrop-box\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n <p class=\"afu-dragndrop-text\">Drag N Drop</p>\n </div>\n <!-- <span class='label label-info' id=\"upload-file-info{{id}}\">{{selectedFiles[0]?.name}}</span> -->\n </div>\n </div>\n <!-- Drag n Drop theme Ends -->\n\n <label for=\"sel{{id}}\" class=\"btn btn-primary btn-sm afu-select-btn\" *ngIf=\"!hideSelectBtn\">Select File<span *ngIf=\"multiple\">s</span></label>\n <input type=\"file\" id=\"sel{{id}}\" style=\"display: none\" *ngIf=\"!hideSelectBtn\" (change)=\"onChange($event)\" title=\"Select file\"\n name=\"files[]\" [accept]=formatsAllowed [attr.multiple]=\"multiple ? '' : null\" />\n <button class=\"btn btn-info btn-sm resetBtn afu-reset-btn\" (click)=\"resetFileUpload()\" *ngIf=\"!hideResetBtn\">Reset</button>\n <br *ngIf=\"!hideSelectBtn\">\n <p class=\"constraints-info afu-constraints-info\">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize *1024000))}}</p>\n <!--Selected file list-->\n <div class=\"row afu-valid-file\" *ngFor=\"let sf of selectedFiles;let i=index\" >\n <p class=\"col-xs-3 textOverflow\"><span class=\"text-primary\">{{sf.name}}</span></p>\n <p class=\"col-xs-3 padMarg sizeC\"><strong>({{convertSize(sf.size)}})</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>\n <!-- <input class=\"col-xs-3 progress caption\" type=\"text\" placeholder=\"Caption..\" [(ngModel)]=\"Caption[i]\" *ngIf=\"uploadClick\"/> -->\n <div class=\"progress col-xs-3 padMarg afu-progress-bar\" *ngIf=\"singleFile && progressBarShow && !hideProgressBar\">\n <span class=\"progress-bar progress-bar-success\" role=\"progressbar\" [ngStyle]=\"{'width':percentComplete+'%'}\">{{percentComplete}}%</span>\n </div>\n <a class=\"col-xs-1\" role=\"button\" (click)=\"removeFile(i,'sf')\" *ngIf=\"uploadClick\"><i class=\"fa fa-times\"></i></a>\n </div>\n <!--Invalid file list-->\n <div class=\"row text-danger afu-invalid-file\" *ngFor=\"let na of notAllowedList;let j=index\">\n <p class=\"col-xs-3 textOverflow\"><span>{{na['fileName']}}</span></p>\n <p class=\"col-xs-3 padMarg sizeC\"><strong>({{na['fileSize']}})</strong></p>\n <p class=\"col-xs-3 \">{{na['errorMsg']}}</p>\n <a class=\"col-xs-1 delFileIcon\" role=\"button\" (click)=\"removeFile(j,'na')\" *ngIf=\"uploadClick\">&nbsp;<i class=\"fa fa-times\"></i></a>\n </div>\n\n <p *ngIf=\"uploadMsg\" class=\"{{uploadMsgClass}} + afu-upload-status\">{{uploadMsgText}}<p>\n <div *ngIf=\"!singleFile && progressBarShow && !hideProgressBar\">\n <div class=\"progress col-xs-4 padMarg afu-progress-bar\">\n <span class=\"progress-bar progress-bar-success\" role=\"progressbar\" [ngStyle]=\"{'width':percentComplete+'%'}\">{{percentComplete}}%</span>\n </div>\n <br>\n <br>\n </div>\n <button class=\"btn btn-success afu-upload-btn\" type=\"button\" (click)=\"uploadFiles()\" [disabled]=!uploadBtn>{{uploadBtnText}}</button>\n <br>\n</div>\n\n<!--/////////////////////////// ATTACH PIN THEME //////////////////////////////////////////////////////////-->\n<div *ngIf=\"theme == 'attachPin'\" id=\"attachPin\">\n <div style=\"position:relative;padding-left:6px\">\n <a class='btn up_btn afu-attach-pin' (click)=\"attachpinOnclick()\">\n {{attachPinText}}\n <i class=\"fa fa-paperclip\" aria-hidden=\"true\"></i>\n <!-- <p style=\"margin-top:10px\">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize * 1024000))}}</p> -->\n <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\" name=\"files[]\" [accept]=formatsAllowed\n [attr.multiple]=\"multiple ? '' : null\" />\n <br>\n </a>\n &nbsp;\n <span class='label label-info' id=\"upload-file-info{{id}}\">{{selectedFiles[0]?.name}}</span>\n </div>\n</div>\n\n<!--/////////////////////////// DRAG N DROP THEME //////////////////////////////////////////////////////////-->\n<!-- <div *ngIf=\"theme == 'dragNDrop'\" id=\"dragNDrop\">\n <div style=\"position:relative;padding-left:6px\">\n <div id=\"div1\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n <p>Drag N Drop</p>\n </div>\n <span class='label label-info' id=\"upload-file-info{{id}}\">{{selectedFiles[0]?.name}}</span>\n </div>\n</div> -->","styles":[".constraints-info{margin-top:10px;font-style:italic}.padMarg{padding:0;margin-bottom:0}.caption{margin-right:5px}.textOverflow{white-space:nowrap;padding-right:0;overflow:hidden;text-overflow:ellipsis}.up_btn{color:#000;background-color:transparent;border:2px solid #5c5b5b;border-radius:22px}.delFileIcon{text-decoration:none;color:#ce0909}.dragNDrop .div1{display:border-box;border:2px dashed #5c5b5b;height:6rem;width:20rem}.dragNDrop .div1>p{text-align:center;font-weight:700;color:#5c5b5b;margin-top:1.4em}.dragNDropBtmPad{padding-bottom:2rem}@media screen and (max-width:620px){.caption{padding:0}}@media screen and (max-width:510px){.sizeC{width:25%}}@media screen and (max-width:260px){.caption,.sizeC{font-size:10px}}.resetBtn{margin-left:3px}"]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"resetUpload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"ApiResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":84,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"resetFileUpload":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"uploadFiles":[{"__symbolic":"method"}],"removeFile":[{"__symbolic":"method"}],"convertSize":[{"__symbolic":"method"}],"attachpinOnclick":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"allowDrop":[{"__symbolic":"method"}]}},"AngularFileUploaderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":4}],"declarations":[{"__symbolic":"reference","name":"AngularFileUploaderComponent"}],"exports":[{"__symbolic":"reference","name":"AngularFileUploaderComponent"}]}]}],"members":{}}},"origins":{"AngularFileUploaderService":"./lib/angular-file-uploader.service","AngularFileUploaderComponent":"./lib/angular-file-uploader.component","AngularFileUploaderModule":"./lib/angular-file-uploader.module"},"importAs":"angular-file-uploader"}

0 commit comments

Comments
 (0)