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