File Uploader HTML forms handling
We provide the dedicated element uc-form-input
to handle HTML forms with the
File Uploader. This is useful when you use the File Uploader within the HTML
form with the native client-side (browser) validation.
In the case of rich-featured forms with custom validation and inline errors rendering, it’s better to use directly Events and/or API to extract data from the File Uploader.
Usage
The only attribute that uc-form-input
tag requires is ctx-name
, see
Context for more details.
It could be placed anywhere on the page. However, we recommend placing it inside the File Uploader to make it able to align native validation messages within the File Uploader button.
It supports two modes:
- Multiple separate inputs for each file.
- Single input for the group of files.
The current mode is defined by the
group-output
attribute on the
uc-config
tag.
Separate inputs for each file
In this mode, each file will be represented by its own input. It is useful when you need to handle each file separately.
Every input will have the name of the ctx-name
attribute with the []
suffix.
Here is the example of the output FormData
entries:
In the example above, my-uploader
is the ctx-name
attribute value.
One input for the group of files
In this mode, all files will be represented by a single input. It is useful when you need to handle all files as a group.
The input will have the name of the ctx-name
.
Here is the example of the output FormData
entries:
In the example above, my-uploader
is the ctx-name
attribute value.
Configuration
As it was mentioned above, the only attribute that uc-form-input
tag accepts
and requires is ctx-name
.
But it also relies on a few attributes of the uc-config
tag:
group-output
- defines the behaviour mode (single input for the group of files or multiple inputs for each file).multiple-min
- if it is greater than 0, the input will be required, preventing the form from submitting until the required number of files is uploaded.
Example
Here is the example of the HTML form with the File Uploader:
Get YOUR_PUBLIC_KEY
from API keys.