ngx-uploader-directive
Version:
Angular File Uploader Directive which provides two directives, which are select and file drag and drop to upload files on server.
2 lines • 15 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")):"function"==typeof define&&define.amd?define("ngx-uploader-directive",["exports","@angular/core","@angular/common/http","rxjs","rxjs/operators"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["ngx-uploader-directive"]={},e.ng.core,e.ng.common.http,e.rxjs,e.rxjs.operators)}(this,(function(e,t,n,r,s){"use strict";var i={production:!0},o=function(){function e(e,n,o,u,l,p,a){var d=this;void 0===e&&(e=Number.POSITIVE_INFINITY),void 0===n&&(n=Number.POSITIVE_INFINITY),void 0===o&&(o=["*"]),void 0===u&&(u=Number.POSITIVE_INFINITY),void 0===l&&(l=Number.POSITIVE_INFINITY),this.httpClient=p,this.logs=a,this.devEnv=!i.production,this.queue=new Array,this.MaxNumberOfRequest=10,this.fileServiceEvents=new t.EventEmitter,this.uploadScheduler=new r.Subject,this.maxFilesToAddInSingleRequest=0,this.fileTypes=o,this.maxFileUploads=u,this.maxFilesToAddInSingleRequest=n,this.maxFileSize=l,this.subscriptions=new Array,this.uploadScheduler.pipe(s.mergeMap((function(e){return d.startUpload(e)}),0===e?this.MaxNumberOfRequest:e)).subscribe((function(e){return d.fileServiceEvents.emit(e)}))}return e.prototype.handleSelectedFiles=function(e,t){if(this.queue=new Array,this.fileServiceEvents.emit({type:"init",fileSelectedEventType:t}),e.length>this.maxFileUploads)return this.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Maxium "+this.maxFileUploads+" files can be upload"}),void this.fileServiceEvents.emit({type:"error",response:this.httpErrorResponse,fileSelectedEventType:t});for(var r,s=new Array,i=new Array,o=0;o<e.length;o++){var u=e[o];s.length,this.queue.length;if(this.isFileTypeAllowed(u.type)&&this.isFileSizeAllowed(u.size))s.push(u);else{var l=this.convertToSelectedFile(u,o,this.generateRandomeId(),t);i.push(l)}}i.length>0&&(this.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Invalid file type or file size exceeded the limit "+this.humanizeBytes(this.maxFileSize),statusText:"Invalid Input"}),this.fileServiceEvents.emit({type:"rejected",files:i,fileSelectedEventType:t,response:this.httpErrorResponse})),this.logs&&console.info("Allowed Files",s);var p=new Array;if(0===this.maxFilesToAddInSingleRequest||1===this.maxFilesToAddInSingleRequest)for(var a=this.generateRandomeId(),d=0;d<s.length;d++){var c=s[d],v=void 0;0===this.maxFilesToAddInSingleRequest?v=this.convertToSelectedFile(c,d,a,t):1===this.maxFilesToAddInSingleRequest&&(v=this.convertToSelectedFile(c,d,this.generateRandomeId(),t)),this.queue.push(v),(r=new Array).push(v),p.push(v),this.fileServiceEvents.emit({type:"addedToQueue",files:r,requestId:v.requestId,fileSelectedEventType:t})}else for(var h=this.chunkArray(s,this.maxFilesToAddInSingleRequest),f=(d=0,0);f<h.length;f++){var y=h[f];a=this.generateRandomeId();r=new Array;for(var m=0;m<y.length;m++){var E=y[m],g=this.convertToSelectedFile(E,d,a,t);this.queue.push(g),r.push(g),p.push(g),d+=1}this.fileServiceEvents.emit({type:"addedToQueue",files:r,requestId:a,fileSelectedEventType:t})}this.queue.length>0&&this.fileServiceEvents.emit({type:"allAddedToQueue",files:p,fileSelectedEventType:t}),this.logs&&console.info("Queue",this.queue)},e.prototype.handleInputEvents=function(t){var r=this;return t.subscribe((function(t){if(r.logs&&r.devEnv&&console.info("Input event",t),0!==r.queue.length){var s=t.requestId;switch(t.type){case"uploadFile":if(!s)return r.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Invalid request id.",statusText:"Invalid Input"}),void r.fileServiceEvents.emit({type:"error",response:r.httpErrorResponse,fileSelectedEventType:"ALL"});r.uploadScheduler.next({files:r.queue.filter((function(e){return e.requestId===t.requestId})),event:t});break;case"uploadAll":var i=r.groupByArray(r.queue.filter((function(e){return"Queue"===e.progress.status})),"requestId");for(var o in r.logs&&console.info("Group of request",i),i)if(i.hasOwnProperty(o)){var u=i[o];r.logs&&r.devEnv&&console.info("Requesting for id "+o,u),r.uploadScheduler.next({files:u,event:t})}break;case"cancel":if(!s)return r.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Invalid request id.",statusText:"Invalid Input"}),void r.fileServiceEvents.emit({type:"error",response:r.httpErrorResponse,fileSelectedEventType:"ALL"});var l=r.subscriptions.filter((function(e){return e.id===s}));r.logs&&r.devEnv&&console.info("subscriptions ",l),l.forEach((function(e){if(e.sub){e.sub.unsubscribe();var t=r.queue.filter((function(e){return e.requestId===s}));t.length>0?(r.queue.forEach((function(e,t,n){n[t].progress.status="Cancelled"})),r.fileServiceEvents.emit({type:"cancelled",requestId:s,files:t,fileSelectedEventType:t[0].selectedEventType})):(r.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Files not found with request id "+s}),r.fileServiceEvents.emit({type:"error",response:r.httpErrorResponse,fileSelectedEventType:"ALL"}))}}));break;case"cancelAll":r.subscriptions.forEach((function(e){e.sub&&e.sub.unsubscribe(),r.logs&&r.devEnv&&console.info("subscriptions ",l);var t=r.queue.filter((function(t){return t.requestId===e.id}));t.length>0?(r.queue.forEach((function(e,t,n){n[t].progress.status="Cancelled"})),r.fileServiceEvents.emit({type:"cancelled",files:t,fileSelectedEventType:t[0].selectedEventType})):(r.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Files not found with request id "+s,statusText:"Invalid Input"}),r.fileServiceEvents.emit({type:"error",response:r.httpErrorResponse,fileSelectedEventType:"ALL"}))}));break;case"remove":if(!s)return r.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Invalid request id.",statusText:"Invalid Input"}),void r.fileServiceEvents.emit({type:"error",response:r.httpErrorResponse,fileSelectedEventType:"ALL"});var p=r.queue.filter((function(e){return e.requestId===t.requestId}));if(p.length>0){var a=r.queue.filter((function(e){return e.requestId!==t.requestId}));r.queue=a,r.fileServiceEvents.emit({type:"removed",requestId:t.requestId,files:p,fileSelectedEventType:"ALL"})}else r.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Files not found with request id "+s,statusText:"Invalid Input"}),r.fileServiceEvents.emit({type:"error",response:r.httpErrorResponse,fileSelectedEventType:"ALL"});break;case"removeAll":r.queue.length&&(r.queue=new Array,r.fileServiceEvents.emit({type:"removedAll",files:r.queue,fileSelectedEventType:"ALL"}))}e.inputEventReferenceNumber!==t.inputReferenceNumber&&(e.inputEventReferenceNumber=t.inputReferenceNumber)}}))},e.prototype.isFileTypeAllowed=function(e){return!(void 0===this.fileTypes.find((function(e){return"*"===e})))||void 0!==this.fileTypes.find((function(t){return t===e}))},e.prototype.startUpload=function(e){var t=this;return new r.Observable((function(n){var r=t.uploadFilesHttpRequest(e.files,e.event).pipe(s.finalize((function(){n.closed||n.complete()}))).subscribe((function(e){n.next(e)}),(function(e){n.error(e),n.complete()}),(function(){n.complete()}));t.subscriptions.push({id:e.files[0].requestId,sub:r}),t.logs&&t.devEnv&&console.info("subscriptions ",t.subscriptions)}))},e.prototype.uploadFilesHttpRequest=function(e,t){var s=this;return new r.Observable((function(r){var i=(new Date).getTime(),o=0,u=null,l=e,p=t.headers||{};if(s.logs&&s.devEnv&&console.info("Files to Upload",l),l.length>0){e.forEach((function(e,t){e.nativeFile.size}));var a=new FormData;if(void 0!==t.data&&Object.keys(t.data).forEach((function(e){return a.append(e,t.data[e])})),l.length>1)for(var d=0;d<e.length;d++){e[d];a.append("file_"+(d+1),l[d].nativeFile,l[d].name)}else a.append("file",l[0].nativeFile,l[0].name);"Cancelled"===s.queue.filter((function(e){return e.requestId===l[0].requestId}))[0].progress.status&&r.complete(),r.next({type:"start",requestId:e[0].requestId,files:e,fileSelectedEventType:e[0].selectedEventType});var c=new n.HttpRequest(t.method,t.url,a,{headers:new n.HttpHeaders(p),reportProgress:!0}),v=s.httpClient.request(c).subscribe((function(t){switch(t.type){case n.HttpEventType.UploadProgress:var l=Math.round(100*t.loaded/t.total),p=(new Date).getTime()-i;o=Math.round(t.loaded/p*1e3),u=Math.ceil((t.total-t.loaded)/o);var a={status:"Uploading",data:{percentage:l,speed:o,speedHuman:s.humanizeBytes(o)+"/s",startTime:null,endTime:null,eta:u,etaHuman:s.secondsToHuman(u)}};e.forEach((function(e,t,n){n[t].progress=a})),r.next({type:"uploading",requestId:e[0].requestId,files:e,progress:a,fileSelectedEventType:e[0].selectedEventType});break;case n.HttpEventType.Response:e[0].response=t.body;var d={status:"Done",data:{percentage:100,speed:o,speedHuman:s.humanizeBytes(o)+"/s",startTime:null,endTime:(new Date).getTime(),eta:u,etaHuman:s.secondsToHuman(u||0)}};e.forEach((function(e,n,r){r[n].response=t.body})),r.next({type:"done",requestId:e[0].requestId,response:t.body,progress:d,fileSelectedEventType:e[0].selectedEventType,files:e}),r.complete()}}),(function(t){r.next({type:"error",requestId:e[0].requestId,response:t,fileSelectedEventType:e[0].selectedEventType}),r.complete()}));s.subscriptions.push({id:e[0].requestId,sub:v})}else s.httpErrorResponse=new n.HttpErrorResponse({status:0,error:"Files not available for upload",statusText:"Invalid Input"}),r.next({type:"error",requestId:e[0].requestId,response:s.httpErrorResponse}),r.complete()}))},e.prototype.httpRequest=function(e,t,r,s){var i=new n.HttpRequest(e,t,r,{headers:s,reportProgress:!0});return this.httpClient.request(i)},e.prototype.secondsToHuman=function(e){return new Date(1e3*e).toISOString().substr(11,8)},e.prototype.isFileSizeAllowed=function(e){return!this.maxFileSize||e<=this.maxFileSize},e.prototype.generateRandomeId=function(){return"_"+Math.random().toString(36).substr(2,9)},e.prototype.humanizeBytes=function(e){if(0===e)return"0 Byte";var t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["Bytes","KB","MB","GB","TB","PB"][t]},e.prototype.convertToSelectedFile=function(e,t,n,r){return{fileIndex:t,requestId:n,name:e.name,nativeFile:e,type:e.type,selectedEventType:r,progress:{status:"Queue",data:{percentage:0,eta:0,speed:0,speedHuman:this.humanizeBytes(0),startTime:null,endTime:null,etaHuman:null}}}},e.prototype.chunkArray=function(e,t){var n=new Array,r=0,s=e.length;for(r=0;r<s;r+=t){var i=e.slice(r,r+t);n.push(i)}return n},e.prototype.groupByArray=function(e,t){return e.reduce((function(e,n){return(e[n[t]]=e[n[t]]||[]).push(n),e}),{})},e}();o.inputEventReferenceNumber=0;var u=function(){function e(e,n){this.elementRef=e,this.httpClient=n,this.devEnv=!i.production,this.stopEvent=function(e){e.stopPropagation(),e.preventDefault()},this.uploadOutput=new t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;this.subscriptions=new Array;var n=this.options.requestConcurrency,r=this.options.allowedFileTypes,s=this.options.maxFileUploads,i=this.options.maxFileSize;this.uploadService=new o(n,this.options.maxFilesToAddInSingleRequest,r,s,i,this.httpClient,this.options.logs),this.element=this.elementRef.nativeElement,this.element.addEventListener("drop",this.stopEvent,!1),this.element.addEventListener("dragenter",this.stopEvent,!1),this.element.addEventListener("dragover",this.stopEvent,!1),this.subscriptions.push(this.uploadService.fileServiceEvents.subscribe((function(t){"DROP"!==t.fileSelectedEventType&&"ALL"!==t.fileSelectedEventType||(e.options.logs&&e.devEnv&&console.info("Output drop event",t),"error"===t.type||"removedAll"===t.type?(e.element.files=null,e.element.value=""):"removed"!==t.type&&"rejected"!==t.type||0===e.uploadService.queue.length&&(e.element.files=null,e.element.value=""),e.uploadOutput.emit(t))}))),this.uploadInput instanceof t.EventEmitter&&(this.options.logs&&this.devEnv&&console.info("Input drop Init"),this.subscriptions.push(this.uploadService.handleInputEvents(this.uploadInput)))},e.prototype.ngOnDestroy=function(){this.subscriptions.forEach((function(e){return e.unsubscribe()}))},e.prototype.onDrop=function(e){e.stopPropagation(),e.preventDefault();this.uploadOutput.emit({type:"drop",fileSelectedEventType:"DROP"}),this.uploadService.handleSelectedFiles(e.dataTransfer.files,"DROP")},e.prototype.onDragOver=function(e){if(e){this.uploadOutput.emit({type:"dragOver",fileSelectedEventType:"DROP"})}},e.prototype.onDragLeave=function(e){if(e){this.uploadOutput.emit({type:"dragOut",fileSelectedEventType:"DROP"})}},e}();u.decorators=[{type:t.Directive,args:[{selector:"[ngxFileDrop]"}]}],u.ctorParameters=function(){return[{type:t.ElementRef},{type:n.HttpClient}]},u.propDecorators={options:[{type:t.Input}],uploadInput:[{type:t.Input}],uploadOutput:[{type:t.Output}],onDrop:[{type:t.HostListener,args:["drop",["$event"]]}],onDragOver:[{type:t.HostListener,args:["dragover",["$event"]]}],onDragLeave:[{type:t.HostListener,args:["dragleave",["$event"]]}]};var l=function(){function e(e,n){var r=this;this.elementRef=e,this.httpClient=n,this.devEnv=!i.production,this.fileListener=function(){r.element.files&&r.uploadService.handleSelectedFiles(r.element.files,"SELECT")},this.uploadOutput=new t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;this.subscriptions=new Array;var n=this.options.requestConcurrency,r=this.options.allowedFileTypes,s=this.options.maxFileUploads,i=this.options.maxFileSize;this.uploadService=new o(n,this.options.maxFilesToAddInSingleRequest,r,s,i,this.httpClient,this.options.logs),this.element=this.elementRef.nativeElement,this.element.addEventListener("change",this.fileListener,!1),this.subscriptions.push(this.uploadService.fileServiceEvents.subscribe((function(t){"SELECT"!==t.fileSelectedEventType&&"ALL"!==t.fileSelectedEventType||("error"===t.type||"removedAll"===t.type?(e.element.files=null,e.element.value=""):"removed"!==t.type&&"rejected"!==t.type||0===e.uploadService.queue.length&&(e.element.files=null,e.element.value=""),e.uploadOutput.emit(t))}))),this.uploadInput instanceof t.EventEmitter&&(this.options.logs&&this.devEnv&&console.info("Input select Init"),this.subscriptions.push(this.uploadService.handleInputEvents(this.uploadInput)))},e.prototype.ngOnDestroy=function(){this.element&&(this.element.removeEventListener("change",this.fileListener,!1),this.subscriptions.forEach((function(e){return e.unsubscribe()})))},e}();l.decorators=[{type:t.Directive,args:[{selector:"[ngxFileSelect]"}]}],l.ctorParameters=function(){return[{type:t.ElementRef},{type:n.HttpClient}]},l.propDecorators={options:[{type:t.Input}],uploadInput:[{type:t.Input}],uploadOutput:[{type:t.Output}]};var p=function(){};p.decorators=[{type:t.NgModule,args:[{declarations:[u,l],imports:[],exports:[u,l,n.HttpClientModule]}]}],e.NgxUploaderDirectiveModule=p,e.NgxUploaderDirectiveService=o,e.NgxUploaderDropDirective=u,e.NgxUploaderSelectDirective=l,e.environment=i,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-uploader-directive.umd.min.js.map