> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.

# File Uploader HTML forms handling

> Learn how to handle HTML forms in the File Uploader.

> **Note**
>
> **Note:** Before the v0.32.0, this functionality was covered by the lr-data-output block, here is the [migration guide](/docs/file-uploader/migration-to-0.32.0/).

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](/docs/file-uploader/events/) and/or
[API](/docs/file-uploader/api/) to extract data from the File Uploader.

## Usage

The only attribute that `uc-form-input` tag requires is `ctx-name`, see
[Context](/docs/file-uploader/configuration/#context-ctx-name) 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`](/docs/file-uploader/options/#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`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) entries:

```json
[
  ["my-uploader[]", "https://:subdomain.ucarecd.net/:uuid/"],
  ["my-uploader[]", "https://:subdomain.ucarecd.net/: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](/docs/file-groups/).

The input will have the name of the `ctx-name`.

Here is the example of the output `FormData` entries:

```json
[["my-uploader", "https://:subdomain.ucarecd.net/:uuid~2/"]]
```

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:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.css">

 <script type="module">
  import * as UC from "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.js";
  UC.defineComponents(UC);
  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>
  uc-file-uploader-regular {
    position: relative;
    display: inline-block;
  }
  uc-form-input {
    position: absolute;
    bottom: 0px;
    left: 50%;
  }
</style>

<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  multiple
  multiple-min="2"
  multiple-max="3"
  img-only
  group-output
></uc-config>

<form>
  <label for="name">Name:</label><br />
  <input type="text" id="fname" name="fname" value="John" />

  <uc-file-uploader-regular
    ctx-name="my-uploader"
  >
    <uc-form-input ctx-name="my-uploader"></uc-form-input>
  </uc-file-uploader-regular>

  <button type="submit">Submit</button>

  <code>
    <pre id="form-output"></pre>
  </code>
</form>
```

Get `YOUR_PUBLIC_KEY` from [API keys](https://app.uploadcare.com/projects/-/api-keys/).

#### [File Uploader HTML form example](https://codesandbox.io/p/sandbox/epic-darwin-rvzt8n)

View in CodeSandbox