File input component for Angular Material

Description

• Preview option
• Drag & Drop support
• Can be used with both reactive and template driven forms
• Validators, like required, min, max-length and file size
• Works within mat-form-field

Demo

Stackblitz

Demo

Install

Install ngx-mat-file

npm i ngx-mat-file

API Reference

import { NgxMatFileModule } from 'ngx-mat-file';

@NgModule({
  imports: [ NgxMatFileModule ]
})

Selector: ngx-mat-file

Properties

| Name | Type | Default | Description | | ----------------------------------- | ------------------- | -------------------------------------------- | ----------------------------------------------------------------------- | | @Input() required | boolean | false | Whether the component is required. | | @Input() multiple | boolean | false | Allows multiple file selection. | | @Input() accept | string | empty | Accepting file types. | | @Input() preview | boolean | true | Enable image preview. | | @Input() previewWidth | string \| number | 200px | Size of preview in pixels. | | @Input() hiddenUpload | boolean | false | Hide or show Upload button. | | @Input() minlength | number | 1 | Minimum number of files. | | @Input() maxlength | number | 3 | Maximum number of files. | | @Input() maxFileSize | number | 5 | Maximum file size in megabytes. | | @Input() buttonVariant | string | mat-flat-button | Button style. | | @Input() buttonBrowseText | string | Browse | Label of browse button | | @Input() buttonUploadText | string | Upload | Label of upload button | | @Input() buttonRemoveAllText | string | Remove All | Label of remove all button | | @Input() dragAndDropText | string | Drag & drop files here | Label of dropzone | | @Input() invalidMinFileCountMessage | string | Minimum {0} file(s) required | Custom error message | | @Input() invalidMaxFileCountMessage | string | Maximum number of files exceeded | Custom error message | | @Input() invalidFileTypeMessage | string | Invalid file type. Allowed file types: {0} | Custom error message | | @Input() invalidFileSizeMessage | string | Maximum size: {0} MB | Custom error message | | | | | | | @Output() onUploadClick | EventEmitter<any> | - | Event emitted when upload button clicked. |

Usage

Template driven

<mat-form-field appearance="outline">
  <ngx-mat-file
    [required]=true
    [multiple]=false
    [minlength]=2
    [maxlength]=5
    [maxFileSize]=10
    (onUploadClick)="yourUploadFunction(files)"
    [(ngModel)]="files"
    name="fileInput">
  </ngx-mat-file>
</mat-form-field>

Reactive

<mat-form-field appearance="outline">
  <ngx-mat-file
    [required]=true
    accept="image/*"
    [minlength]="3" 
    [multiple]="true"
    [preview]="true"
    [hiddenUpload]="true"
    previewWidth=100
    formControlName="files">
  </ngx-mat-file>
</mat-form-field>

License

MIT