FilePicker
This component is used to upload files to server
This component allows to upload user's files to the server. You have to prepare special backend API to accept these files and delete them.
File uploading
When user selects files FilePicker automatically upload them into your server. For each selected file FilePicker automatically uploaded to the passed URL address in the url
parameter with the method
method. The body of this request will be an object with only one field: { [name]: <selected file> }
If uploading was successful FilePicker takes the response of the request as file URL. If you have complex response you can create custom response parser via getFileNameFunc
prop.
If the file upload fails FilePicker shows an error message and allow to reupload the file.
Deleting files
Also user can delete his files. When user clicks on the "Delete" button FilePicker sends DELETE
request to url
. Body of the request is: { [name]: '/path/to/image.png' }
.
File extensions
By default user can upload any file. But you can set a filter by file extension or file extension groups.
There are 8 predefined groups of extensions. To use it just pass the group name as extensions
value.
Group | Extensions |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If they don't suit you, then you can pass your own string of all possible extensions.
Properties
Property | Type | Description |
---|---|---|
|
| API address to which the request will be sent |
|
| Body parameter name |
|
| API Method. Default value is |
|
| Callback is called when file was loaded successfully |
|
| Callback is called when file was deleted successfully |
|
| Variant of FilePicker. Default value is |
|
| Default list of the files |
|
| Possible extensions of the files. If |
|
| Placeholder of the control |
|
| Maximum possible number of uploaded files. Default value is |
|
| Custom function of getting uploaded file src |
|
| Surface of the FilePicker. Default value is |
|
| Max size of uploaded files. When user uploads a file with larger size shows the error message. Default value is |
|
| Custom CSS class |
History
Altrone 2.2
:added
maxFileSize
prop
Altrone 2.0
: initial release
Last updated