@martyganz/mat-file-upload/fesm2015/martyganz-mat-file-upload.js

A simple & configurable Angular Material file upload component.

import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';

class MatFileUploadService {
    constructor() { }
}
MatFileUploadService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatFileUploadService_Factory() { return new MatFileUploadService(); }, token: MatFileUploadService, providedIn: "root" });
MatFileUploadService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
MatFileUploadService.ctorParameters = () => [];

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',] }]
};

class MatFileUploadModule {
}
MatFileUploadModule.decorators = [
    { type: NgModule, args: [{
                declarations: [MatFileUploadComponent],
                imports: [
                    CommonModule,
                    MatButtonModule,
                    MatIconModule,
                    MatInputModule,
                    MatSelectModule,
                    FormsModule,
                ],
                exports: [MatFileUploadComponent],
            },] }
];

/*
 * Public API Surface of mat-file-upload
 */

/**
 * Generated bundle index. Do not edit.
 */

export { MatFileUploadComponent, MatFileUploadModule, MatFileUploadService };
//# sourceMappingURL=martyganz-mat-file-upload.js.map