angular-file-uploader

Version:

Angular file uploader is an Angular 2/4/5/6/7/8/9/10/11/12/13 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility and multiple themes which includes Drag and Drop and much more.

kzrfaisal.github.io

kzrfaisal/angular-file-uploader

1 lines • 8.46 kB

JSON

View Raw

{"__symbolic":"module","version":4,"metadata":{"AngularFileUploaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"angular-file-uploader","template":"<div class=\"container\" *ngIf=\"(theme !== 'attachPin')\" id=\"default\">\r\n\r\n \r\n <div *ngIf=\"theme == 'dragNDrop'\" id=\"dragNDrop\"\r\n [ngClass]=\"(hideSelectBtn && hideResetBtn) ? null : 'dragNDropBtmPad'\" class=\"dragNDrop\">\r\n <div style=\"position:relative;\">\r\n <div id=\"div1\" class=\"div1 afu-dragndrop-box\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n <p class=\"afu-dragndrop-text\">{{replaceTexts?.dragNDropBox}}</p>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n\r\n <label for=\"sel{{id}}\" class=\"btn btn-primary btn-sm afu-select-btn\" [ngClass]=\"progressBarShow ? 'disabled' : null\"\r\n *ngIf=\"!hideSelectBtn\">{{replaceTexts?.selectFileBtn}}</label>\r\n <input type=\"file\" id=\"sel{{id}}\" style=\"display: none\" *ngIf=\"!hideSelectBtn\" [disabled]=\"progressBarShow\"\r\n (change)=\"onChange($event)\" title=\"Select file\" name=\"files[]\" [accept]=formatsAllowed\r\n [attr.multiple]=\"multiple ? '' : null\" />\r\n <button class=\"btn btn-info btn-sm resetBtn afu-reset-btn\" (click)=\"resetFileUpload()\" *ngIf=\"!hideResetBtn\"\r\n [disabled]=\"progressBarShow\">{{replaceTexts?.resetBtn}}</button>\r\n <br *ngIf=\"!hideSelectBtn\">\r\n <p class=\"constraints-info afu-constraints-info\">{{formatsAllowedText}} {{replaceTexts?.sizeLimit}}:\r\n {{(convertSize(maxSize))}}\r\n </p>\r\n \r\n <div class=\"row afu-valid-file\" *ngFor=\"let sf of allowedFiles;let i=index\">\r\n <p class=\"col-xs-3 textOverflow\"><span class=\"text-primary\">{{sf.name}}</span></p>\r\n <p class=\"col-xs-3 padMarg sizeC\"><strong>({{convertSize(sf.size)}})</strong>     </p>\r\n \r\n <div class=\"progress col-xs-3 padMarg afu-progress-bar\"\r\n *ngIf=\"isAllowedFileSingle && progressBarShow && !hideProgressBar\">\r\n <span class=\"progress-bar progress-bar-success\" role=\"progressbar\"\r\n [ngStyle]=\"{'width':uploadPercent+'%'}\">{{uploadPercent}}%</span>\r\n </div>\r\n <a class=\"col-xs-1\" role=\"button\" (click)=\"removeFile(i,'sf')\" *ngIf=\"!uploadStarted\"><i\r\n class=\"fa fa-times\"></i></a>\r\n </div>\r\n \r\n <div class=\"row text-danger afu-invalid-file\" *ngFor=\"let na of notAllowedFiles;let j=index\">\r\n <p class=\"col-xs-3 textOverflow\"><span>{{na['fileName']}}</span></p>\r\n <p class=\"col-xs-3 padMarg sizeC\"><strong>({{na['fileSize']}})</strong></p>\r\n <p class=\"col-xs-3 \">{{na['errorMsg']}}</p>\r\n <a class=\"col-xs-1 delFileIcon\" role=\"button\" (click)=\"removeFile(j,'na')\" *ngIf=\"!uploadStarted\"> <i\r\n class=\"fa fa-times\"></i></a>\r\n </div>\r\n\r\n <p *ngIf=\"uploadMsg\" class=\"{{uploadMsgClass}} + afu-upload-status\">{{uploadMsgText}}\r\n <p>\r\n <div *ngIf=\"!isAllowedFileSingle && progressBarShow && !hideProgressBar\">\r\n <div class=\"progress col-xs-4 padMarg afu-progress-bar\">\r\n <span class=\"progress-bar progress-bar-success\" role=\"progressbar\"\r\n [ngStyle]=\"{'width':uploadPercent+'%'}\">{{uploadPercent}}%</span>\r\n </div>\r\n <br>\r\n <br>\r\n </div>\r\n <button class=\"btn btn-success afu-upload-btn\" type=\"button\" (click)=\"uploadFiles()\"\r\n [disabled]=\"!enableUploadBtn && progressBarShow\" *ngIf=\"!autoUpload\">{{replaceTexts?.uploadBtn}}</button>\r\n <br>\r\n</div>\r\n\r\n\r\n<div *ngIf=\"theme == 'attachPin'\" id=\"attachPin\">\r\n <div style=\"position:relative;padding-left:6px\">\r\n <a class='btn up_btn afu-attach-pin' (click)=\"attachpinOnclick()\">\r\n {{replaceTexts?.attachPinBtn}}\r\n <i class=\"fa fa-paperclip\" aria-hidden=\"true\"></i>\r\n \r\n <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\r\n name=\"files[]\" [accept]=formatsAllowed [attr.multiple]=\"multiple ? '' : null\" />\r\n <br>\r\n </a>\r\n  \r\n <span class='label label-info' id=\"upload-file-info{{id}}\">{{allowedFiles[0]?.name}}</span>\r\n </div>\r\n</div>","styles":[".constraints-info{font-style:italic;margin-top:10px}.padMarg{margin-bottom:0;padding:0}.caption{margin-right:5px}.textOverflow{overflow:hidden;padding-right:0;text-overflow:ellipsis;white-space:nowrap}.up_btn{background-color:transparent;border:2px solid #5c5b5b;border-radius:22px;color:#000}.delFileIcon{color:#ce0909;text-decoration:none}.selectBtnDisabled{background-color:#ccc;border:1px solid #999;color:#666;cursor:no-drop}.dragNDrop .div1{border:2px dashed #5c5b5b;display:border-box;height:6rem;width:20rem}.dragNDrop .div1>p{color:#5c5b5b;font-weight:700;margin-top:1.4em;text-align:center}.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":31,"character":3}}]}],"resetUpload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"ApiResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"fileSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":83,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":83,"character":40}]}],"ngOnChanges":[{"__symbolic":"method"}],"resetFileUpload":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"uploadFiles":[{"__symbolic":"method"}],"handleErrors":[{"__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":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":8,"character":4}],"declarations":[{"__symbolic":"reference","name":"AngularFileUploaderComponent"}],"exports":[{"__symbolic":"reference","name":"AngularFileUploaderComponent"}]}]}],"members":{}},"ReplaceTexts":{"__symbolic":"interface"},"UploadApi":{"__symbolic":"interface"},"AngularFileUploaderConfig":{"__symbolic":"interface"},"UploadInfo":{"__symbolic":"interface"}},"origins":{"AngularFileUploaderComponent":"./lib/angular-file-uploader.component","AngularFileUploaderModule":"./lib/angular-file-uploader.module","ReplaceTexts":"./lib/angular-file-uploader.types","UploadApi":"./lib/angular-file-uploader.types","AngularFileUploaderConfig":"./lib/angular-file-uploader.types","UploadInfo":"./lib/angular-file-uploader.types"},"importAs":"angular-file-uploader"}