angular-material-fileupload
Version:
A fileupload component based on angular-material design
1 lines • 10.8 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"MatFileUploadModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"MatFileUploadQueueComponent"},{"__symbolic":"reference","name":"MatFileUploadComponent"},{"__symbolic":"reference","name":"FileUploadInputForDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":25,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"MatFileUploadQueueComponent"},{"__symbolic":"reference","name":"MatFileUploadComponent"},{"__symbolic":"reference","name":"FileUploadInputForDirective"}]}]}],"members":{}},"MatFileUploadQueueComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"mat-file-upload-queue","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":22,"character":19},"member":"OnPush"},"providers":[{"__symbolic":"reference","name":"ɵb"}],"template":"<ng-content></ng-content>\n<br />\n<button\n mat-raised-button\n [color]=\"uploadAllColor\"\n *ngIf=\"files.length > 0\"\n (click)=\"uploadAll()\"\n>\n {{ uploadAllLabel }}\n</button>\n<button\n mat-raised-button\n [color]=\"removeAllColor\"\n *ngIf=\"files.length > 0\"\n (click)=\"removeAll()\"\n>\n {{ removeAllLabel }}\n</button>\n","styles":[""]}]}],"members":{"fileUploads":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":26,"character":3},"arguments":[{"__symbolic":"reference","name":"MatFileUploadComponent"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":61,"character":31}]}],"httpUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"httpRequestHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"httpRequestParams":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"fileAlias":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"uploadAllColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"uploadAllLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"removeAllColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3}}]}],"removeAllLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"_listenTofileRemoved":[{"__symbolic":"method"}],"add":[{"__symbolic":"method"}],"uploadAll":[{"__symbolic":"method"}],"removeAll":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MatFileUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"mat-file-upload","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"uploadProgress$ | async as uploadProgress\">\n <mat-card>\n <span class=\"file-summary\">{{ file.name }}({{ file.size | bytes }})</span>\n <div class=\"upload-progress\">\n <mat-progress-bar\n [value]=\"uploadProgress.progressPercentage\"\n ></mat-progress-bar>\n\n <button\n mat-icon-button\n [attr.aria-label]=\"fileUploadAriaLabel\"\n (click)=\"upload()\"\n [disabled]=\"uploadInProgress$ | async\"\n >\n <mat-icon>file_upload</mat-icon>\n </button>\n\n <button\n mat-icon-button\n [attr.aria-label]=\"cancelAriaLabel\"\n (click)=\"remove()\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n <span class=\"file-summary\">{{ uploadProgress.progressPercentage }}%</span>\n <span>\n {{ uploadProgress.loaded | bytes }} of\n {{ uploadProgress.total | bytes }}</span\n >\n </mat-card>\n</ng-container>\n","styles":[".file-summary{font-size:.85rem}.upload-progress{display:flex;align-content:center;align-items:center;height:10px}.upload-progress ::ng-deep .mat-progress-bar .mat-progress-bar-element{transition:none}"]}]}],"members":{"httpUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"httpRequestHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"httpRequestParams":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"fileAlias":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"fileUploadAriaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"cancelAriaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"removeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"onUpload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":87,"character":24},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"FileUploadInputForDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"input[fileUploadInputFor], div[fileUploadInputFor]"}]}],"members":{"onFileSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":22,"character":31}]}],"fileUploadQueue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3},"arguments":["fileUploadInputFor"]}]}],"onChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":33,"character":3},"arguments":["change"]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":44,"character":3},"arguments":["drop",["$event"]]}]}],"onDropOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":57,"character":3},"arguments":["dragover",["$event"]]}]}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"bytes"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"initialize":[{"__symbolic":"method"}],"getInputValue":[{"__symbolic":"method"}]}}},"origins":{"MatFileUploadModule":"./lib/mat-file-upload.module","MatFileUploadQueueComponent":"./lib/mat-file-upload-queue/mat-file-upload-queue.component","MatFileUploadComponent":"./lib/mat-file-upload/mat-file-upload.component","FileUploadInputForDirective":"./lib/file-upload-input-for/file-upload-input-for.directive","ɵa":"./lib/bytes/bytes.pipe","ɵb":"./lib/mat-file-upload-queue/mat-file-upload-queue.service"},"importAs":"angular-material-fileupload"}