UNPKG

@trendster-io/ng-uploader

Version:

A fully featured Angular file uploader that utilizes Angular's HttpClient internally, allows you to customize outgoing HTTP requests using the "Angular Way" (Interceptors), provides customizable concurrent queuing of uploads and a simple way to select fil

2 lines 14.1 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("rxjs"),require("rxjs/operators"),require("@angular/common/http"),require("@angular/core")):"function"==typeof define&&define.amd?define("@trendster-io/ng-uploader",["exports","rxjs","rxjs/operators","@angular/common/http","@angular/core"],t):t((e["trendster-io"]=e["trendster-io"]||{},e["trendster-io"]["ng-uploader"]={}),e.rxjs,e.rxjs.operators,e.ng.common.http,e.ng.core)}(this,function(e,i,r,t,o){"use strict";var n=(Object.defineProperty(s.prototype,"req",{get:function(){return this._req},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"progress",{get:function(){return this._progress},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"fileName",{get:function(){return this.file.name},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"isReady",{get:function(){return this.ready},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"isUploading",{get:function(){return this.uploading},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"isUploaded",{get:function(){return this.uploaded},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"isCancelled",{get:function(){return this.cancelled},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"isError",{get:function(){return this.error},enumerable:!0,configurable:!0}),s.prototype.buildFormData=function(){var n=new FormData;return this.additionalParams&&Object.entries(this.additionalParams).forEach(function(e){var t=function a(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var o,n,i=r.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(o=i.next()).done;)s.push(o.value)}catch(u){n={error:u}}finally{try{o&&!o.done&&(r=i["return"])&&r.call(i)}finally{if(n)throw n.error}}return s}(e,2),r=t[0],o=t[1];return n.set(r,o)}),n.set(this.fileAlias,this.file,this.file.name),n},s.prototype.buildRequest=function(){var e=this.buildFormData();return new t.HttpRequest(this.method,this.url,e,{reportProgress:!0})},s.prototype.readMediaFile=function(){var r=this;return new i.Observable(function(e){var t=new FileReader;t.onload=function(){e.next(t.result),e.complete()},t.onerror=function(){t.abort(),e.error(t.error)},t.readAsDataURL(r.file)})},s.prototype.cleanup=function(){this.onResponseSubject.complete(),this.onProgressSubject.complete(),this.onErrorSubject.complete()},s.prototype.onBeforeUpload=function(){this.ready=!0,this.uploading=!1,this.uploaded=!1,this.cancelled=!1,this.error=!1,this._progress=0},s.prototype.onUploadStart=function(){this.ready=!0,this.uploading=!0,this.uploaded=!1,this.cancelled=!1,this.error=!1},s.prototype.onUploadSuccess=function(e){this.ready=!1,this.uploading=!1,this.uploaded=!0,this.cancelled=!1,this.error=!1,this._progress=100,this.onResponseSubject.next(e),this.cleanup()},s.prototype.onUploadProgress=function(e){this._progress=e,this.onProgressSubject.next(this._progress)},s.prototype.onUploadCancelled=function(){this.ready=!1,this.uploading=!1,this.uploaded=!1,this.cancelled=!0,this.error=!1,this._progress=0},s.prototype.onUploadError=function(e){this.ready=!1,this.uploading=!1,this.uploaded=!1,this.cancelled=!1,this.error=!0,this._progress=0,this.onErrorSubject.next(e)},s.prototype.upload=function(e){e&&(this.additionalParams=e,this._req=this.buildRequest()),this.listener.uploadItem(this)},s.prototype.cancel=function(){this.listener.cancelItem(this)},s.prototype.remove=function(){this.listener.removeItem(this)},s);function s(e,t){this.listener=e,this.onResponseSubject=new i.Subject,this.onProgressSubject=new i.Subject,this.onErrorSubject=new i.Subject,this.onResponse=this.onResponseSubject.asObservable(),this.onProgress=this.onProgressSubject.asObservable(),this.onError=this.onErrorSubject.asObservable(),this._progress=0,this.url=t.url,this.method=t.method,this.file=t.file,this.fileAlias=t.fileAlias||"file",this.additionalParams=t.additionalParams,this._req=this.buildRequest();var r=this.file.type.split("/")[0];"image"!==r&&"video"!==r||(this.preview=this.readMediaFile())}var u=(Object.defineProperty(a.prototype,"itemsCount",{get:function(){return this.queue.length},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"items",{get:function(){return this.queue.map(function(e){return e.item})},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"readyItemsCount",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isReady&&!e.isUploading}).length},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"readyItems",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isReady&&!e.isUploading})},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"uploadingItemsCount",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isUploading}).length},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"uploadingItems",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isUploading})},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"uploadedItemsCount",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isUploaded}).length},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"uploadedItems",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isUploaded})},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"notUploadedItemsCount",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return!e.isUploaded}).length},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"notUploadedItems",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return!e.isUploaded})},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"cancelledItemsCount",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isCancelled}).length},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"cancelledItems",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isCancelled})},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"errorItemsCount",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isError}).length},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"errorItems",{get:function(){return this.queue.map(function(e){return e.item}).filter(function(e){return e.isError})},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"totalProgress",{get:function(){return this._totalProgress},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"isUploading",{get:function(){return 0<this.uploadingItemsCount},enumerable:!0,configurable:!0}),a.prototype.onQueueItemSuccess=function(e){var t=e.item,r=e.res;t.onUploadSuccess(r),this.onItemSuccessSubject.next({item:t,res:r}),this.removeAfterUpload&&t.remove()},a.prototype.onQueueItemError=function(e){var t=e.item,r=e.err;t.onUploadError(r),this.onItemErrorSubject.next({item:t,err:r})},a.prototype.request=function(e){return this.httpClient.request(e).pipe(r.filter(function(e){return e.type===t.HttpEventType.Sent||e.type===t.HttpEventType.UploadProgress||e.type===t.HttpEventType.Response}),r.map(function(e){switch(e.type){case t.HttpEventType.Sent:return{type:"start",value:null};case t.HttpEventType.UploadProgress:return{type:"progress",value:Math.round(100*e.loaded/e.total)};case t.HttpEventType.Response:return{type:"response",value:e.body}}}))},a.prototype.calculateTotalProgress=function(){var e=this.uploadingItems.reduce(function(e,t){return t.progress+e},0)/(this.uploadingItemsCount||1);if(this.removeAfterUpload)this._totalProgress=e;else{var t=100/this.itemsCount,r=e*t/100;this._totalProgress=Math.round(this.uploadedItemsCount*t+r)}},a.prototype.prepareQueueItem=function(o){var n=this;return new i.Observable(function(t){o.subscription=n.request(o.item.req).pipe(r.finalize(function(){t.closed||t.complete()}),r.tap(function(e){switch(e.type){case"start":o.item.onUploadStart();break;case"progress":var t=e.value,r=o.item;r.onUploadProgress(t),n.onItemProgressSubject.next({item:r,progress:t}),n.calculateTotalProgress()}}),r.filter(function(e){return"response"===e.type}),r.map(function(e){return e.value})).subscribe({next:function(e){o.subscription=null,t.next({item:o.item,res:e}),t.complete()},error:function(e){o.subscription=null,t.error({item:o.item,err:e})},complete:function(){return t.complete()}})})},a.prototype.setupQueue=function(){var t=this;this.queue=[],this.scheduler=new i.Subject,this.scheduler.pipe(r.mergeMap(function(e){return t.prepareQueueItem(e).pipe(r.catchError(function(e){return t.onQueueItemError(e),i.of(null)}))},this.concurrency),r.filter(function(e){return Boolean(e)})).subscribe(function(e){return t.onQueueItemSuccess(e)})},a.prototype.isValidRequestParams=function(e){var t=e.url,r=e.method;return Boolean(t||this.url)&&Boolean(r||this.method)},a.prototype.isValidFileType=function(e){return!this.allowedMimeTypes||!this.allowedMimeTypes.length||this.allowedMimeTypes.includes(e.type)},a.prototype.isValidFileSize=function(e){return!this.maxFileSize||e.size<=this.maxFileSize},a.prototype.isValidFile=function(e){return this.isValidFileType(e)&&this.isValidFileSize(e)},a.prototype.canAddToQueue=function(){return!this.queueLimit||this.itemsCount<this.queueLimit},a.prototype.checkItem=function(e){if(!this.isValidRequestParams(e))throw{name:"RequestParamsMissing",message:"You have not supplied a general url or method to the uploader and also didn't provide them in your item."};if(!this.isValidFileType(e.file))throw{name:"NotAllowedFileType",message:"The file type is not included in the allowedMimeTypes."};if(!this.isValidFileSize(e.file))throw{name:"FileSizeExceeded",message:"The file size exceeded the maximumFileSize."};if(!this.canAddToQueue())throw{name:"QueueLimitReached",message:"The specified queueLimit was reached, cannot add more items at the moment."}},a.prototype.addItem=function(e){this.checkItem(e),Object.assign(e,{url:e.url||this.url,method:e.method||this.method});var t=new n(this,e);return this.queue.push({item:t,subscription:null}),this.calculateTotalProgress(),this.autoUpload&&t.upload(),t},a.prototype.uploadItem=function(t){var e=this.queue.find(function(e){return e.item===t&&!(e.item.isReady||e.item.isUploading||e.item.isUploaded)});e&&(t.onBeforeUpload(),this.scheduler.next(e))},a.prototype.uploadAll=function(){this.items.filter(function(e){return!(e.isReady||e.isUploading||e.isUploaded)}).forEach(function(e){return e.upload()})},a.prototype.cancelItem=function(t){var e=this.queue.find(function(e){return e.item===t&&t.isReady});e&&(e.subscription&&(e.subscription.unsubscribe(),e.subscription=null),e.item.onUploadCancelled(),this.calculateTotalProgress())},a.prototype.cancelAll=function(){this.notUploadedItems.forEach(function(e){return e.cancel()})},a.prototype.removeItem=function(t){t.isUploading&&t.cancel(),t.cleanup(),this.queue=this.queue.filter(function(e){return e.item!==t}),this.calculateTotalProgress()},a.prototype.clearQueue=function(){for(;this.itemsCount;)this.queue[0].item.remove();this._totalProgress=0},a);function a(e,t){void 0===t&&(t={}),this.httpClient=e,this.onItemSuccessSubject=new i.Subject,this.onItemProgressSubject=new i.Subject,this.onItemErrorSubject=new i.Subject,this.onItemSuccess=this.onItemSuccessSubject.asObservable(),this.onItemProgress=this.onItemProgressSubject.asObservable(),this.onItemError=this.onItemErrorSubject.asObservable(),this._totalProgress=0,this.url=t.url,this.method=t.method,this.autoUpload=t.autoUpload,this.removeAfterUpload=t.removeAfterUpload,this.queueLimit=t.queueLimit,this.concurrency=t.concurrency||1,this.maxFileSize=t.maxFileSize,this.allowedMimeTypes=t.allowedMimeTypes,this.setupQueue()}var p=(l.prototype.getUploader=function(e){return new u(this.httpClient,e)},l.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],l.ctorParameters=function(){return[{type:t.HttpClient}]},l.ngInjectableDef=o.defineInjectable({factory:function(){return new l(o.inject(t.HttpClient))},token:l,providedIn:"root"}),l);function l(e){this.httpClient=e}var c=(d.prototype.onDrop=function(e){if(e.preventDefault(),!this.disabled){this.active=!1;var t=e.dataTransfer;if(t.items){for(var r=[],o=0;o<t.items.length;o++)"file"===t.items[o].kind&&r.push(t.items[o].getAsFile());t.items.clear(),this.fileDrop.emit(r)}else r=t.files,t.clearData(),this.fileDrop.emit(Array.from(r))}},d.prototype.onDragOver=function(e){e.stopPropagation(),e.preventDefault(),this.disabled||(this.active=!0)},d.prototype.onDragLeave=function(e){this.disabled||(this.active=!1)},d.prototype.onBodyDragOver=function(e){this.preventBodyDrop&&(e.preventDefault(),e.stopPropagation())},d.prototype.onBodyDrop=function(e){this.preventBodyDrop&&e.preventDefault()},d.decorators=[{type:o.Directive,args:[{selector:"[dropzone]"}]}],d.propDecorators={preventBodyDrop:[{type:o.Input}],disabled:[{type:o.Input}],fileDrop:[{type:o.Output}],active:[{type:o.HostBinding,args:["class.dropzone-active"]}],onDrop:[{type:o.HostListener,args:["drop",["$event"]]}],onDragOver:[{type:o.HostListener,args:["dragover",["$event"]]}],onDragLeave:[{type:o.HostListener,args:["dragleave",["$event"]]}],onBodyDragOver:[{type:o.HostListener,args:["body:dragover",["$event"]]}],onBodyDrop:[{type:o.HostListener,args:["body:drop",["$event"]]}]},d);function d(){this.preventBodyDrop=!0,this.disabled=!1,this.fileDrop=new o.EventEmitter,this.active=!1}var f=(h.decorators=[{type:o.NgModule,args:[{declarations:[c],exports:[c]}]}],h);function h(){}e.UploadItem=n,e.Uploader=u,e.UploaderService=p,e.DropzoneDirective=c,e.UploaderModule=f,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=trendster-io-ng-uploader.umd.min.js.map