@nghacks/uploader
Version:
Image and file uploader for angular
1 lines • 11.8 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"FileUploaderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵa"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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<!-- Image Input -->\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%}"]}]}],"members":{"pickerLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}]}},"ImgUploaderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵa"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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<!-- Image Input -->\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}"]}]}],"members":{"pickerLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"maxHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}]}},"UploaderError":{"__symbolic":"interface"},"FileInputChange":{"__symbolic":"interface"},"UploaderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ImgUploaderComponent"},{"__symbolic":"reference","name":"FileUploaderComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4}],"providers":[{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ImgUploaderComponent"},{"__symbolic":"reference","name":"FileUploaderComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"template":""}]}],"members":{"fileInputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"pickerLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"minHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":61,"character":3},"arguments":["dragover",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":69,"character":3},"arguments":["dragleave",["$event"]]}]}],"ondrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":77,"character":3},"arguments":["drop",["$event"]]}]}],"inputChange":[{"__symbolic":"method"}],"addFile":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"getError":[{"__symbolic":"method"}],"getImageHeightWidth":[{"__symbolic":"method"}],"removeFile":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":1,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getBase64":[{"__symbolic":"method"}]}}},"origins":{"FileUploaderComponent":"./lib/components/file-uploader/file-uploader.component","ImgUploaderComponent":"./lib/components/img-uploader/img-uploader.component","UploaderError":"./lib/components/types/file-change.interface","FileInputChange":"./lib/components/types/file-change.interface","UploaderModule":"./lib/uploader.module","ɵa":"./lib/components/base/uploader.base","ɵb":"./lib/services/uploader.service"},"importAs":"@nghacks/uploader"}