NgxFormlyMaterialFile
This library provides a material design file upload for ngx-formly . ngx-formly-material-file
supports drag and drop and ships with various validators.
Installation
Install NPM Dependencies
Follow the quick-start for ngx-formly and use @ngx-formly/material
as the UI library. Finally run npm i ngx-formly-material-file
.
Icons
ngx-formly-material-file
uses material icons as a default. Add the following entry to the assets
array in your angular.json
to serve the icons:
{
" glob " : " **/* " ,
" input " : " ./node_modules/ngx-formly-material-file/assets/svgs " ,
" output " : " /assets/svgs/ "
}
Configure the App Module
...
import { LOCALE_ID , NgModule } from ' @angular/core ' ;
import { FileTypeComponent , FileTypeModule , FileTypeValidationMessages } from ' ngx-formly-material-file ' ;
...
export const APP_LOCALE_ID = ' en-US ' ;
@ NgModule ( {
imports : [
...
FileTypeModule . forRoot ( ) ,
FormlyModule . forRoot ( {
validationMessages : new FileTypeValidationMessages ( APP_LOCALE_ID ) . validationMessages ,
types : [
{ name : ' file ' , component : FileTypeComponent } ,
] ,
} )
...
] ,
...
providers : [ { provide : LOCALE_ID , useValue : APP_LOCALE_ID } , ... ] ,
} )
export class AppModule { }
Use FileTypeComponent
ngx-formly-material-file
adds an array of SelectedFile
to the form model.
export interface SelectedFile {
file : File ;
location ? : string ;
}
If you specify a uploadUrl
in the templateOptions
, the files will be uploaded using a FormData POST request. The default parameter name is file
but it can be changed by setting paramName
in the templateOptions
. If the server returns a Location
header, it will be present in the SelectedFile
.
import { Component } from ' @angular/core ' ;
import { FormGroup } from ' @angular/forms ' ;
import { FormlyFieldConfig , FormlyFormOptions } from ' @ngx-formly/core ' ;
import { FileListValidators , FileValidators } from ' ngx-formly-material-file ' ;
@ Component ( {
selector : ' app-root ' ,
templateUrl : ' ./app.component.html ' ,
} )
export class AppComponent {
form = new FormGroup ( { } ) ;
model : any = { } ;
options : FormlyFormOptions = { } ;
fields : FormlyFieldConfig [ ] = [
{
key : ' pictures ' ,
type : ' file ' ,
templateOptions : {
label : ' Pictures ' ,
description : ' Upload some nice pictures ' ,
required : true ,
uploadUrl : ' /upload '
} ,
validators : {
validation : [
FileListValidators . minFiles ( 2 ) ,
FileListValidators . maxFiles ( 4 ) ,
FileListValidators . totalFilesize ( 400 * 1000 )
]
} ,
fieldArray : {
validators : {
validation : [
FileValidators . minFilenameLength ( 1 ) ,
FileValidators . maxFilenameLength ( 50 ) ,
FileValidators . fileExtension ( [ ' pdf ' , ' txt ' , ' png ' ] ) ,
FileValidators . filesize ( 1000 * 1000 ) ,
FileValidators . filenameForbiddenCharacters ( [ ' / ' ] )
]
}
}
} ,
] ;
}
Customization
Icons
You can replace the default material icons by using the MatIconRegistry
. Here is an example:
...
export class AppModule {
constructor ( matIconRegistry : MatIconRegistry , sanitizer : DomSanitizer ) {
matIconRegistry . addSvgIconInNamespace ( ' fileType ' , ' fileDrop ' , sanitizer . bypassSecurityTrustResourceUrl ( ' assets/svgs/solid/file-import.svg ' ) ) ;
matIconRegistry . addSvgIconInNamespace ( ' fileType ' , ' file ' , sanitizer . bypassSecurityTrustResourceUrl ( ' assets/svgs/solid/file.svg ' ) ) ;
matIconRegistry . addSvgIconInNamespace ( ' fileType ' , ' fileUpload ' , sanitizer . bypassSecurityTrustResourceUrl ( ' assets/svgs/solid/file-upload.svg ' ) ) ;
matIconRegistry . addSvgIconInNamespace ( ' fileType ' , ' fileRemove ' , sanitizer . bypassSecurityTrustResourceUrl ( ' assets/svgs/solid/times.svg ' ) ) ;
}
}
Validation messages
The default validation messages can be overwritten as shown in this example:
...
import { LOCALE_ID , NgModule } from ' @angular/core ' ;
import { FileTypeComponent , FileTypeModule , FileTypeValidationMessages } from ' ngx-formly-material-file ' ;
...
export const APP_LOCALE_ID = ' en-US ' ;
@ NgModule ( {
imports : [
...
FileTypeModule . forRoot ( ) ,
FormlyModule . forRoot ( {
validationMessages : new FileTypeValidationMessages ( APP_LOCALE_ID ) . validationMessages . concat ( [
{ name : ' maxFilenameLength ' , message : ' my custom message ' } ,
{ name : ' minFilenameLength ' , message : ' my custom message ' } ,
{ name : ' fileExtension ' , message : ' my custom message ' } ,
{ name : ' filesize ' , message : ' 2do ' } ,
{ name : ' filenameForbiddenCharacters ' , message : ' my custom message ' } ,
{ name : ' minFiles ' , message : ' my custom message ' } ,
{ name : ' maxFiles ' , message : ' 2do ' } ,
{ name : ' totalFilesize ' , message : ' my custom message ' } ,
{ name : ' uploadError ' , message : ' my custom message ' }
] ) ,
types : [
{ name : ' file ' , component : FileTypeComponent } ,
] ,
} )
...
] ,
...
providers : [ { provide : LOCALE_ID , useValue : APP_LOCALE_ID } , ... ] ,
} )
export class AppModule { }
Labels
The labels of the dropzone and the button as well as the tooltip of the remove-file-icon can be changed:
FileTypeModule . forRoot ( {
dropzoneText : ' my custom label ' ,
browseFilesButtonText : ' my custom label ' ,
removeFileTooltip : ' my custom label '
} )