@nghacks/uploader/bundles/nghacks-uploader.umd.min.js

Image and file uploader for angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("@nghacks/uploader",["exports","@angular/core","@angular/forms","@angular/common"],t):t(((e=e||self).nghacks=e.nghacks||{},e.nghacks.uploader={}),e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,t,n,r){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function i(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function a(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{p(r.next(e))}catch(e){i(e)}}function l(e){try{p(r.throw(e))}catch(e){i(e)}}function p(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,l)}p((r=r.apply(e,t||[])).next())}))}function l(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(i){return function(l){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,l])}}}Object.create;function p(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function u(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(s(arguments[t]));return e}Object.create;var d=function(){function e(){}return e.prototype.getBase64=function(e){var t=new FileReader;return t.readAsDataURL(e),new Promise((function(e){t.onload=function(t){var n=t.target.result.split(",");return e(n)}}))},e}();d.decorators=[{type:t.Injectable}],d.ctorParameters=function(){return[]};var c=function(){function e(e){this._uploaderService=e,this.fileInputChange=new t.EventEmitter,this.formCtrl=new n.FormControl,this.maxSize=5e3,this.minHeight=48}return e.prototype.onDragOver=function(e){e.preventDefault(),e.stopPropagation(),this.dragover=!0},e.prototype.onDragLeave=function(e){e.preventDefault(),e.stopPropagation(),this.dragover=!1},e.prototype.ondrop=function(e){e.preventDefault(),e.stopPropagation(),e.dataTransfer.files&&e.dataTransfer.files[0]&&this.addFile(e.dataTransfer.files[0]),this.dragover=!1},e.prototype.inputChange=function(e){return a(this,void 0,void 0,(function(){return l(this,(function(t){return e.target.files&&e.target.files[0]&&this.addFile(e.target.files[0]),[2]}))}))},e.prototype.addFile=function(e){return a(this,void 0,void 0,(function(){var t,n,r;return l(this,(function(o){switch(o.label){case 0:return e?this.formCtrl.disabled?[2]:(t=this.validate(e),n=e.name,[4,this._uploaderService.getBase64(e)]):[2];case 1:return r=o.sent(),this.fileInputChangeStore={hasFile:!0,fileName:n,errors:t,base64Image:r},this.fileInputChange.emit(this.fileInputChangeStore),this.formCtrl.setValue(r),[2]}}))}))},e.prototype.validate=function(e){var t,n,r=!0;e.size/1e3>this.maxSize&&(r=!1);var o=!1;try{for(var i=p(this.accept),a=i.next();!a.done;a=i.next()){a.value.split(".")[1]===e.type.split("/")[1]&&(o=!0)}}catch(e){t={error:e}}finally{try{a&&!a.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}return this.getError(r,o)},e.prototype.getError=function(e,t){return e&&t?{maxSizeExceeded:null,wrongFileType:null}:!e&&t?{maxSizeExceeded:!0,wrongFileType:null}:e&&!t?{maxSizeExceeded:null,wrongFileType:!0}:{wrongFileType:!0,maxSizeExceeded:!0}},e.prototype.getImageHeightWidth=function(e){var t=this;return new Promise((function(n){return a(t,void 0,void 0,(function(){var t;return l(this,(function(r){return(t=new Image).src=e,t.onload=function(){return n({height:t.height,width:t.width})},[2]}))}))}))},e.prototype.removeFile=function(){this.fileInputChangeStore={hasFile:!1,fileName:null,errors:null,base64Image:null},this.fileInputChange.emit(this.fileInputChangeStore),this.formCtrl.setValue("")},e}();c.decorators=[{type:t.Component,args:[{template:""}]}],c.ctorParameters=function(){return[{type:d}]},c.propDecorators={fileInputChange:[{type:t.Output}],pickerLabel:[{type:t.Input}],hint:[{type:t.Input}],accept:[{type:t.Input}],maxSize:[{type:t.Input}],disabled:[{type:t.Input}],minHeight:[{type:t.Input}],onDragOver:[{type:t.HostListener,args:["dragover",["$event"]]}],onDragLeave:[{type:t.HostListener,args:["dragleave",["$event"]]}],ondrop:[{type:t.HostListener,args:["drop",["$event"]]}]};var f=function(e){function t(){var t=e.apply(this,u(arguments))||this;return t.pickerLabel="Drag file, or Choose",t.accept=[".pdf",".csv",".doc",".docx",".docx",".xlsx",".cer"],t}return i(t,e),t}(c);f.decorators=[{type:t.Component,args:[{selector:"file-uploader",template:'<div class="uploader file-preview"\n  [ngStyle]="{\n    \'min-height\': minHeight+\'px\'\n  }"\n  [ngClass]="{\n    \'dragover\': dragover,\n    \'disabled\': disabled\n  }">\n\n  <div\n    (click)="uploader.click()"\n    class="file"\n    *ngIf="formCtrl.value; else nofile">\n    <span class="file-name">{{fileInputChangeStore.fileName}}</span>\n  </div>\n\n  <ng-template #nofile>\n    <button class="picker" type="button" (click)="uploader.click()">\n      {{pickerLabel}}\n    </button>\n  </ng-template>\n\n  <div class="cross" *ngIf="formCtrl.value">\n    <button type="button" (click)="removeFile()">\n      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n        <path\n          d="M16.3394 9.32245C16.7434 8.94589 16.7657 8.31312 16.3891 7.90911C16.0126 7.50509 15.3798 7.48283 14.9758 7.85938L12.0497 10.5866L9.32245 7.66048C8.94589 7.25647 8.31312 7.23421 7.90911 7.61076C7.50509 7.98731 7.48283 8.62008 7.85938 9.0241L10.5866 11.9502L7.66048 14.6775C7.25647 15.054 7.23421 15.6868 7.61076 16.0908C7.98731 16.4948 8.62008 16.5171 9.0241 16.1405L11.9502 13.4133L14.6775 16.3394C15.054 16.7434 15.6868 16.7657 16.0908 16.3891C16.4948 16.0126 16.5171 15.3798 16.1405 14.9758L13.4133 12.0497L16.3394 9.32245Z"\n          fill="currentColor" />\n        <path fill-rule="evenodd" clip-rule="evenodd"\n          d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z"\n          fill="currentColor" />\n      </svg>\n    </button>\n  </div>\n\n  <div class="hint" *ngIf="hint">\n    <span>{{hint}}</span>\n  </div>\n\n</div>\n\n\n\x3c!-- Image Input --\x3e\n<input #uploader type=\'file\' style="display: none;" [accept]="accept" [disabled]="disabled"\n  (change)="inputChange($event);uploader.value=\'\'">\n',styles:["button{background:none;border:none;cursor:pointer;outline:none;padding:0}.uploader{border:1px solid #e0e0e0;border-radius:5px;box-sizing:border-box;margin-bottom:25px;min-height:48px;position:relative;transition:all .2s;width:100%}.uploader.dragover,.uploader:hover{background-color:#e4e4e4;border:1px dashed #1b7937}.uploader .cross{position:absolute;right:10px;top:10px}.uploader .picker{align-items:center;bottom:0;display:flex;height:100%;justify-content:center;left:0;padding:10px;position:absolute;right:0;top:0;width:100%}.uploader .hint{bottom:-25px;font-size:12px;left:0;position:absolute}.uploader.disabled{background-color:initial;border:1px dashed #b8b6b6;color:#b8b6b6}.uploader.disabled .picker{cursor:not-allowed!important}.uploader.disabled .cross,.uploader.disabled .hint{display:none}.uploader.file-preview{cursor:pointer;position:relative}.uploader.file-preview .file{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;padding:10px;position:absolute;width:100%}.uploader.file-preview .file .file-name{font-weight:700;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}"]}]}],f.propDecorators={pickerLabel:[{type:t.Input}],accept:[{type:t.Input}]};var g=function(e){function t(){var t=e.apply(this,u(arguments))||this;return t.pickerLabel="Drag image, or Choose",t.accept=[".jpg",".png",".jpeg"],t.maxHeight=250,t}return i(t,e),t}(c);g.decorators=[{type:t.Component,args:[{selector:"img-uploader",template:'<div class="uploader image-preview"\n  [ngStyle]="{\n    \'min-height\': minHeight+\'px\'\n  }"\n  [ngClass]="{\n    \'dragover\': dragover,\n    \'disabled\': disabled\n  }">\n\n  <div\n    (click)="uploader.click()"\n    class="image"\n    [ngStyle]="{\n      \'max-height\': maxHeight+\'px\'\n    }"\n    *ngIf="formCtrl.value; else nofile">\n\n    <img\n    [ngStyle]="{\n      \'max-height\': (maxHeight-(10*2))+\'px\'\n    }"\n    [src]="formCtrl.value" />\n\n  </div>\n\n  <ng-template #nofile>\n    <button class="picker" type="button" (click)="uploader.click()">\n      {{pickerLabel}}\n    </button>\n  </ng-template>\n\n  <div class="cross" *ngIf="formCtrl.value">\n    <button type="button" (click)="removeFile()">\n      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n        <path\n          d="M16.3394 9.32245C16.7434 8.94589 16.7657 8.31312 16.3891 7.90911C16.0126 7.50509 15.3798 7.48283 14.9758 7.85938L12.0497 10.5866L9.32245 7.66048C8.94589 7.25647 8.31312 7.23421 7.90911 7.61076C7.50509 7.98731 7.48283 8.62008 7.85938 9.0241L10.5866 11.9502L7.66048 14.6775C7.25647 15.054 7.23421 15.6868 7.61076 16.0908C7.98731 16.4948 8.62008 16.5171 9.0241 16.1405L11.9502 13.4133L14.6775 16.3394C15.054 16.7434 15.6868 16.7657 16.0908 16.3891C16.4948 16.0126 16.5171 15.3798 16.1405 14.9758L13.4133 12.0497L16.3394 9.32245Z"\n          fill="currentColor" />\n        <path fill-rule="evenodd" clip-rule="evenodd"\n          d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z"\n          fill="currentColor" />\n      </svg>\n    </button>\n  </div>\n\n  <div class="hint" *ngIf="hint">\n    <span>{{hint}}</span>\n  </div>\n\n</div>\n\n\n\x3c!-- Image Input --\x3e\n<input #uploader type=\'file\' style="display: none;" [accept]="accept" [disabled]="disabled"\n  (change)="inputChange($event);uploader.value=\'\'">\n',styles:["button{background:none;border:none;cursor:pointer;outline:none;padding:0}.uploader{border:1px solid #e0e0e0;border-radius:5px;box-sizing:border-box;margin-bottom:25px;min-height:48px;position:relative;transition:all .2s;width:100%}.uploader.dragover,.uploader:hover{background-color:#e4e4e4;border:1px dashed #1b7937}.uploader .cross{position:absolute;right:10px;top:10px}.uploader .picker{align-items:center;bottom:0;display:flex;height:100%;justify-content:center;left:0;padding:10px;position:absolute;right:0;top:0;width:100%}.uploader .hint{bottom:-25px;font-size:12px;left:0;position:absolute}.uploader.disabled{background-color:initial;border:1px dashed #b8b6b6;color:#b8b6b6}.uploader.disabled .picker{cursor:not-allowed!important}.uploader.disabled .cross,.uploader.disabled .hint{display:none}.uploader.image-preview{cursor:pointer;position:relative}.uploader.image-preview .image{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:10px}.uploader.image-preview .image img{height:100%!important;max-width:100%;width:auto}"]}]}],g.propDecorators={pickerLabel:[{type:t.Input}],accept:[{type:t.Input}],maxHeight:[{type:t.Input}]};var h=function(){};h.decorators=[{type:t.NgModule,args:[{declarations:[g,f],imports:[r.CommonModule],providers:[d],exports:[g,f]}]}],e.FileUploaderComponent=f,e.ImgUploaderComponent=g,e.UploaderModule=h,e.ɵa=c,e.ɵb=d,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=nghacks-uploader.umd.min.js.map