ngx-image-upload
Version:
Angular 6 image upload.
2 lines • 13.4 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common/http"),require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-image-upload",["exports","@angular/common/http","@angular/core","@angular/common"],t):t(e["ngx-image-upload"]={},e.ng.common.http,e.ng.core,e.ng.common)}(this,function(e,t,i,n){"use strict";var o=function(){function e(e){this.http=e}return e.prototype.postImage=function(e,t,i,n,o,r){if(void 0===n&&(n="image"),!e||""===e)throw new Error("请设置url参数");var l=new FormData;for(var a in o)l.append(a,o[a]);return l.append(n,t),this.http.post(e,l,{headers:i,withCredentials:r})},e.decorators=[{type:i.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:t.HttpClient}]},e.ngInjectableDef=i.defineInjectable({factory:function(){return new e(i.inject(t.HttpClient))},token:e,providedIn:"root"}),e}();function u(i,n){var o,r,l,e,a={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(e){if(o)throw new TypeError("Generator is already executing.");for(;a;)try{if(o=1,r&&(l=2&e[0]?r["return"]:e[0]?r["throw"]||((l=r["return"])&&l.call(r),0):r.next)&&!(l=l.call(r,e[1])).done)return l;switch(r=0,l&&(e=[2&e[0],l.value]),e[0]){case 0:case 1:l=e;break;case 4:return a.label++,{value:e[1],done:!1};case 5:a.label++,r=e[1],e=[0];continue;case 7:e=a.ops.pop(),a.trys.pop();continue;default:if(!(l=0<(l=a.trys).length&&l[l.length-1])&&(6===e[0]||2===e[0])){a=0;continue}if(3===e[0]&&(!l||e[1]>l[0]&&e[1]<l[3])){a.label=e[1];break}if(6===e[0]&&a.label<l[1]){a.label=l[1],l=e;break}if(l&&a.label<l[2]){a.label=l[2],a.ops.push(e);break}l[2]&&a.ops.pop(),a.trys.pop();continue}e=n.call(i,a)}catch(t){e=[6,t],r=0}finally{o=l=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([t,e])}}}var d=function(e,t){this.src=e,this.file=t,this.pending=!1},r=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="添加图片",this.disabled=!1,this.cssClass="img-ul",this.clearButtonCaption="清除",this.dropBoxMessage="拖拽图片到此处",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},this.countRemainingSlots=function(){return t.max-t.fileCounter}}return e.prototype.ngOnInit=function(){this.fileTooLargeMessage||(this.fileTooLargeMessage="图片太大无法上传."+(this.maxFileSize?" 最大允许 "+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&&e.uploadedFiles.currentValue&&0<e.uploadedFiles.currentValue.length&&this.processUploadedFiles()},e.prototype.onFileChange=function(e){if(!this.disabled){var t=this.countRemainingSlots(),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(){if("string"==typeof this.uploadedFiles){var e=this.uploadedFiles;this.fileCounter=1,this.max=1;var t=void 0,i=void 0,n=void 0;e instanceof Object?(n=e.url,t=e.blob?e.blob:new Blob([e]),i=new File([t],e.fileName)):(n=e,t=new Blob([n]),i=new File([t],n)),this.files=[],this.files.push(new d(n,i))}else for(var o in this.max=this.max-Object.keys(this.uploadedFiles).length,this.uploadedFiles){t=void 0,i=void 0,n=void 0;(e=this.uploadedFiles[o])instanceof Object?(n=e.url,t=e.blob?e.blob:new Blob([e]),i=new File([t],e.fileName)):(n=e,t=new Blob([n]),i=new File([t],n)),this.files.push(new d(n,i))}},e.prototype.uploadFiles=function(a,n){return t=this,p=function(){var t,r,i,l=this;return u(this,function(e){switch(e.label){case 0:t=function(t){var i,n,o;return u(this,function(e){switch(e.label){case 0:return i=a[t],r.maxFileSize&&i.size>r.maxFileSize?(r.fileCounter--,r.inputElement.nativeElement.value="",r.showFileTooLargeMessage=!0,[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 d(e.target.result,n.file);l.uploadSingleFile(t,n.url,n.formData),l.files.push(t)},!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]}})},new((s=l=void 0)||(s=Promise))(function(e,i){function n(e){try{r(p.next(e))}catch(t){i(t)}}function o(e){try{r(p["throw"](e))}catch(t){i(t)}}function r(t){t.done?e(t.value):new s(function(e){e(t.value)}).then(n,o)}r((p=p.apply(t,l||[])).next())});var t,l,s,p},e.prototype.uploadSingleFile=function(t,e,i){var n=this;void 0===e&&(e=this.url),e?(this.pendingFilesCounter++,t.pending=!0,this.imageService.postImage(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:"ds-ngx-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 <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 \x3c!-- img --\x3e\n <div\n class="img-ul-image"\n *ngFor="let file of files"\n (click)="previewFileClicked(file)"\n >\n \x3c!-- [ngStyle]="{\'background-image\': \'url(\'+ file.src +\')\'}" --\x3e\n <div class="img_div"><img src={{file.src}} class="imgs"></div>\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 \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 </div>\n</div>',styles:[".img-ul{--common-radius:3px;border-radius:var(--common-radius);position:relative;color:#9b9b9b;font-weight:400}.img-ul-x-mark{background-color:#000;border-radius:10px;color:#fff;cursor:pointer;height:20px;opacity:.7;text-align:center;width:20px;position:absolute;top:-8px;right:-10px}.img_div{position:relative;width:120px;height:120px;overflow:hidden}.imgs{max-width:200%;height:auto;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#000}.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{display:inline-block;width:120px;height:120px;margin:10px;color:#000;text-align:center;line-height:120px}.img-ul-drag-box-msg{display:inline-block;font-weight:600;margin-left:12px}label.img-ul-button{border:1px dashed #d0d0d0;font-size:1em!important}label.img-ul-button input[type=file]{display:none;position:fixed;top:-99999px}.img-ul-clear{background-color:red;font-size:1em!important}.img-ul-clear:disabled{background-color:#ff6464;cursor:default}.img-ul-upload{background-color:var(--active-color);width:120px;height:120px}.img-ul-button{border:none;cursor:pointer;display:inline-block;float:left;font-size:1.25em;font-weight:500;text-transform:uppercase}.img-ul-button:active span{display:block;position:relative;top:1px}.img-ul-container{position:relative;display:inline-block}.img-ul-image{box-shadow:0 0 10px 2px #d0d0d0;background:center center/contain no-repeat;display:inline-block;float:left;height:120px;margin:6px;position:relative;width:120px}.img-ul-close{height:20px;opacity:.7;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:10px;position:absolute;top:5px;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}.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:o}]},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 o(){this.fileOver=new i.EventEmitter,this.fileDrop=new i.EventEmitter}return 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.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.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}(),a=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[n.CommonModule,t.HttpClientModule],declarations:[r,l],exports:[r]}]}],e}();e.NgxImageUploadService=o,e.FileHolder=d,e.NgxImageUploadComponent=r,e.NgxImageUploadModule=a,e.ɵa=l,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-image-upload.umd.min.js.map