@martyganz/mat-file-upload
Version:
A simple & configurable Angular Material file upload component.
105 lines • 10.2 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
export class MatFileUploadComponent {
constructor() {
this.labelText = 'Select File(s)';
this.selectButtonText = 'Select File(s)';
this.selectFilesButtonType = 'button';
this.uploadButtonText = 'Upload File(s)';
this.uploadButtonType = 'button';
this.allowMultipleFiles = false;
this.showUploadButton = true;
this.acceptedTypes = '*.*';
this.customSvgIcon = null;
this.uploadClicked = new EventEmitter();
this.selectedFilesChanged = new EventEmitter();
this.selectedFileText = '';
}
filesChanged(files) {
this.selectedFiles = files;
this.selectedFilesChanged.emit(this.selectedFiles);
if (this.selectedFiles) {
const numSelectedFiles = this.selectedFiles.length;
this.selectedFileText =
numSelectedFiles === 1
? this.selectedFiles[0].name
: `${numSelectedFiles} files selected`;
}
else {
this.selectedFileText = '';
this.resetFileInput();
}
}
uploadFiles() {
this.uploadClicked.emit(this.selectedFiles);
this.resetFileInput();
}
resetFileInput() {
this.fileInputRef.nativeElement.value = '';
}
}
MatFileUploadComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-file-upload',
template: `
<span class="file-input-text">{{ labelText }}</span>
<button
mat-button
[type]="selectFilesButtonType"
color="primary"
class="file-input-button"
(click)="fileInput.click()"
[attr.aria-label]="selectButtonText"
>
<span>{{ selectButtonText }}</span>
<input
#fileInput
type="file"
style="display: none"
[accept]="acceptedTypes"
[multiple]="allowMultipleFiles"
(change)="filesChanged($event.target.files)"
/>
</button>
<button
mat-raised-button
[type]="uploadButtonType"
color="primary"
class="file-input-button"
[disabled]="!selectedFiles"
(click)="uploadFiles()"
*ngIf="showUploadButton"
[attr.aria-label]="uploadButtonText"
>
{{ uploadButtonText }}
</button>
<span class="file-input-text">{{ selectedFileText }}</span>
<button
mat-icon-button
(click)="filesChanged(null)"
type="button"
aria-label="Remove Selected File(s)"
*ngIf="selectedFiles != null && selectedFiles.length > 0"
>
<mat-icon *ngIf="!customSvgIcon">close</mat-icon>
<mat-icon *ngIf="customSvgIcon" [svgIcon]="customSvgIcon"></mat-icon>
</button>
`,
styles: ['.file-input-button { margin-right: 8px !important }',
'.file-input-text { font-size: 14px !important; margin-right: 8px !important }']
},] }
];
MatFileUploadComponent.propDecorators = {
labelText: [{ type: Input }],
selectButtonText: [{ type: Input }],
selectFilesButtonType: [{ type: Input }],
uploadButtonText: [{ type: Input }],
uploadButtonType: [{ type: Input }],
allowMultipleFiles: [{ type: Input }],
showUploadButton: [{ type: Input }],
acceptedTypes: [{ type: Input }],
customSvgIcon: [{ type: Input }],
uploadClicked: [{ type: Output }],
selectedFilesChanged: [{ type: Output }],
fileInputRef: [{ type: ViewChild, args: ['fileInput',] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LWZpbGUtdXBsb2FkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21hdC1maWxlLXVwbG9hZC9zcmMvbGliL21hdC1maWxlLXVwbG9hZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUE7QUFxRHRCLE1BQU0sT0FBTyxzQkFBc0I7SUFuRG5DO1FBb0RXLGNBQVMsR0FBRyxnQkFBZ0IsQ0FBQztRQUM3QixxQkFBZ0IsR0FBRyxnQkFBZ0IsQ0FBQztRQUNwQywwQkFBcUIsR0FBMkMsUUFBUSxDQUFDO1FBQ3pFLHFCQUFnQixHQUFHLGdCQUFnQixDQUFDO1FBQ3BDLHFCQUFnQixHQUEyQyxRQUFRLENBQUM7UUFDcEUsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO1FBQzNCLHFCQUFnQixHQUFHLElBQUksQ0FBQztRQUN4QixrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUN0QixrQkFBYSxHQUFZLElBQUksQ0FBQztRQUM3QixrQkFBYSxHQUEyQixJQUFJLFlBQVksRUFBWSxDQUFDO1FBQ3JFLHlCQUFvQixHQUEyQixJQUFJLFlBQVksRUFBWSxDQUFDO1FBSXRGLHFCQUFnQixHQUFHLEVBQUUsQ0FBQztJQXlCeEIsQ0FBQztJQXZCQyxZQUFZLENBQUMsS0FBZ0I7UUFDM0IsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUE7UUFDMUIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUE7UUFDbEQsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ3RCLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUE7WUFDbEQsSUFBSSxDQUFDLGdCQUFnQjtnQkFDbkIsZ0JBQWdCLEtBQUssQ0FBQztvQkFDcEIsQ0FBQyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSTtvQkFDNUIsQ0FBQyxDQUFDLEdBQUcsZ0JBQWdCLGlCQUFpQixDQUFBO1NBQzNDO2FBQU07WUFDTCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsRUFBRSxDQUFBO1lBQzFCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQTtTQUN0QjtJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFBO1FBQzNDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQTtJQUN2QixDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUE7SUFDNUMsQ0FBQzs7O1lBMUZGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyQ1Q7eUJBRUMscURBQXFEO29CQUNyRCwrRUFBK0U7YUFFbEY7Ozt3QkFFRSxLQUFLOytCQUNMLEtBQUs7b0NBQ0wsS0FBSzsrQkFDTCxLQUFLOytCQUNMLEtBQUs7aUNBQ0wsS0FBSzsrQkFDTCxLQUFLOzRCQUNMLEtBQUs7NEJBQ0wsS0FBSzs0QkFDTCxNQUFNO21DQUNOLE1BQU07MkJBRU4sU0FBUyxTQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBFbGVtZW50UmVmLFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBJbnB1dCxcclxuICBPdXRwdXQsXHJcbiAgVmlld0NoaWxkLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ21hdC1maWxlLXVwbG9hZCcsXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxzcGFuIGNsYXNzPVwiZmlsZS1pbnB1dC10ZXh0XCI+e3sgbGFiZWxUZXh0IH19PC9zcGFuPlxyXG4gICAgPGJ1dHRvblxyXG4gICAgICBtYXQtYnV0dG9uXHJcbiAgICAgIFt0eXBlXT1cInNlbGVjdEZpbGVzQnV0dG9uVHlwZVwiXHJcbiAgICAgIGNvbG9yPVwicHJpbWFyeVwiXHJcbiAgICAgIGNsYXNzPVwiZmlsZS1pbnB1dC1idXR0b25cIlxyXG4gICAgICAoY2xpY2spPVwiZmlsZUlucHV0LmNsaWNrKClcIlxyXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cInNlbGVjdEJ1dHRvblRleHRcIlxyXG4gICAgPlxyXG4gICAgICA8c3Bhbj57eyBzZWxlY3RCdXR0b25UZXh0IH19PC9zcGFuPlxyXG4gICAgICA8aW5wdXRcclxuICAgICAgICAjZmlsZUlucHV0XHJcbiAgICAgICAgdHlwZT1cImZpbGVcIlxyXG4gICAgICAgIHN0eWxlPVwiZGlzcGxheTogbm9uZVwiXHJcbiAgICAgICAgW2FjY2VwdF09XCJhY2NlcHRlZFR5cGVzXCJcclxuICAgICAgICBbbXVsdGlwbGVdPVwiYWxsb3dNdWx0aXBsZUZpbGVzXCJcclxuICAgICAgICAoY2hhbmdlKT1cImZpbGVzQ2hhbmdlZCgkZXZlbnQudGFyZ2V0LmZpbGVzKVwiXHJcbiAgICAgIC8+XHJcbiAgICA8L2J1dHRvbj5cclxuICAgIDxidXR0b25cclxuICAgICAgbWF0LXJhaXNlZC1idXR0b25cclxuICAgICAgW3R5cGVdPVwidXBsb2FkQnV0dG9uVHlwZVwiXHJcbiAgICAgIGNvbG9yPVwicHJpbWFyeVwiXHJcbiAgICAgIGNsYXNzPVwiZmlsZS1pbnB1dC1idXR0b25cIlxyXG4gICAgICBbZGlzYWJsZWRdPVwiIXNlbGVjdGVkRmlsZXNcIlxyXG4gICAgICAoY2xpY2spPVwidXBsb2FkRmlsZXMoKVwiXHJcbiAgICAgICpuZ0lmPVwic2hvd1VwbG9hZEJ1dHRvblwiXHJcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwidXBsb2FkQnV0dG9uVGV4dFwiXHJcbiAgICA+XHJcbiAgICAgIHt7IHVwbG9hZEJ1dHRvblRleHQgfX1cclxuICAgIDwvYnV0dG9uPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJmaWxlLWlucHV0LXRleHRcIj57eyBzZWxlY3RlZEZpbGVUZXh0IH19PC9zcGFuPlxyXG4gICAgPGJ1dHRvblxyXG4gICAgICBtYXQtaWNvbi1idXR0b25cclxuICAgICAgKGNsaWNrKT1cImZpbGVzQ2hhbmdlZChudWxsKVwiXHJcbiAgICAgIHR5cGU9XCJidXR0b25cIlxyXG4gICAgICBhcmlhLWxhYmVsPVwiUmVtb3ZlIFNlbGVjdGVkIEZpbGUocylcIlxyXG4gICAgICAgKm5nSWY9XCJzZWxlY3RlZEZpbGVzICE9IG51bGwgJiYgc2VsZWN0ZWRGaWxlcy5sZW5ndGggPiAwXCJcclxuICAgID5cclxuICAgICAgICA8bWF0LWljb24gKm5nSWY9XCIhY3VzdG9tU3ZnSWNvblwiPmNsb3NlPC9tYXQtaWNvbj5cclxuICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJjdXN0b21TdmdJY29uXCIgW3N2Z0ljb25dPVwiY3VzdG9tU3ZnSWNvblwiPjwvbWF0LWljb24+XHJcbiAgICA8L2J1dHRvbj5cclxuICBgLFxyXG4gIHN0eWxlczogW1xyXG4gICAgJy5maWxlLWlucHV0LWJ1dHRvbiB7IG1hcmdpbi1yaWdodDogOHB4ICFpbXBvcnRhbnQgfScsXHJcbiAgICAnLmZpbGUtaW5wdXQtdGV4dCB7IGZvbnQtc2l6ZTogMTRweCAhaW1wb3J0YW50OyBtYXJnaW4tcmlnaHQ6IDhweCAhaW1wb3J0YW50IH0nLFxyXG4gIF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNYXRGaWxlVXBsb2FkQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBsYWJlbFRleHQgPSAnU2VsZWN0IEZpbGUocyknO1xyXG4gIEBJbnB1dCgpIHNlbGVjdEJ1dHRvblRleHQgPSAnU2VsZWN0IEZpbGUocyknO1xyXG4gIEBJbnB1dCgpIHNlbGVjdEZpbGVzQnV0dG9uVHlwZTogJ2J1dHRvbicgfCAnbWVudScgfCAncmVzZXQnIHwgJ3N1Ym1pdCcgPSAnYnV0dG9uJztcclxuICBASW5wdXQoKSB1cGxvYWRCdXR0b25UZXh0ID0gJ1VwbG9hZCBGaWxlKHMpJztcclxuICBASW5wdXQoKSB1cGxvYWRCdXR0b25UeXBlOiAnYnV0dG9uJyB8ICdtZW51JyB8ICdyZXNldCcgfCAnc3VibWl0JyA9ICdidXR0b24nO1xyXG4gIEBJbnB1dCgpIGFsbG93TXVsdGlwbGVGaWxlcyA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHNob3dVcGxvYWRCdXR0b24gPSB0cnVlO1xyXG4gIEBJbnB1dCgpIGFjY2VwdGVkVHlwZXMgPSAnKi4qJztcclxuICBASW5wdXQoKSBjdXN0b21TdmdJY29uPzogc3RyaW5nID0gbnVsbDtcclxuICBAT3V0cHV0KCkgdXBsb2FkQ2xpY2tlZDogRXZlbnRFbWl0dGVyPEZpbGVMaXN0PiA9IG5ldyBFdmVudEVtaXR0ZXI8RmlsZUxpc3Q+KCk7XHJcbiAgQE91dHB1dCgpIHNlbGVjdGVkRmlsZXNDaGFuZ2VkOiBFdmVudEVtaXR0ZXI8RmlsZUxpc3Q+ID0gbmV3IEV2ZW50RW1pdHRlcjxGaWxlTGlzdD4oKTtcclxuXHJcbiAgQFZpZXdDaGlsZCgnZmlsZUlucHV0JykgZmlsZUlucHV0UmVmOiBFbGVtZW50UmVmXHJcbiAgc2VsZWN0ZWRGaWxlczogRmlsZUxpc3Q7XHJcbiAgc2VsZWN0ZWRGaWxlVGV4dCA9ICcnO1xyXG5cclxuICBmaWxlc0NoYW5nZWQoZmlsZXM/OiBGaWxlTGlzdCk6IHZvaWQge1xyXG4gICAgdGhpcy5zZWxlY3RlZEZpbGVzID0gZmlsZXNcclxuICAgIHRoaXMuc2VsZWN0ZWRGaWxlc0NoYW5nZWQuZW1pdCh0aGlzLnNlbGVjdGVkRmlsZXMpXHJcbiAgICBpZiAodGhpcy5zZWxlY3RlZEZpbGVzKSB7XHJcbiAgICAgIGNvbnN0IG51bVNlbGVjdGVkRmlsZXMgPSB0aGlzLnNlbGVjdGVkRmlsZXMubGVuZ3RoXHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRGaWxlVGV4dCA9XHJcbiAgICAgICAgbnVtU2VsZWN0ZWRGaWxlcyA9PT0gMVxyXG4gICAgICAgICAgPyB0aGlzLnNlbGVjdGVkRmlsZXNbMF0ubmFtZVxyXG4gICAgICAgICAgOiBgJHtudW1TZWxlY3RlZEZpbGVzfSBmaWxlcyBzZWxlY3RlZGBcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRGaWxlVGV4dCA9ICcnXHJcbiAgICAgIHRoaXMucmVzZXRGaWxlSW5wdXQoKVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgdXBsb2FkRmlsZXMoKTogdm9pZCB7XHJcbiAgICB0aGlzLnVwbG9hZENsaWNrZWQuZW1pdCh0aGlzLnNlbGVjdGVkRmlsZXMpXHJcbiAgICB0aGlzLnJlc2V0RmlsZUlucHV0KClcclxuICB9XHJcblxyXG4gIHJlc2V0RmlsZUlucHV0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5maWxlSW5wdXRSZWYubmF0aXZlRWxlbWVudC52YWx1ZSA9ICcnXHJcbiAgfVxyXG59XHJcbiJdfQ==