ng-input-file

ng-input-file

This library provides a component input-file that wraps a legacy input[type=file] element styled with Material components:

// legacy input
<input type="file" accept="image/*, video/*" (change)="fileChanged($event)">

// using a component
<input-file (files)="fileChanged($event)" #input1></input-file>

input-file component emits (files) output whenever user chooses or removes a file. By default, the component accepts image/*, video/* and you can override it by providing optional input like [accept]="'image/*'".

A Stackblitz demo is available to show the usage.

// to install
npm install ng-input-file --save
yarn add ng-input-file

// in app.module.ts
import { NgInputFileModule } from 'ng-input-file';
@NgModule({
  imports: [
    NgInputFileModule,

// in template
<input-file (files)="fileChanged($event)" #input1></input-file>

// in component
import { NgInputFileComponent } from 'ng-input-file';

@ViewChild('input1')
private input1: NgInputFileComponent;

fileChanged({ files }) {
  console.log(`fileChanged ${files.length}`, files, this.input1.filename);
}