This library provides a material design file upload for ngx-formly.
ngx-formly-material-file supports drag and drop and ships with various validators.
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.
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:
Configure the App Module
ngx-formly-material-file adds an array of
SelectedFile to the form model.
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
You can replace the default material icons by using the
MatIconRegistry. Here is an example:
The default validation messages can be overwritten as shown in this example:
The labels of the dropzone and the button as well as the tooltip of the remove-file-icon can be changed: