angular-file-uploader/bundles/angular-file-uploader.umd.min.js

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.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common/http"),require("@angular/common")):"function"==typeof define&&define.amd?define("angular-file-uploader",["exports","@angular/core","@angular/common/http","@angular/common"],t):t((e=e||self)["angular-file-uploader"]={},e.ng.core,e.ng.common.http,e.ng.common)}(this,(function(e,t,s,i){"use strict";var a=function(){function e(e){this.http=e,this.resetUpload=!1,this.ApiResponse=new t.EventEmitter,this.fileSelected=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.withCredentials=!1,this.autoUpload=!1,this.idDate=+new Date}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||"*",this.formatsAllowedText="*"===this.formatsAllowed?"":"("+this.formatsAllowed+")",this.multiple=this.config.multiple||!1,this.headers=this.config.uploadAPI.headers||{},this.params=this.config.uploadAPI.params||{},this.responseType=this.config.uploadAPI.responseType||"json",this.withCredentials=this.config.uploadAPI.withCredentials||!1,this.fileNameIndex=!1!==this.config.fileNameIndex,this.autoUpload=this.config.autoUpload||!1,this.replaceTexts={selectFileBtn:this.multiple?"Select Files":"Select File",resetBtn:"Reset",uploadBtn:"Upload",dragNDropBox:"Drag N Drop",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.resetFileUpload=function(){this.allowedFiles=[],this.Caption=[],this.notAllowedFiles=[],this.uploadMsg=!1,this.enableUploadBtn=!1},e.prototype.onChange=function(e){this.fileSelected.emit(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(),l=!!this.formatsAllowed.includes("*")||this.formatsAllowed.includes(a),o=t[i].size<=this.maxSize;l&&o?this.allowedFiles.push(t[i]):this.notAllowedFiles.push({fileName:t[i].name,fileSize:this.convertSize(t[i].size),errorMsg:l?"Invalid size":"Invalid format"})}this.allowedFiles.length>0?(this.enableUploadBtn=!0,("attachPin"===this.theme||this.autoUpload)&&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.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])})),this.http.request(this.method.toUpperCase(),this.uploadAPI,{body:i,reportProgress:!0,observe:"events",headers:this.headers,params:this.params,responseType:this.responseType,withCredentials:this.withCredentials}).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.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"},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}();a.decorators=[{type:t.Component,args:[{selector:"angular-file-uploader",template:'<div class="container" *ngIf="(theme !== \'attachPin\')" id="default">\r\n\r\n  \x3c!-- Drag n Drop theme Starts --\x3e\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      \x3c!-- <span class=\'label label-info\' id="upload-file-info{{id}}">{{allowedFiles[0]?.name}}</span> --\x3e\r\n    </div>\r\n  </div>\r\n  \x3c!-- Drag n Drop theme Ends --\x3e\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  \x3c!--Allowed file list--\x3e\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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>\r\n    \x3c!--  <input class="col-xs-3 progress caption"  type="text"  placeholder="Caption.."  [(ngModel)]="Caption[i]"  *ngIf="!uploadStarted"/> --\x3e\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  \x3c!--Not Allowed file list--\x3e\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">&nbsp;<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\x3c!--/////////////////////////// ATTACH PIN THEME  //////////////////////////////////////////////////////////--\x3e\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      \x3c!-- <p style="margin-top:10px">({{formatsAllowedText}}) Size limit- {{(convertSize(maxSize))}}</p> --\x3e\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    &nbsp;\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}"]}]}],a.ctorParameters=function(){return[{type:s.HttpClient,decorators:[{type:t.SkipSelf}]}]},a.propDecorators={config:[{type:t.Input}],resetUpload:[{type:t.Input}],ApiResponse:[{type:t.Output}],fileSelected:[{type:t.Output}]};var l=function(){};l.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,s.HttpClientModule],declarations:[a],exports:[a]}]}],e.AngularFileUploaderComponent=a,e.AngularFileUploaderModule=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=angular-file-uploader.umd.min.js.map