@angular-material-components/file-input

Angular Material File Input for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x

Description

An Angular Material File Input.

DEMO

@see DEMO stackblitz

@see LIVE DEMO

Choose the version corresponding to your Angular version:

Angular	@angular-material-components/file-input
16	16.x+
15	15.x+ OR 9.x+ for legacy import
14	8.x+
13	7.x+
12	6.x+
11	5.x+
10	4.x+
9	2.x+
8	2.x+
7	2.x+

Getting started

npm install --save @angular-material-components/file-input

Setup

import { NgxMatFileInputModule } from '@angular-material-components/file-input';

@NgModule({
   ...
   imports: [
        ...
        NgxMatFileInputModule
   ]
   ...
})
export class AppModule { }

@see src/app/demo-fileinput/demo-fileinput.module.ts

Using the component

File Input (ngx-mat-file-input)

<mat-form-field>
   <ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept" [color]="color">
   </ngx-mat-file-input>
</mat-form-field>

You can provide a custom icon by using the directive ngxMatFileInputIcon

<mat-form-field>
   <ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept"
   [color]="color">
      <mat-icon ngxMatFileInputIcon>folder</mat-icon>
   </ngx-mat-file-input>
</mat-form-field>

You can use with all properties of MatFormField such as appearance variants, hint...

<mat-form-field appearance="outline">
  <ngx-mat-file-input [formControl]="file3Control">
  </ngx-mat-file-input>
  <mat-hint>Hint</mat-hint>
</mat-form-field>

List of @Input

@Input	Type	Default value	Description
disabled	boolean	null	If true, the file input is readonly.
multiple	boolean	false	If true, the file input allows the user to select more than one file.
accept	string	null	Limiting accepted file types (For example: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.)
color	ThemePalette	null	Theme color palette for the component.

Theming

• @see @angular/material Using a pre-built theme
• Add the Material Design icon font to your index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

License

MIT