ngx-uploader-may/bundles/ngx-uploader-may.umd.min.js

Angular file uploader with drag and drop capability and upload progress

!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("ngx-uploader-may",["exports","@angular/core","@angular/common/http","@angular/common"],t):t(e["ngx-uploader-may"]={},e.ng.core,e.ng.common.http,e.ng.common)}(this,function(e,t,n,o){"use strict";var i=function(){function e(){}return e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=t.defineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),r=function(){function e(e){this.http=e,this._maxAllowedFiles=5,this.onError=new t.EventEmitter,this.onUpload=new t.EventEmitter,this.onSuccess=new t.EventEmitter,this.isFileDragEnter=!1,this.files=[],this.isUploading=!1}return Object.defineProperty(e.prototype,"allowedExtensions",{set:function(e){this._allowedExtensions=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"allowedSize",{set:function(e){this._allowedSize=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maxAllowedFiles",{set:function(e){this._maxAllowedFiles=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"formData",{set:function(e){this._formData=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"formDataUploadKey",{set:function(e){this._formDataUploadKey=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"uploadUrl",{set:function(e){this._uploadUrl=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"uploadReqMethod",{set:function(e){this._uploadReqMethod=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isMulti",{set:function(e){this._isMulti=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.onClickUploaderBtn=function(){this.inputFileField.nativeElement.click()},e.prototype.onFileDragOverEnter=function(e){e.preventDefault(),e.stopPropagation(),this.setOnFileDragged(!0)},e.prototype.onFileDragLeaveEnd=function(e){e.preventDefault(),e.stopPropagation(),this.setOnFileDragged(!1)},e.prototype.onFileDrop=function(e){e.preventDefault(),e.stopPropagation(),this.setOnFileDragged(!1),this.onAttachedFile(e.dataTransfer.files)},e.prototype.setOnFileDragged=function(e){this.isFileDragEnter=e},e.prototype.onAttachedFile=function(e){var t=this;if(this.clearFiles(),console.log(this.files),!this._uploadUrl)throw new Error("Upload URL not provided");if(e.length<1)return!1;if(this._isMulti&&e.length>this._maxAllowedFiles)return this.onError.emit(["Maximum allowed files count is "+this._maxAllowedFiles]),!1;if(!this._isMulti&&1<e.length)return this.onError.emit(["Uploader not configured to upload multiple files"]),!1;if(this._isMulti)for(var o=0;o<e.length;o++){var i;(i=new s).file=e.item(o),this.files.push(i)}else(i=new s).file=e.item(0),this.files.push(i);this.clearFileInput(),this.files.forEach(function(e){t.validate(e)}),0<this.files.filter(function(e){return 0==e.isValid}).length?(this.onError.emit(this.files.filter(function(e){return 0==e.isValid}).map(function(e){return e.invalidMessage})),this.clearFiles()):this.files.forEach(function(e){t.uploadFile(e)})},e.prototype.validate=function(t){var o=this,e=[];this._allowedExtensions&&0==this._allowedExtensions.filter(function(e){return e===o.getFileExtension(t.file)}).length&&e.push("File type not support"),this._allowedSize&&this.getFileSizeMB(t.file)>this._allowedSize&&e.push("File is too large"),t.invalidMessage=e.join(),0<e.length?t.isValid=!1:t.isValid=!0},e.prototype.uploadFile=function(o){var i=this;this.isUploading=!0,o.fileLabel=o.file.name,o.fileSizeLabel=this.getFileSizeLabel(this.getFileSizeMB(o.file)),o.uploadProgress=0;var e=this.createFormData(o.file),t=new n.HttpRequest(this._uploadReqMethod||"POST",this._uploadUrl,e,{reportProgress:!0});this.http.request(t).subscribe(function(e){if(e.type===n.HttpEventType.UploadProgress){var t=Math.round(100*e.loaded/e.total);o.uploadProgress=100<=t?98:t}else e instanceof n.HttpResponse&&(o.uploadProgress=100,200!=e.status&&201!=e.status||i.onUploadSuccess(e,o))},function(e){o.uploadProgress=100,i.onUploadError(e,o)})},e.prototype.onUploadSuccess=function(e,t){t.isSuccess=!0,t.serverResponse=e,this.onUpload.emit(t.serverResponse),this.isAllFilesUploadDone()&&this.publishValue()},e.prototype.onUploadError=function(e,t){t.isSuccess=!1,t.serverResponse=e.error,this.onUpload.emit(t.serverResponse),this.isAllFilesUploadDone()&&this.publishValue()},e.prototype.publishValue=function(){this.isUploading=!1,this.clearFileInput(),this.onSuccess.emit(this.files.map(function(e){return e.serverResponse}))},e.prototype.isAllFilesUploadDone=function(){return!(0<this.files.filter(function(e){return e.uploadProgress<100}).length)},e.prototype.createFormData=function(e){if(!this._formDataUploadKey)throw new Error("Empty form data upload key. Please use upload-form-key in your directive.");if(this._formData){var o=new FormData;return this._formData.forEach(function(e,t){o.append(t,e)}),o.append(this._formDataUploadKey,e),o}var t=new FormData;return t.append(this._formDataUploadKey,e),t},e.prototype.getFileExtension=function(e){return e.name.split(".").pop()},e.prototype.getFileSizeMB=function(e){return e.size/1e6},e.prototype.getFileSizeLabel=function(e){return 1<e&&e<1e3?e.toFixed(2)+"Mb":e<1?(1e3*e).toFixed(2)+"Kb":void 0},e.prototype.clearFileInput=function(){this.inputFileField.nativeElement.value=""},e.prototype.clearFiles=function(){this.files=[]},e.prototype.reset=function(){this.clearFiles(),this.clearFileInput(),this.isFileDragEnter=!1,this.isUploading=!1},e.decorators=[{type:t.Component,args:[{selector:"ngx-uploader-may",template:'<div class="__ngx-uploader">\n    <div class="upload-area">\n        <div class="placeholder-area">\n            <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU4Ljk5OSA1OC45OTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU4Ljk5OSA1OC45OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxwYXRoIGQ9Ik0xOS40NzksMTIuMDE5YzAuMjU2LDAsMC41MTItMC4wOTgsMC43MDctMC4yOTNsOC4zMTMtOC4zMTN2MzUuNTg2YzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFWMy40MTNsOC4yNzIsOC4yNzIgICBjMC4zOTEsMC4zOTEsMS4wMjMsMC4zOTEsMS40MTQsMHMwLjM5MS0xLjAyMywwLTEuNDE0bC05Ljk3OC05Ljk3OGMtMC4wOTItMC4wOTMtMC4yMDMtMC4xNjYtMC4zMjctMC4yMTcgICBjLTAuMjQ0LTAuMTAxLTAuNTE5LTAuMTAxLTAuNzY0LDBjLTAuMTIzLDAuMDUxLTAuMjM0LDAuMTI1LTAuMzI2LDAuMjE3TDE4Ljc3MiwxMC4zMTJjLTAuMzkxLDAuMzkxLTAuMzkxLDEuMDIzLDAsMS40MTQgICBDMTguOTY3LDExLjkyMiwxOS4yMjMsMTIuMDE5LDE5LjQ3OSwxMi4wMTl6IiBmaWxsPSIjZDVkNWQ1Ii8+Cgk8cGF0aCBkPSJNMzYuNDk5LDE1Ljk5OWMtMC41NTMsMC0xLDAuNDQ3LTEsMXMwLjQ0NywxLDEsMWgxM3YzOWgtNDB2LTM5aDEzYzAuNTUzLDAsMS0wLjQ0NywxLTFzLTAuNDQ3LTEtMS0xaC0xNXY0M2g0NHYtNDNIMzYuNDk5ICAgeiIgZmlsbD0iI2Q1ZDVkNSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />\n            <p>\n                Drag files to upload\n            </p>\n        </div>\n        <button type="button" [disabled]="isUploading" [ngClass]="{\'on-file-drag\': isFileDragEnter}" (click)="onClickUploaderBtn()" (drop)="onFileDrop($event)" (dragover)="onFileDragOverEnter($event)" (dragenter)="onFileDragOverEnter($event)" (dragleave)="onFileDragLeaveEnd($event)" (dragend)="onFileDragLeaveEnd($event)"></button>\n    </div>\n    <input #uploadField type="file" (change)="onAttachedFile($event.target.files)" [attr.multiple]="_isMulti ? \'\' : null">\n    <div *ngFor="let item of files" class="upload-progress-container">\n        <small>{{item.fileSizeLabel}}</small>\n        <div class="upload-progress-bar">\n            <div class="upload-progress" [ngStyle]="{\'width\': item.uploadProgress+\'%\'}" [ngClass]="{\'upload-progress-red\': item.uploadProgress==100 && !item.isSuccess}"></div>\n        </div>\n        <div class="progress-text">\n            <small>{{item.uploadProgress}}%</small>\n            <small>\n                <img *ngIf="item.uploadProgress==100 && item.isSuccess" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDM3LjAxOSw3NC45OEMzODguNjY3LDI2LjYyOSwzMjQuMzgsMCwyNTYsMEMxODcuNjE5LDAsMTIzLjMzMiwyNi42MjksNzQuOTgsNzQuOThDMjYuNjI5LDEyMy4zMzIsMCwxODcuNjIsMCwyNTYgICAgczI2LjYyOSwxMzIuNjY3LDc0Ljk4LDE4MS4wMTlDMTIzLjMzMiw0ODUuMzcxLDE4Ny42Miw1MTIsMjU2LDUxMnMxMzIuNjY3LTI2LjYyOSwxODEuMDE5LTc0Ljk4ICAgIEM0ODUuMzcxLDM4OC42NjcsNTEyLDMyNC4zOCw1MTIsMjU2UzQ4NS4zNzEsMTIzLjMzMyw0MzcuMDE5LDc0Ljk4eiBNMzc4LjMwNiwxOTUuMDczTDIzNS4yNDEsMzM4LjEzOSAgICBjLTIuOTI5LDIuOTI5LTYuNzY4LDQuMzkzLTEwLjYwNiw0LjM5M2MtMy44MzksMC03LjY3OC0xLjQ2NC0xMC42MDctNC4zOTNsLTgwLjMzNC04MC4zMzNjLTUuODU4LTUuODU3LTUuODU4LTE1LjM1NCwwLTIxLjIxMyAgICBjNS44NTctNS44NTgsMTUuMzU1LTUuODU4LDIxLjIxMywwbDY5LjcyOCw2OS43MjdsMTMyLjQ1OC0xMzIuNDZjNS44NTctNS44NTgsMTUuMzU1LTUuODU4LDIxLjIxMywwICAgIEMzODQuMTY0LDE3OS43MTgsMzg0LjE2NCwxODkuMjE1LDM3OC4zMDYsMTk1LjA3M3oiIGZpbGw9IiMzMmM3NDEiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />\n                <img *ngIf="item.uploadProgress==100 && !item.isSuccess" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUyIDUyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MiA1MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwYXRoIGQ9Ik0yNiwwQzExLjY2NCwwLDAsMTEuNjYzLDAsMjZzMTEuNjY0LDI2LDI2LDI2czI2LTExLjY2MywyNi0yNlM0MC4zMzYsMCwyNiwweiBNMjYsNTBDMTIuNzY3LDUwLDIsMzkuMjMzLDIsMjYgICBTMTIuNzY3LDIsMjYsMnMyNCwxMC43NjcsMjQsMjRTMzkuMjMzLDUwLDI2LDUweiIgZmlsbD0iI0Q4MDAyNyIvPgoJPHBhdGggZD0iTTM1LjcwNywxNi4yOTNjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBMMjYsMjQuNTg2bC04LjI5My04LjI5M2MtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMCAgIHMtMC4zOTEsMS4wMjMsMCwxLjQxNEwyNC41ODYsMjZsLTguMjkzLDguMjkzYy0wLjM5MSwwLjM5MS0wLjM5MSwxLjAyMywwLDEuNDE0QzE2LjQ4OCwzNS45MDIsMTYuNzQ0LDM2LDE3LDM2ICAgczAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzTDI2LDI3LjQxNGw4LjI5Myw4LjI5M0MzNC40ODgsMzUuOTAyLDM0Ljc0NCwzNiwzNSwzNnMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5MyAgIGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDI3LjQxNCwyNmw4LjI5My04LjI5M0MzNi4wOTgsMTcuMzE2LDM2LjA5OCwxNi42ODQsMzUuNzA3LDE2LjI5M3oiIGZpbGw9IiNEODAwMjciLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />\n                {{item.fileLabel}}\n            </small>\n        </div>\n    </div>\n</div>',styles:[".__ngx-uploader input{display:none}.__ngx-uploader .upload-area{padding:5rem;background-color:#fafafa;position:relative;border:1.5px dashed #d5d5d5}.__ngx-uploader .upload-area .placeholder-area{display:flex;align-items:center;justify-content:center;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0}.__ngx-uploader .upload-area .placeholder-area img{width:30px;margin-bottom:10px}.__ngx-uploader .upload-area button{position:absolute;top:0;left:0;right:0;bottom:0;background:0 0;border:none;cursor:pointer;width:100%;padding:0}.__ngx-uploader .upload-area button:focus{outline:0}.__ngx-uploader .upload-area button:active{box-shadow:inset 0 1px 20px -3px rgba(16,83,158,.72)}.__ngx-uploader .upload-area button:hover{background:rgba(11,116,150,.1)}.__ngx-uploader .upload-area button.on-file-drag{background:rgba(0,0,0,.5)}.__ngx-uploader .upload-progress-container{margin-top:15px}.__ngx-uploader .upload-progress-container p{margin-bottom:5px}.__ngx-uploader .upload-progress-container .upload-progress-bar{background-color:#e2e7ee;height:5px;margin-bottom:5px;border-radius:4px}.__ngx-uploader .upload-progress-container .upload-progress-bar .upload-progress{height:100%;width:0;background-color:#1991eb;transition:width .6s;border-radius:4px}.__ngx-uploader .upload-progress-container .upload-progress-bar .upload-progress.upload-progress-red{background-color:#c50000}.__ngx-uploader .upload-progress-container .progress-text,.__ngx-uploader .upload-progress-container .progress-text small{display:flex;align-items:center;justify-content:space-between;flex-direction:row}.__ngx-uploader .upload-progress-container .progress-text small img{margin-right:5px}"]}]}],e.ctorParameters=function(){return[{type:n.HttpClient}]},e.propDecorators={inputFileField:[{type:t.ViewChild,args:["uploadField"]}],allowedExtensions:[{type:t.Input,args:["allowed-extensions"]}],allowedSize:[{type:t.Input,args:["allowed-size"]}],maxAllowedFiles:[{type:t.Input,args:["max-allowed-files"]}],formData:[{type:t.Input,args:["form-data"]}],formDataUploadKey:[{type:t.Input,args:["upload-form-key"]}],uploadUrl:[{type:t.Input,args:["upload-url"]}],uploadReqMethod:[{type:t.Input,args:["request-method"]}],isMulti:[{type:t.Input,args:["is-multi"]}],onError:[{type:t.Output,args:["onError"]}],onUpload:[{type:t.Output,args:["onUpload"]}],onSuccess:[{type:t.Output,args:["onSuccess"]}]},e}(),s=function a(){},l=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[r],imports:[o.CommonModule,n.HttpClientModule],exports:[r]}]}],e}();e.NgxUploaderMayService=i,e.NgxUploaderMayComponent=r,e.UploadFile=s,e.NgxUploaderMayModule=l,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-uploader-may.umd.min.js.map