Angular Material File Input

For Angular Material 21.x

Description

This is a File Input component for Angular Material projects.

Version control

Choose the version corresponding to your Angular version:

| Angular | @ngx-mce/datetime-picker | | -------- | -------------------------| | 21 | 21.x | | 15 -- 20 | Please use GNURub's version | | 7 -- 14 | Please use h2qutc's version |

File Input in action

See demo:

• Over StackBlitz.
• In the documentation.

How to use

Install

npm install --save @ngx-mce/file-input

Configure

import { NgxMatFileInputModule } from '@ngx-mce/file-input';

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

Check more details here.

Using the component

<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>

ℹ️ This compoment accepts all properties of a regular MatFormField, such as appearance variants, hints...

<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