@martyganz/mat-file-upload/martyganz-mat-file-upload.metadata.json

A simple & configurable Angular Material file upload component.

{"__symbolic":"module","version":4,"metadata":{"MatFileUploadService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"MatFileUploadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"mat-file-upload","template":"\n    <span class=\"file-input-text\">{{ labelText }}</span>\n    <button\n      mat-button\n      [type]=\"selectFilesButtonType\"\n      color=\"primary\"\n      class=\"file-input-button\"\n      (click)=\"fileInput.click()\"\n      [attr.aria-label]=\"selectButtonText\"\n    >\n      <span>{{ selectButtonText }}</span>\n      <input\n        #fileInput\n        type=\"file\"\n        style=\"display: none\"\n        [accept]=\"acceptedTypes\"\n        [multiple]=\"allowMultipleFiles\"\n        (change)=\"filesChanged($event.target.files)\"\n      />\n    </button>\n    <button\n      mat-raised-button\n      [type]=\"uploadButtonType\"\n      color=\"primary\"\n      class=\"file-input-button\"\n      [disabled]=\"!selectedFiles\"\n      (click)=\"uploadFiles()\"\n      *ngIf=\"showUploadButton\"\n      [attr.aria-label]=\"uploadButtonText\"\n    >\n      {{ uploadButtonText }}\n    </button>\n    <span class=\"file-input-text\">{{ selectedFileText }}</span>\n    <button\n      mat-icon-button\n      (click)=\"filesChanged(null)\"\n      type=\"button\"\n      aria-label=\"Remove Selected File(s)\"\n       *ngIf=\"selectedFiles != null && selectedFiles.length > 0\"\n    >\n        <mat-icon *ngIf=\"!customSvgIcon\">close</mat-icon>\n        <mat-icon *ngIf=\"customSvgIcon\" [svgIcon]=\"customSvgIcon\"></mat-icon>\n    </button>\n  ","styles":[".file-input-button { margin-right: 8px !important }",".file-input-text { font-size: 14px !important; margin-right: 8px !important }"]}]}],"members":{"labelText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"selectButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"selectFilesButtonType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"uploadButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"uploadButtonType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"allowMultipleFiles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"showUploadButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"acceptedTypes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"customSvgIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"uploadClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"selectedFilesChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":71,"character":3}}]}],"fileInputRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":73,"character":3},"arguments":["fileInput"]}]}],"filesChanged":[{"__symbolic":"method"}],"uploadFiles":[{"__symbolic":"method"}],"resetFileInput":[{"__symbolic":"method"}]}},"MatFileUploadModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MatFileUploadComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":18,"character":4}],"exports":[{"__symbolic":"reference","name":"MatFileUploadComponent"}]}]}],"members":{}}},"origins":{"MatFileUploadService":"./lib/mat-file-upload.service","MatFileUploadComponent":"./lib/mat-file-upload.component","MatFileUploadModule":"./lib/mat-file-upload.module"},"importAs":"@martyganz/mat-file-upload"}