Skip to content

Commit a23ecd3

Browse files
kzrfaisalkzrfaisal
committed
drag n drop functionality added
1 parent 733b073 commit a23ecd3

File tree

7 files changed

+75
-22
lines changed

7 files changed

+75
-22
lines changed

‎README.md‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ npm i angular-file-uploader
4949
```
5050
```javascript
5151
afuConfig = {
52-
multiple: "false",
52+
multiple: false,
5353
formatsAllowed: ".jpg,.png",
5454
maxSize: "1",
5555
uploadAPI: {
@@ -59,8 +59,10 @@ npm i angular-file-uploader
5959
"Authorization" : `Bearer ${token}`
6060
}
6161
},
62-
hideProgressBar: "true",
63-
hideResetBtn: "true",
62+
theme: "dragNDrop",
63+
hideProgressBar: true,
64+
hideResetBtn: true,
65+
hideSelectBtn: true
6466
};
6567
```
6668

@@ -71,15 +73,17 @@ npm i angular-file-uploader
7173
| 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 |
7274

7375

74-
| **[config]** | **Description** | **Default Value** |
76+
| **[config]** | **Description** | **Default Value** |
7577
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|
76-
| multiple : boolean | Set it as " true " for uploading multiple files at a time and as " false " for single file at a time. | false |
77-
| formatsAllowed : string | Specify the formats of file you want to upload. | '.jpg,.png,.pdf,.docx, .txt,.gif,.jpeg' |
78-
| maxSize : number | Maximum size limit for files in MB. | 20 MB |
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 |
7981
| uploadAPI.url : string | Complete api url to which you want to upload. | undefined |
80-
| uploadAPI.headers : {} | Provide headers you need here. | {} |
82+
| uploadAPI.headers : {} | Provide headers you need here. | {} |
83+
| theme : string | Specify the theme name you want to apply. Available Themes: 'dragNDrop'. | If no theme or wrong theme is specified, default theme will be used instead.|
8184
| hideProgressBar:boolean | Set it as " true " to hide the Progress bar. | false |
82-
| hideResetBtn:boolean | Set it as " true " to hide the Reset Button. | 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 |
8387

8488
---
8589
##### A Better Way to reset the module

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

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ var FileUploadComponent = (function () {
3333
Math.floor(Math.random() * 20) * 10000;
3434
this.hideProgressBar = this.config["hideProgressBar"] || false;
3535
this.hideResetBtn = this.config["hideResetBtn"] || false;
36+
this.hideSelectBtn = this.config["hideSelectBtn"] || false;
3637
this.maxSize = this.config["maxSize"] || 20;
3738
this.uploadAPI = this.config["uploadAPI"]["url"];
3839
this.formatsAllowed =
@@ -75,7 +76,16 @@ var FileUploadComponent = (function () {
7576
//console.log("NO OF FORMATS ALLOWED= "+formatsCount);
7677
//console.log("-------------------------------");
7778
//ITERATE SELECTED FILES
78-
var file = event.target.files || event.srcElement.files;
79+
var file;
80+
if (event.type == "drop") {
81+
file = event.dataTransfer.files;
82+
console.log("type: drop");
83+
}
84+
else {
85+
file = event.target.files || event.srcElement.files;
86+
console.log("type: change");
87+
}
88+
console.log(file);
7989
var currentFileExt;
8090
var ext;
8191
var frmtAllowed;
@@ -228,20 +238,33 @@ var FileUploadComponent = (function () {
228238
FileUploadComponent.prototype.convertSize = function (fileSize) {
229239
//console.log(fileSize + " - "+ str);
230240
return fileSize < 1024000
231-
? (fileSize / 1024).toFixed(2) + "KB"
232-
: (fileSize / 1024000).toFixed(2) + "MB";
241+
? (fileSize / 1024).toFixed(2) + " KB"
242+
: (fileSize / 1024000).toFixed(2) + " MB";
233243
};
234244
FileUploadComponent.prototype.attachpinOnclick = function () {
235245
//console.log("ID: ", this.id);
236246
//document.getElementById("sel" + this.id).click();
237247
//$("#"+"sel"+this.id).click();
238248
};
249+
FileUploadComponent.prototype.drop = function (event) {
250+
event.stopPropagation();
251+
event.preventDefault();
252+
console.log("drop: ", event);
253+
console.log("drop: ", event.dataTransfer.files);
254+
this.onChange(event);
255+
};
256+
FileUploadComponent.prototype.allowDrop = function (event) {
257+
event.stopPropagation();
258+
event.preventDefault();
259+
event.dataTransfer.dropEffect = "copy";
260+
//console.log("allowDrop: ",event)
261+
};
239262
FileUploadComponent.decorators = [
240263
{ type: _angular_core.Component, args: [{
241264
selector: "angular-file-uploader",
242-
template: "<div class=\"container\" *ngIf=\"theme !== 'attachPin'\" id=\"default\">\n <label for=\"sel{{id}}\" class=\"btn btn-primary btn-sm\">Select File<span *ngIf=\"multiple\">s</span></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 <button class=\"btn btn-info btn-sm\" (click)=\"resetFileUpload()\" *ngIf=\"!hideResetBtn\">Reset</button>\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 delFileIcon\" 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\" *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>",
265+
template: "<div class=\"container\" *ngIf=\"(theme !== 'attachPin')\" id=\"default\">\n <div *ngIf=\"theme == 'dragNDrop'\" id=\"dragNDrop\" [ngClass]=\"(hideSelectBtn && hideResetBtn) ? null : 'dragNDropBtmPad'\">\n <div style=\"position:relative;\">\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>\n <label for=\"sel{{id}}\" class=\"btn btn-primary btn-sm\" *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\" name=\"files[]\" [accept]=formatsAllowed\n [attr.multiple]=\"multiple ? '' : null\" />\n <button class=\"btn btn-info btn-sm\" (click)=\"resetFileUpload()\" *ngIf=\"!hideResetBtn\">Reset</button>\n <br *ngIf=\"!hideSelectBtn\">\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\"><i class=\"fa fa-times\"></i></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 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}}\">{{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>\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> -->\n",
243266
styles: [
244-
".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.delFileIcon{\n text-decoration: none;\n color:#ce0909;\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}"
267+
".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.up_btn{\n color: black;\n background-color: transparent;\n border: 2px solid rgb(92, 91, 91);\n border-radius: 22px;\n}\n.delFileIcon{\n text-decoration: none;\n color:#ce0909;\n}\n/*--------------------- DRAG N DROP ----------------------*/\n#dragNDrop #div1{\n display: border-box;\n border: 2px dashed rgb(92, 91, 91);\n height: 6rem;\n width: 20rem;\n}\n#dragNDrop #div1>p{\n text-align: center;\n font-weight: bold;\n color: rgb(92, 91, 91);\n margin-top: 1.4em;\n}\n\n.dragNDropBtmPad {\n padding-bottom: 2rem;\n}\n/*--------------------- X-X-X-X ----------------------*/\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}\n"
245268
]
246269
},] },
247270
];

‎file-upload.component.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export declare class FileUploadComponent implements OnInit, OnChanges {
1212
multiple: boolean;
1313
headers: any;
1414
hideResetBtn: boolean;
15+
hideSelectBtn: boolean;
1516
idDate: number;
1617
reg: RegExp;
1718
selectedFiles: Array<any>;
@@ -35,4 +36,6 @@ export declare class FileUploadComponent implements OnInit, OnChanges {
3536
removeFile(i: any, sf_na: any): void;
3637
convertSize(fileSize: number): string;
3738
attachpinOnclick(): void;
39+
drop(event: any): void;
40+
allowDrop(event: any): void;
3841
}

0 commit comments

Comments
 (0)