Skip to content

Commit ecc6c4c

Browse files
kzrfaisalkzrfaisal
committed
bundle umd added
1 parent d0bdb59 commit ecc6c4c

File tree

3 files changed

+274
-1
lines changed

3 files changed

+274
-1
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Angular file uploader is an Angular 2+ file uploader module with Real-Time Progr
44
<http://angular-file-uploader.s3-website-us-east-1.amazonaws.com>
55
### Install
66
```
7-
npm install angular-file-uploader
7+
npm i angular-file-uploader
88
```
99
### Usage
1010
- Bootstrap.min.css is required.

‎bundles/npm-module-file-upload.umd.js‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
(function (global, factory) {
2+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
3+
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common'], factory) :
4+
(factory((global.ng = global.ng || {}, global.ng['npm-module-file-upload'] = global.ng['npm-module-file-upload'] || {}),global.ng.core,global.ng.common));
5+
}(this, (function (exports,_angular_core,_angular_common) { 'use strict';
6+
7+
var FileUploadComponent = (function () {
8+
function FileUploadComponent() {
9+
this.config = {};
10+
this.resetUpload = this.config["resetUpload"];
11+
this.ApiResponse = new _angular_core.EventEmitter();
12+
this.idDate = +new Date();
13+
this.reg = /(?:\.([^.]+))?$/;
14+
this.selectedFiles = [];
15+
this.notAllowedList = [];
16+
this.Caption = [];
17+
this.singleFile = true;
18+
this.progressBarShow = false;
19+
this.uploadBtn = false;
20+
this.uploadMsg = false;
21+
this.afterUpload = false;
22+
this.uploadClick = true;
23+
//console.log("id: ",this.id);
24+
//console.log("idDate: ",this.idDate);
25+
//console.log(Math.random());
26+
}
27+
FileUploadComponent.prototype.ngOnChanges = function (rst) {
28+
if (rst["config"]) {
29+
this.theme = this.config["theme"] || "";
30+
this.id = this.config["id"] || parseInt((this.idDate / 10000).toString().split(".")[1]) + Math.floor(Math.random() * 20) * 10000;
31+
this.hideProgressBar = this.config["hideProgressBar"] || false;
32+
this.maxSize = this.config["maxSize"] || 20;
33+
this.uploadAPI = this.config["uploadAPI"]["url"];
34+
this.formatsAllowed = this.config["formatsAllowed"] || ".jpg,.png,.pdf,.docx,.txt,.gif,.jpeg";
35+
this.multiple = this.config["multiple"] || false;
36+
this.headers = this.config["uploadAPI"]["headers"] || {};
37+
}
38+
if (rst["resetUpload"]) {
39+
if (rst["resetUpload"].currentValue === true) {
40+
this.resetFileUpload();
41+
}
42+
}
43+
};
44+
FileUploadComponent.prototype.ngOnInit = function () {
45+
//console.log("Id: ", this.id);
46+
this.resetUpload = false;
47+
};
48+
FileUploadComponent.prototype.resetFileUpload = function () {
49+
this.selectedFiles = [];
50+
this.Caption = [];
51+
this.notAllowedList = [];
52+
this.uploadMsg = false;
53+
};
54+
FileUploadComponent.prototype.onChange = function (event) {
55+
//console.log(this.maxSize + this.formatsAllowed + this.multiple);
56+
this.notAllowedList = [];
57+
//console.log("onchange hit");
58+
if (this.afterUpload || !this.multiple) {
59+
this.selectedFiles = [];
60+
this.Caption = [];
61+
this.afterUpload = false;
62+
}
63+
//FORMATS ALLOWED LIST
64+
//console.log("FORMATS ALLOWED LIST= "+this.formatsAllowed);
65+
//NO OF FORMATS ALLOWED
66+
var formatsCount;
67+
formatsCount = this.formatsAllowed.match(new RegExp("\\.", "g"));
68+
formatsCount = formatsCount.length;
69+
//console.log("NO OF FORMATS ALLOWED= "+formatsCount);
70+
//console.log("-------------------------------");
71+
//ITERATE SELECTED FILES
72+
var file = event.target.files || event.srcElement.files;
73+
var currentFileExt;
74+
var ext;
75+
var frmtAllowed;
76+
for (var i = 0; i < file.length; i++) {
77+
//CHECK FORMAT
78+
//CURRENT FILE EXTENSION
79+
currentFileExt = this.reg.exec(file[i].name);
80+
currentFileExt = currentFileExt[1];
81+
//console.log(file[i].name);
82+
frmtAllowed = false;
83+
//FORMAT ALLOWED LIST ITERATE
84+
for (var j = formatsCount; j > 0; j--) {
85+
ext = this.formatsAllowed.split(".")[j];
86+
//console.log("FORMAT LIST ("+j+")= "+ext.split(",")[0]);
87+
if (j == formatsCount) {
88+
ext = this.formatsAllowed.split(".")[j] + ",";
89+
} //check format
90+
if (currentFileExt.toLowerCase() == ext.split(",")[0]) {
91+
frmtAllowed = true;
92+
}
93+
}
94+
if (frmtAllowed) {
95+
//console.log("FORMAT ALLOWED");
96+
//CHECK SIZE
97+
if (file[i].size > this.maxSize * 1024000) {
98+
//console.log("SIZE NOT ALLOWED ("+file[i].size+")");
99+
this.notAllowedList.push({
100+
fileName: file[i].name,
101+
fileSize: this.convertSize(file[i].size),
102+
errorMsg: "Invalid size"
103+
});
104+
continue;
105+
}
106+
else {
107+
//format allowed and size allowed then add file to selectedFile array
108+
this.selectedFiles.push(file[i]);
109+
}
110+
}
111+
else {
112+
//console.log("FORMAT NOT ALLOWED");
113+
this.notAllowedList.push({
114+
fileName: file[i].name,
115+
fileSize: this.convertSize(file[i].size),
116+
errorMsg: "Invalid format"
117+
});
118+
continue;
119+
}
120+
}
121+
if (this.selectedFiles.length !== 0) {
122+
this.uploadBtn = true;
123+
if (this.theme == "attachPin")
124+
this.uploadFiles();
125+
}
126+
else {
127+
this.uploadBtn = false;
128+
}
129+
this.uploadMsg = false;
130+
this.uploadClick = true;
131+
this.percentComplete = 0;
132+
event.target.value = null;
133+
};
134+
FileUploadComponent.prototype.uploadFiles = function () {
135+
//console.log(this.selectedFiles);
136+
var _this = this;
137+
var i;
138+
this.progressBarShow = true;
139+
this.uploadClick = false;
140+
this.notAllowedList = [];
141+
var isError = false;
142+
var xhr = new XMLHttpRequest();
143+
var formData = new FormData();
144+
for (i = 0; i < this.selectedFiles.length; i++) {
145+
if (this.Caption[i] == undefined)
146+
this.Caption[i] = "file";
147+
//Add DATA TO BE SENT
148+
formData.append(this.Caption[i], this.selectedFiles[i] /*, this.selectedFiles[i].name*/);
149+
}
150+
if (i > 1) {
151+
this.singleFile = false;
152+
}
153+
else {
154+
this.singleFile = true;
155+
}
156+
xhr.onreadystatechange = function (evnt) {
157+
//console.log("onready");
158+
if (xhr.readyState === 4) {
159+
if (xhr.status === 200) {
160+
//this.ApiResponse.emit(JSON.parse(xhr.response));
161+
_this.ApiResponse.emit(xhr.response);
162+
}
163+
else {
164+
//console.log("ERRRRRRor");
165+
//console.log(xhr.statusText + " (From SERVER)");
166+
isError = true;
167+
_this.progressBarShow = false;
168+
_this.uploadBtn = false;
169+
_this.uploadMsg = true;
170+
_this.afterUpload = true;
171+
_this.uploadMsgText = "Upload Failed !";
172+
_this.uploadMsgClass = "text-danger lead";
173+
}
174+
}
175+
};
176+
xhr.upload.onprogress = function (evnt) {
177+
if (evnt.lengthComputable) {
178+
_this.percentComplete = Math.round(evnt.loaded / evnt.total * 100);
179+
}
180+
//console.log("Progress..."/*+this.percentComplete+" %"*/);
181+
};
182+
xhr.onload = function (evnt) {
183+
//console.log("onload");
184+
//console.log(evnt);
185+
_this.progressBarShow = false;
186+
_this.uploadBtn = false;
187+
_this.uploadMsg = true;
188+
_this.afterUpload = true;
189+
if (!isError) {
190+
_this.uploadMsgText = "Successfully Uploaded !";
191+
_this.uploadMsgClass = "text-success lead";
192+
}
193+
};
194+
xhr.onerror = function (evnt) {
195+
//console.log("onerror");
196+
//console.log(evnt);
197+
};
198+
xhr.open("POST", this.uploadAPI, true);
199+
for (var _i = 0, _a = Object.keys(this.headers); _i < _a.length; _i++) {
200+
var key = _a[_i];
201+
xhr.setRequestHeader(key, this.headers[key]);
202+
}
203+
//let token = sessionStorage.getItem("token");
204+
//xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
205+
//xhr.setRequestHeader('Authorization', `Bearer ${token}`);
206+
xhr.send(formData);
207+
};
208+
FileUploadComponent.prototype.removeFile = function (i, sf_na) {
209+
//console.log("remove file clicked " + i)
210+
if (sf_na == "sf") {
211+
this.selectedFiles.splice(i, 1);
212+
this.Caption.splice(i, 1);
213+
}
214+
else {
215+
this.notAllowedList.splice(i, 1);
216+
}
217+
if (this.selectedFiles.length == 0) {
218+
this.uploadBtn = false;
219+
}
220+
};
221+
FileUploadComponent.prototype.convertSize = function (fileSize) {
222+
//console.log(fileSize + " - "+ str);
223+
return fileSize < 1024000
224+
? (fileSize / 1024).toFixed(2) + "KB"
225+
: (fileSize / 1024000).toFixed(2) + "MB";
226+
};
227+
FileUploadComponent.prototype.attachpinOnclick = function () {
228+
//console.log("ID: ", this.id);
229+
//document.getElementById("sel" + this.id).click();
230+
//$("#"+"sel"+this.id).click();
231+
};
232+
FileUploadComponent.decorators = [
233+
{ type: _angular_core.Component, args: [{
234+
selector: 'angular-file-uploader',
235+
template: "<div class=\"container\" *ngIf=\"theme !== 'attachPin'\" id=\"default\">\n <label for=\"sel{{id}}\" class=\"btn btn-primary btn-sm\">Select File</label>\n <input type=\"file\" id=\"sel{{id}}\" style=\"display: none\" (change)=\"onChange($event)\" title=\"Select file\" name=\"files[]\" [accept]=formatsAllowed\n [attr.multiple]=\"multiple ? '' : null\" />\n <br>\n <p class=\"constraints-info\">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize *1024000))}}</p>\n <!--Selected file list-->\n <div class=\"row\" *ngFor=\"let sf of selectedFiles;let i=index\">\n <p class=\"col-xs-3 textOverflow\">\n <span class=\"text-primary\">{{sf.name}}</span>\n </p>\n <p class=\"col-xs-3 padMarg sizeC\">\n <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\" *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\">x</a>\n </div>\n <!--Invalid file list-->\n <div class=\"row text-danger\" *ngFor=\"let na of notAllowedList;let j=index\">\n <p class=\"col-xs-3 textOverflow\">\n <span>{{na['fileName']}}</span>\n </p>\n <p class=\"col-xs-3 padMarg sizeC\">\n <strong>({{na['fileSize']}})</strong>\n </p>\n <p class=\"col-xs-3 \">{{na['errorMsg']}}</p>\n <a class=\"col-xs-1\" role=\"button\" (click)=\"removeFile(j,'na')\" *ngIf=\"uploadClick\">&nbsp;x</a>\n </div>\n\n <p *ngIf=\"uploadMsg\" class=\"{{uploadMsgClass}}\">{{uploadMsgText}}<p>\n <div *ngIf=\"!singleFile && progressBarShow && !hideProgressBar\">\n <div class=\"progress col-xs-4 padMarg\">\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\" type=\"button\" (click)=\"uploadFiles()\" [disabled]=!uploadBtn>Upload</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'>\n Attach supporting documents..\n <i class=\"fa fa-paperclip\" aria-hidden=\"true\" (click)=\"attachpinOnclick()\"></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>",
236+
styles: [".constraints-info{\n margin-top:10px;\n font-style: italic;\n}\n.padMarg{\n padding: 0px;\n margin-bottom:0px;\n}\n.caption{\n margin-right:5px;\n}\n.textOverflow{\n white-space: nowrap; \n padding-right: 0;\n overflow: hidden;\n text-overflow: ellipsis; \n}\n@media screen and (max-width: 620px){\n .caption{\n padding: 0;\n }\n}\n@media screen and (max-width: 510px){\n .sizeC{\n width:25%;\n }\n}\n@media screen and (max-width: 260px){\n .sizeC{\n font-size:10px; \n }\n .caption{\n font-size:10px; \n }\n}"],
237+
},] },
238+
];
239+
/** @nocollapse */
240+
FileUploadComponent.ctorParameters = function () { return []; };
241+
FileUploadComponent.propDecorators = {
242+
'config': [{ type: _angular_core.Input },],
243+
'resetUpload': [{ type: _angular_core.Input },],
244+
'ApiResponse': [{ type: _angular_core.Output },],
245+
};
246+
return FileUploadComponent;
247+
}());
248+
249+
var FileUploadModule = (function () {
250+
function FileUploadModule() {
251+
}
252+
FileUploadModule.decorators = [
253+
{ type: _angular_core.NgModule, args: [{
254+
imports: [
255+
_angular_common.CommonModule
256+
],
257+
declarations: [
258+
FileUploadComponent],
259+
exports: [FileUploadComponent]
260+
},] },
261+
];
262+
/** @nocollapse */
263+
FileUploadModule.ctorParameters = function () { return []; };
264+
return FileUploadModule;
265+
}());
266+
267+
exports.FileUploadModule = FileUploadModule;
268+
exports.FileUploadComponent = FileUploadComponent;
269+
270+
Object.defineProperty(exports, '__esModule', { value: true });
271+
272+
})));

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"main": "bundles/npm-module-file-upload.umd.min.js",
66
"module": "index.js",
77
"typings": "index.d.ts",
8+
"readme": "README.md",
89
"keywords": [
910
"angular",
1011
"file",

0 commit comments

Comments
 (0)