Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@angular-material-components/file-input

h2qutc12.2kMIT16.0.1TypeScript support: included

Angular Material File Input

angular, angular2, angular 12, angular 13, angular 14, angular 15, angular 16, angular-material, angular material file input, angular material file drop, file input, file drop, ngx-mat-file-input, ngx-material-file-input

readme

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

Build Status License npm version

Description

An Angular Material File Input.

Buy Me A Coffee

DEMO

@see DEMO stackblitz

@see LIVE DEMO

Alt Text

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

changelog