API reference for @angular-material-components/file-input

Getting started

{{code1}}

Setup

{{code2}}

Properties @Input

Name 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

{{code6}}
Selected file(s):
  • {{item?.name}}
Errors (Max size: {{maxSize}}Ko)
{{fileControl.errors | json}}
disabled (Default: false) {{option.label}}
multiple (Default: false) {{option.label}}
accept (Default: null) Select accept {{item}}
color (Default: primary) Select color {{item}}
{{code3}}

You can provide a custom icon by using the directive ngxMatFileInputIcon

{{code4}}
folder

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

{{code5}}
{{nbFiles}} selected file(s)