angular2-image-upload/bundles/angular2-image-upload.umd.min.js

An angular component that uploads images using native browser upload or drag-n-drop.

!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("angular2-image-upload",["exports","@angular/core","@angular/common/http","@angular/common"],t):t(e["angular2-image-upload"]={},e.ng.core,e.ng.common.http,e.ng.common)}(this,function(e,i,t,n){"use strict";var o=function(){function o(){this.fileOver=new i.EventEmitter,this.fileDrop=new i.EventEmitter}return o.getDataTransfer=function(e){return e.dataTransfer?e.dataTransfer:e.originalEvent.dataTransfer},o.hasFiles=function(e){return!!e&&(e.indexOf?-1!==e.indexOf("Files"):!!e.contains&&e.contains("Files"))},o.matchRule=function(e,t){return new RegExp("^"+e.split("*").join(".*")+"$").test(t)},o.prototype.onDrop=function(e){var t=o.getDataTransfer(e);if(o.hasFiles(t.types)){e.preventDefault();var i=this.filterFiles(t.files);e.preventDefault(),this.fileOver.emit(!1),this.fileDrop.emit(i)}},o.prototype.onDragLeave=function(e){this.fileOver.emit(!1)},o.prototype.onDragOver=function(e){var t=o.getDataTransfer(e);o.hasFiles(t.types)&&(t.dropEffect="copy",e.preventDefault(),this.fileOver.emit(!0))},o.prototype.filterFiles=function(e){if(!this.accept||0===this.accept.length)return e;for(var t=[],i=0;i<e.length;i++)for(var n=0;n<this.accept.length;n++)if(o.matchRule(this.accept[n],e[i].type)){t.push(e[i]);break}return t},o.decorators=[{type:i.Directive,args:[{selector:"[fileDrop]"}]}],o.propDecorators={accept:[{type:i.Input}],fileOver:[{type:i.Output}],fileDrop:[{type:i.Output}],onDrop:[{type:i.HostListener,args:["drop",["$event"]]}],onDragLeave:[{type:i.HostListener,args:["dragleave",["$event"]]}],onDragOver:[{type:i.HostListener,args:["dragover",["$event"]]}]},o}();function s(n,o){var r,a,l,e,s={label:0,sent:function(){if(1&l[0])throw l[1];return l[1]},trys:[],ops:[]};return e={next:t(0),"throw":t(1),"return":t(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function i(e){if(r)throw new TypeError("Generator is already executing.");for(;s;)try{if(r=1,a&&(l=2&e[0]?a["return"]:e[0]?a["throw"]||((l=a["return"])&&l.call(a),0):a.next)&&!(l=l.call(a,e[1])).done)return l;switch(a=0,l&&(e=[2&e[0],l.value]),e[0]){case 0:case 1:l=e;break;case 4:return s.label++,{value:e[1],done:!1};case 5:s.label++,a=e[1],e=[0];continue;case 7:e=s.ops.pop(),s.trys.pop();continue;default:if(!(l=0<(l=s.trys).length&&l[l.length-1])&&(6===e[0]||2===e[0])){s=0;continue}if(3===e[0]&&(!l||e[1]>l[0]&&e[1]<l[3])){s.label=e[1];break}if(6===e[0]&&s.label<l[1]){s.label=l[1],l=e;break}if(l&&s.label<l[2]){s.label=l[2],s.ops.push(e);break}l[2]&&s.ops.pop(),s.trys.pop();continue}e=o.call(n,s)}catch(t){e=[6,t],a=0}finally{r=l=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([t,e])}}}var r=function(){function e(e){this.http=e}return e.prototype.uploadImage=function(e,t,i,n,o,r){var a,l;if(void 0===n&&(n="image"),!e||""===e)throw new Error("Url is not set! Please set it before doing queries");var s=new FormData;if(o)try{for(var p=function c(e){var t="function"==typeof Symbol&&e[Symbol.iterator],i=0;return t?t.call(e):{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}}}(Object.keys(o)),u=p.next();!u.done;u=p.next()){var d=u.value;s.append(d,o[d])}}catch(f){a={error:f}}finally{try{u&&!u.done&&(l=p["return"])&&l.call(p)}finally{if(a)throw a.error}}return s.append(n,t),this.http.post(e,s,{withCredentials:r,headers:i,observe:"response"})},e.decorators=[{type:i.Injectable}],e.ctorParameters=function(){return[{type:t.HttpClient}]},e}(),p=function u(e,t){this.src=e,this.file=t,this.pending=!1},a=function(){function e(e){var t=this;this.imageService=e,this.files=[],this.fileCounter=0,this.fileOver=!1,this.showFileTooLargeMessage=!1,this.beforeUpload=function(e){return e},this.buttonCaption="Select Images",this.disabled=!1,this.cssClass="img-ul",this.clearButtonCaption="Clear",this.dropBoxMessage="Drop your images here!",this.max=100,this.preview=!0,this.withCredentials=!1,this.uploadedFiles=[],this.removed=new i.EventEmitter,this.uploadStateChanged=new i.EventEmitter,this.uploadFinished=new i.EventEmitter,this.previewClicked=new i.EventEmitter,this.pendingFilesCounter=0,this.onFileOver=function(e){return t.fileOver=e}}return e.prototype.ngOnInit=function(){this.fileTooLargeMessage||(this.fileTooLargeMessage="An image was too large and was not uploaded."+(this.maxFileSize?" The maximum file size is "+this.maxFileSize/1024+"KiB.":"")),this.supportedExtensions=this.supportedExtensions?this.supportedExtensions.map(function(e){return"image/"+e}):["image/*"]},e.prototype.deleteAll=function(){var t=this;this.files.forEach(function(e){return t.removed.emit(e)}),this.files=[],this.fileCounter=0,this.inputElement&&(this.inputElement.nativeElement.value="")},e.prototype.deleteFile=function(e){var t=this.files.indexOf(e);this.files.splice(t,1),this.fileCounter--,this.inputElement&&(this.inputElement.nativeElement.value=""),this.removed.emit(e)},e.prototype.previewFileClicked=function(e){this.previewClicked.emit(e)},e.prototype.ngOnChanges=function(e){e.uploadedFiles&&0<e.uploadedFiles.currentValue.length&&this.processUploadedFiles()},e.prototype.onFileChange=function(e){if(!this.disabled){var t=this.max-this.fileCounter,i=e.length>t?t:e.length;this.url&&0!==i&&this.uploadStateChanged.emit(!0),this.fileCounter+=i,this.showFileTooLargeMessage=!1,this.uploadFiles(e,i)}},e.prototype.onResponse=function(e,t){t.serverResponse={status:e.status,response:e},t.pending=!1,this.uploadFinished.emit(t),0==--this.pendingFilesCounter&&this.uploadStateChanged.emit(!1)},e.prototype.processUploadedFiles=function(){for(var e=0;e<this.uploadedFiles.length;e++){var t=this.uploadedFiles[e],i=void 0,n=void 0,o=void 0;n=t instanceof Object?(o=t.url,i=t.blob?t.blob:new Blob([t]),new File([i],t.fileName)):(o=t,i=new Blob([o]),new File([i],o)),this.files.push(new p(o,n))}},e.prototype.uploadFiles=function(l,n){return function e(t,a,l,s){return new(l||(l=Promise))(function(e,i){function n(e){try{r(s.next(e))}catch(t){i(t)}}function o(e){try{r(s["throw"](e))}catch(t){i(t)}}function r(t){t.done?e(t.value):new l(function(e){e(t.value)}).then(n,o)}r((s=s.apply(t,a||[])).next())})}(this,void 0,void 0,function(){var t,r,i,a=this;return s(this,function(e){switch(e.label){case 0:t=function(t){var i,n,o;return s(this,function(e){switch(e.label){case 0:return i=l[t],r.maxFileSize&&i.size>r.maxFileSize?(r.fileCounter--,r.inputElement.nativeElement.value="",r.showFileTooLargeMessage=!0,r.uploadStateChanged.emit(!1),[2,"continue"]):[4,r.beforeUpload({file:i,url:r.url,abort:!1})];case 1:return(n=e.sent()).abort?(r.fileCounter--,r.inputElement.nativeElement.value="",[2,"continue"]):(document.createElement("img").src=window.URL.createObjectURL(n.file),(o=new FileReader).addEventListener("load",function(e){var t=new p(e.target.result,n.file);a.files.push(t),a.uploadSingleFile(t,n.url,n.formData)},!1),o.readAsDataURL(n.file),[2])}})},r=this,i=0,e.label=1;case 1:return i<n?[5,t(i)]:[3,4];case 2:e.sent(),e.label=3;case 3:return i++,[3,1];case 4:return[2]}})})},e.prototype.uploadSingleFile=function(t,e,i){var n=this;void 0===e&&(e=this.url),e?(this.pendingFilesCounter++,t.pending=!0,this.imageService.uploadImage(e,t.file,this.headers,this.partName,i,this.withCredentials).subscribe(function(e){return n.onResponse(e,t)},function(e){n.onResponse(e,t),n.deleteFile(t)})):this.uploadFinished.emit(t)},e.decorators=[{type:i.Component,args:[{selector:"image-upload",template:'<div\n     fileDrop\n     [accept]="supportedExtensions"\n     (fileOver)="onFileOver($event)"\n     (fileDrop)="onFileChange($event)"\n     [ngClass]="cssClass"\n     [ngClass]="{\'img-ul-file-is-over\': fileOver}"     \n     [ngStyle]="style?.layout"\n>\n  <div class="img-ul-file-upload img-ul-hr-inline-group">    \n    <label *ngIf="fileCounter != max"\n      class="img-ul-upload img-ul-button" \n      [ngStyle]="style?.selectButton"\n      [ngClass]="{\'img-ul-disabled\': disabled}">\n      <span [innerText]="buttonCaption"></span>\n      <input\n        type="file"\n        [disabled]="disabled"\n        [accept]="supportedExtensions"\n        multiple (change)="onFileChange(input.files)"\n        #input>\n    </label>\n    <button *ngIf="fileCounter > 0"\n      [disabled]="disabled"\n      class="img-ul-clear img-ul-button" \n      (click)="deleteAll()" \n      [ngStyle]="style?.clearButton"\n      [innerText]="clearButtonCaption">\n    </button>\n    <div class="img-ul-drag-box-msg" [innerText]="dropBoxMessage"></div>\n  </div>\n\n  <p class="img-ul-file-too-large" *ngIf="showFileTooLargeMessage" [innerText]="fileTooLargeMessage"></p>\n\n  <div *ngIf="preview" class="img-ul-container img-ul-hr-inline-group" [ngStyle]="style?.previewPanel">\n    <div\n      class="img-ul-image"\n      *ngFor="let file of files"\n      (click)="previewFileClicked(file)"\n      [ngStyle]="{\'background-image\': \'url(\'+ file.src +\')\'}"\n    >\n      <div *ngIf="file.pending" class="img-ul-loading-overlay">\n        <div class="img-ul-spinning-circle"></div>\n      </div>\n      <div *ngIf="!file.pending" \n        [ngClass]="{\'img-ul-disabled\': disabled}" \n        class="img-ul-x-mark" \n        (click)="deleteFile(file)">\n        <span class="img-ul-close"></span>\n      </div>\n    </div>\n  </div>\n</div>',styles:[".img-ul{--active-color:#3C9;--common-radius:3px;background-color:#f8f8f8;border-radius:var(--common-radius);border:1px dashed #d0d0d0;font-family:sans-serif;position:relative;color:#9b9b9b}.img-ul-file-is-over{border:var(--active-color) solid}.img-ul-hr-inline-group:after{clear:both;content:\"\";display:table}.img-ul-file-upload{padding:16px}.img-ul-drag-box-msg{display:inline-block;font-weight:600;margin-left:12px;padding-top:14px}label.img-ul-button input[type=file]{display:none;position:fixed;top:-99999px}.img-ul-clear{background-color:red}.img-ul-clear:disabled{background-color:#ff6464;cursor:default}.img-ul-upload{background-color:var(--active-color)}.img-ul-button{-moz-box-shadow:2px 2px 4px 0 rgba(148,148,148,.6);-webkit-box-shadow:2px 2px 4px 0 rgba(148,148,148,.6);border:none;box-shadow:2px 2px 4px 0 rgba(148,148,148,.6);color:#fff;cursor:pointer;display:inline-block;float:left;font-size:1.25em;font-weight:500;padding:10px;text-transform:uppercase}.img-ul-button:active span{display:block;position:relative;top:1px}.img-ul-container{background-color:#fdfdfd;padding:0 10px}.img-ul-image{background:center center/contain no-repeat;display:inline-block;float:left;height:86px;margin:6px;position:relative;width:86px}.img-ul-x-mark{background-color:#000;border-radius:2px;color:#fff;cursor:pointer;float:right;height:20px;margin:2px;opacity:.7;text-align:center;width:20px}.img-ul-close{height:20px;opacity:.7;padding-right:3px;position:relative;width:20px}.img-ul-x-mark:hover .img-ul-close{opacity:1}.img-ul-close:after,.img-ul-close:before{background-color:#fff;border-radius:2px;content:'';height:15px;position:absolute;top:0;width:2px}.img-ul-close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.img-ul-close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.img-ul-x-mark.img-ul-disabled{display:none}.img-ul-loading-overlay{background-color:#000;bottom:0;left:0;opacity:.7;position:absolute;right:0;top:0}.img-ul-spinning-circle{height:30px;width:30px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;border-radius:50%;border:3px solid rgba(255,255,255,0);border-top:3px solid #fff;border-right:3px solid #fff;-webkit-animation:2s cubic-bezier(.085,.625,.855,.36) infinite spinner;animation:2s cubic-bezier(.085,.625,.855,.36) infinite spinner}.img-ul-file-too-large{color:red;padding:0 15px}.img-ul-upload.img-ul-disabled{background-color:#86e9c9;cursor:default}.img-ul-upload.img-ul-disabled:active span{top:0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}"]}]}],e.ctorParameters=function(){return[{type:r}]},e.propDecorators={beforeUpload:[{type:i.Input}],buttonCaption:[{type:i.Input}],disabled:[{type:i.Input}],cssClass:[{type:i.Input,args:["class"]}],clearButtonCaption:[{type:i.Input}],dropBoxMessage:[{type:i.Input}],fileTooLargeMessage:[{type:i.Input}],headers:[{type:i.Input}],max:[{type:i.Input}],maxFileSize:[{type:i.Input}],preview:[{type:i.Input}],partName:[{type:i.Input}],style:[{type:i.Input}],supportedExtensions:[{type:i.Input,args:["extensions"]}],url:[{type:i.Input}],withCredentials:[{type:i.Input}],uploadedFiles:[{type:i.Input}],removed:[{type:i.Output}],uploadStateChanged:[{type:i.Output}],uploadFinished:[{type:i.Output}],previewClicked:[{type:i.Output}],inputElement:[{type:i.ViewChild,args:["input"]}]},e}(),l=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[r]}},e.decorators=[{type:i.NgModule,args:[{imports:[n.CommonModule],declarations:[a,o],exports:[a]}]}],e}();e.ImageUploadModule=l,e.ImageUploadComponent=a,e.FileHolder=p,e.ɵb=o,e.ɵa=r,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular2-image-upload.umd.min.js.map