ngxc-file-uploader
Version:
Ngxc file uploader is an Angular 9/10 + file uploader
2 lines • 11.4 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common/http"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngxc-file-uploader",["exports","@angular/core","@angular/common/http","rxjs","rxjs/operators","@angular/common"],t):t((e=e||self)["ngxc-file-uploader"]={},e.ng.core,e.ng.common.http,e.rxjs,e.rxjs.operators,e.ng.common)}(this,(function(e,t,s,i,a,n){"use strict";var l=function(){function e(e){this.http=e,this.resetUpload=!1,this.ApiResponse=new t.EventEmitter,this.uploadInitiated=new t.EventEmitter,this.everythingDone=new t.EventEmitter,this.allowedFiles=[],this.notAllowedFiles=[],this.Caption=[],this.isAllowedFileSingle=!0,this.progressBarShow=!1,this.enableUploadBtn=!1,this.uploadMsg=!1,this.afterUpload=!1,this.uploadStarted=!1,this.currentUploads=[],this.fileNameIndex=!0,this.idDate=+new Date,this.destroy=new i.Subject}return e.prototype.ngOnChanges=function(e){e.config&&this.config&&(this.theme=this.config.theme||"",this.id=this.config.id||parseInt((this.idDate/1e4).toString().split(".")[1],10)+1e4*Math.floor(20*Math.random()),this.hideProgressBar=this.config.hideProgressBar||!1,this.hideResetBtn=this.config.hideResetBtn||!1,this.hideSelectBtn=this.config.hideSelectBtn||!1,this.maxSize=1024e3*(this.config.maxSize||20),this.uploadAPI=this.config.uploadAPI.url,this.method=this.config.uploadAPI.method||"POST",this.formatsAllowed=this.config.formatsAllowed||".jpg,.png,.pdf,.docx,.txt,.gif,.jpeg",this.multiple=this.config.multiple||!1,this.headers=this.config.uploadAPI.headers||{},this.params=this.config.uploadAPI.params||{},this.responseType=this.config.uploadAPI.responseType||null,this.fileNameIndex=!1!==this.config.fileNameIndex,this.replaceTexts={selectFileBtn:this.multiple?"Select Files":"Select File",resetBtn:"Reset",uploadBtn:"Upload",dragNDropBox:"Drag N Drop",pleaseWaitMessage:"Please wait until file is uploaded",attachPinBtn:this.multiple?"Attach Files...":"Attach File...",afterUploadMsg_success:"Successfully Uploaded !",afterUploadMsg_error:"Upload Failed !",sizeLimit:"Size Limit"},this.config.replaceTexts&&(this.replaceTexts=Object.assign(Object.assign({},this.replaceTexts),this.config.replaceTexts))),e.resetUpload&&!0===e.resetUpload.currentValue&&this.resetFileUpload()},e.prototype.ngOnDestroy=function(){this.destroy.next(),this.destroy.complete()},e.prototype.resetFileUpload=function(){this.allowedFiles=[],this.Caption=[],this.notAllowedFiles=[],this.uploadMsg=!1,this.enableUploadBtn=!1},e.prototype.onChange=function(e){this.notAllowedFiles=[];var t,s=/(?:\.([^.]+))?$/;!this.afterUpload&&this.multiple||(this.allowedFiles=[],this.Caption=[],this.afterUpload=!1),t="drop"===e.type?e.dataTransfer.files:e.target.files||e.srcElement.files;for(var i=0;i<t.length;i++){var a=s.exec(t[i].name)[1].toLowerCase(),n=this.formatsAllowed.includes(a),l=t[i].size<=this.maxSize;n&&l?this.allowedFiles.push(t[i]):this.notAllowedFiles.push({fileName:t[i].name,fileSize:this.convertSize(t[i].size),errorMsg:n?"Invalid size":"Invalid format"})}this.allowedFiles.length>0?(this.enableUploadBtn=!0,"attachPin"===this.theme&&this.uploadFiles()):this.enableUploadBtn=!1,this.uploadMsg=!1,this.uploadStarted=!1,this.uploadPercent=0,e.target.value=null},e.prototype.uploadFiles=function(){var e=this;this.uploadInitiated.emit(!0),this.progressBarShow=!0,this.uploadStarted=!0,this.notAllowedFiles=[];var t=!1;this.isAllowedFileSingle=this.allowedFiles.length<=1;var i=new FormData;this.allowedFiles.forEach((function(t,s){i.append(e.Caption[s]||"file"+(e.fileNameIndex?s:""),e.allowedFiles[s])}));var n={headers:this.headers,params:this.params};this.responseType&&(n.responseType=this.responseType),this.httpCallSubscription=this.http.request(this.method.toUpperCase(),this.uploadAPI,Object.assign({body:i,reportProgress:!0,observe:"events"},n)).pipe(a.takeUntil(this.destroy)).subscribe((function(i){if(i.type===s.HttpEventType.UploadProgress){e.enableUploadBtn=!1;i.loaded,i.total;e.uploadPercent=Math.round(i.loaded/i.total*100)}else i.type===s.HttpEventType.Response&&(200===i.status||201===i.status?(e.progressBarShow=!1,e.enableUploadBtn=!1,e.uploadStarted=!1,e.uploadInitiated.emit(!1),e.uploadMsg=!0,e.afterUpload=!0,t||(e.uploadMsgText=e.replaceTexts.afterUploadMsg_success,e.uploadMsgClass="text-success lead")):(t=!0,e.handleErrors()),e.ApiResponse.emit(i))}),(function(s){t=!0,e.handleErrors(),e.ApiResponse.emit(s)}))},e.prototype.handleErrors=function(){this.progressBarShow=!1,this.enableUploadBtn=!1,this.uploadMsg=!0,this.afterUpload=!0,this.uploadMsgText=this.replaceTexts.afterUploadMsg_error,this.uploadMsgClass="text-danger lead",this.uploadStarted=!1,this.uploadInitiated.emit(!1)},e.prototype.removeFile=function(e,t){"sf"===t?(this.allowedFiles.splice(e,1),this.Caption.splice(e,1)):this.notAllowedFiles.splice(e,1),0===this.allowedFiles.length&&(this.enableUploadBtn=!1)},e.prototype.convertSize=function(e){return e<1024e3?(e/1024).toFixed(2)+" KB":(e/1024e3).toFixed(2)+" MB"},e.prototype.attachpinOnclick=function(){var e=document.getElementById("sel"+this.id);null!==e&&e.click()},e.prototype.drop=function(e){e.stopPropagation(),e.preventDefault(),this.onChange(e)},e.prototype.allowDrop=function(e){e.stopPropagation(),e.preventDefault(),e.dataTransfer.dropEffect="copy"},e.prototype.cancelApiCall=function(){this.httpCallSubscription&&this.httpCallSubscription.unsubscribe()},e}();l.decorators=[{type:t.Component,args:[{selector:"ngx-file-uploader",template:'<div class="container" *ngIf="(theme !== \'attachPin\')" id="default">\n\n \x3c!-- Drag n Drop theme Starts --\x3e\n <div *ngIf="!uploadStarted && theme == \'dragNDrop\'" id="dragNDrop"\n [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">{{replaceTexts?.dragNDropBox}}</p>\n </div>\n \x3c!-- <span class=\'label label-info\' id="upload-file-info{{id}}">{{allowedFiles[0]?.name}}</span> --\x3e\n </div>\n </div>\n \x3c!-- Drag n Drop theme Ends --\x3e\n <label for="sel{{id}}" class="btn btn-primary btn-sm afu-select-btn"\n *ngIf="!uploadStarted && !hideSelectBtn">{{replaceTexts?.selectFileBtn}}</label>\n <input type="file" id="sel{{id}}" style="display: none" *ngIf="!hideSelectBtn" (change)="onChange($event)"\n title="Select file" name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? \'\' : null" />\n <button class="btn btn-info btn-sm resetBtn afu-reset-btn" (click)="resetFileUpload()"\n *ngIf="!hideResetBtn">{{replaceTexts?.resetBtn}}</button>\n <br *ngIf="!hideSelectBtn">\n <p class="constraints-info afu-constraints-info">({{formatsAllowed}}) {{replaceTexts?.sizeLimit}}: {{(convertSize(maxSize))}}\n </p>\n \x3c!--Allowed file list--\x3e\n <div class="row afu-valid-file" *ngFor="let sf of allowedFiles;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> </p>\n \x3c!-- <input class="col-xs-3 progress caption" type="text" placeholder="Caption.." [(ngModel)]="Caption[i]" *ngIf="!uploadStarted"/> --\x3e\n <div class="progress col-xs-3 padMarg afu-progress-bar" *ngIf="isAllowedFileSingle && progressBarShow && !hideProgressBar">\n <span class="progress-bar progress-bar-success" role="progressbar"\n [ngStyle]="{\'width\':uploadPercent+\'%\'}">{{uploadPercent}}%</span>\n </div>\n <a class="col-xs-1" role="button" (click)="removeFile(i,\'sf\')" *ngIf="!uploadStarted"><i class="fa fa-times"></i></a>\n </div>\n \x3c!--Not Allowed file list--\x3e\n <div class="row text-danger afu-invalid-file" *ngFor="let na of notAllowedFiles;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="!uploadStarted"> <i\n class="fa fa-times"></i></a>\n </div>\n\n <p *ngIf="uploadMsg" class="{{uploadMsgClass}} + afu-upload-status">{{uploadMsgText}}<p>\n <div *ngIf="!isAllowedFileSingle && progressBarShow && !hideProgressBar">\n <div class="progress col-xs-4 padMarg afu-progress-bar">\n <span class="progress-bar progress-bar-success" role="progressbar"\n [ngStyle]="{\'width\':uploadPercent+\'%\'}">{{uploadPercent}}%</span>\n </div>\n <br />\n <br />\n </div>\n <button *ngIf="!uploadStarted && enableUploadBtn" class="btn btn-success afu-upload-btn" type="button" (click)="uploadFiles()"\n >{{replaceTexts?.uploadBtn}}</button>\n <div *ngIf="uploadStarted" class="uploading-message" >{{replaceTexts?.pleaseWaitMessage}}</div>\n <br>\n</div>\n\n\x3c!--/////////////////////////// ATTACH PIN THEME //////////////////////////////////////////////////////////--\x3e\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 {{replaceTexts?.attachPinBtn}}\n <i class="fa fa-paperclip" aria-hidden="true"></i>\n \x3c!-- <p style="margin-top:10px">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize))}}</p> --\x3e\n <input type="file" id="sel{{id}}" (change)="onChange($event)" style="display: none" title="Select file"\n name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? \'\' : null" />\n <br>\n </a>\n \n <span class=\'label label-info\' id="upload-file-info{{id}}">{{allowedFiles[0]?.name}}</span>\n </div>\n</div>\n\n',encapsulation:t.ViewEncapsulation.None,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}.uploading-message{margin:15px 0}.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}"]}]}],l.ctorParameters=function(){return[{type:s.HttpClient}]},l.propDecorators={config:[{type:t.Input}],resetUpload:[{type:t.Input}],ApiResponse:[{type:t.Output}],uploadInitiated:[{type:t.Output}],everythingDone:[{type:t.Output}]};var o=function(){};o.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,s.HttpClientModule],declarations:[l],exports:[l]}]}],e.NgxFileUploaderComponent=l,e.NgxFileUploaderModule=o,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngxc-file-uploader.umd.min.js.map