• ⚠️ Before the v0.32.0, this functionality was covered by the lr-data-output block, 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="demopublickey"
  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>
Edit Docs: HTML form example