- ⚠️ Before the v0.32.0, this functionality was covered by the
lr-data-outputblock, here is the migration guide.
Usage in HTML forms
We provide the dedicated element lr-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 lr-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
lr-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:
[
["my-uploader[]", "https://ucarecdn.com/:uuid/"],
["my-uploader[]", "https://ucarecdn.com/:uuid/"]
]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:
[["my-uploader", "https://ucarecdn.com/:uuid~2/"]]In the example above, my-uploader is the ctx-name attribute value.
Configuration
As it was mentioned above, the only attribute that lr-form-input tag accepts
and requires is ctx-name.
But it also relies on a few attributes of the lr-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:
<script type="module">
import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-file-uploader-regular.min.js";
LR.registerBlocks(LR);
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const form = e.target;
const formData = new FormData(form);
const outputEl = document.querySelector("#form-output");
outputEl.innerText = JSON.stringify([...formData.entries()], null, 2);
});
</script>
<style>
lr-file-uploader-regular {
position: relative;
display: inline-block;
}
lr-form-input {
position: absolute;
bottom: 0px;
left: 50%;
}
</style>
<lr-config
ctx-name="my-uploader"
pubkey="YOUR_PUBLIC_KEY"
multiple
multiple-min="2"
multiple-max="3"
img-only
group-output
></lr-config>
<form>
<label for="name">Name:</label><br />
<input type="text" id="fname" name="fname" value="John" />
<lr-file-uploader-regular
ctx-name="my-uploader"
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-file-uploader-regular.min.css"
>
<lr-form-input ctx-name="my-uploader"></lr-form-input>
</lr-file-uploader-regular>
<button type="submit">Submit</button>
<code>
<pre id="form-output"></pre>
</code>
</form>Get YOUR_PUBLIC_KEY from API keys.
