Easily add file upload button to your Angular + Material project.

Import the Module:

import { FileInputModule } from '@wobius/file-input'

@NgModule({
    imports: [ FileInputModule ]
})

Usage:

import { Component } from '@angular/core'

@Component({
    template: `
    <file-input text="Upload" accept="image/jpg,image/png,image/webp" (onFileSelect="onFileSelect($event)" #input></file-input>
    <div *ngIf="files.length > 0">
      <br>
      <button mat-raised-button (click)="input.onClear()">Cancel</button>
      <button mat-raised-button color="primary">Submit</button>
    </div>
    `
})
export class MyComponent {
    files:File[] = []
    onFileSelect(_files:File[]) {
        this.files = _files
        Array.from(_files).forEach(f => console.log(f.name))
    }
}