HiddenInput

A single <input type="hidden"> carrying completed items with URLs as JSON, for classic form posts that never touch fetch.

import { HiddenInput } from "uplofile";

Usage

Drop it anywhere inside Root. The value updates as uploads finish.

import { Dropzone, HiddenInput, Preview, Root, Trigger } from "uplofile";

const upload = async (file: File) => ({ url: URL.createObjectURL(file) });

export function AttachmentForm() {
  return (
    <form action="/api/posts" method="post">
      <Root upload={upload} name="attachments">
        <Dropzone>
          <Trigger>Select files</Trigger>
          <Preview />
        </Dropzone>

        {/* Posts done items as JSON: [{ id, name, url, meta? }]. */}
        <HiddenInput />
      </Root>
      <button type="submit">Publish</button>
    </form>
  );
}

Props

namestring

Field name posted with the form. Falls back to Root's own name prop when omitted.

"image"

PreviousDropzone NextReact Native