Trigger

A clickable element that opens the file picker. Renders a plain <button> unless you pass asChild.

import { Trigger } from "uplofile";

Usage

Use it as-is with children, or pass render to read live upload state.

import { Root, Trigger } from "uplofile";

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

export function Uploader() {
  return (
    <Root upload={upload}>
      {/* Renders a <button> by default. */}
      <Trigger className="btn">Select files</Trigger>

      {/* render exposes live counts, so the label can change while uploading. */}
      <Trigger
        render={({ isUploading, uploadingCount }) => (
          <span>
            {isUploading ? `Uploading ${uploadingCount}…` : "Upload files"}
          </span>
        )}
      />
    </Root>
  );
}

Use asChild to merge its click handler onto your own element instead:

<Trigger asChild>
  <button className="custom-button">
    <UploadIcon /> Upload files
  </button>
</Trigger>

Render props

Passed to render, or available as the function-as-children form.

itemsUploadFileItem[]

Every item Root currently holds.

—

isLoadingboolean

True while initial is still resolving.

—

isUploadingboolean

True while at least one file is in flight.

—

uploadingCountnumber

Files currently uploading.

—

doneCountnumber

Files that finished successfully.

—

errorCountnumber

Files that threw.

—

totalProgressnumber | undefined

Average progress across active uploads.

—

open() => void

Opens the file picker. The same call the click handler makes.

—

Props

asChildboolean

Merge trigger behavior onto your own child element instead of rendering a <button>.

false

render(api: TriggerRenderProps) => ReactNode

Render from live upload state instead of children.

—

childrenReactNode

Button content. Use render when the content needs live upload state.

—

...restHTMLAttributes<HTMLElement>

Everything else is passed through. disabled comes from <Root>, not a Trigger prop.

—

PreviousRoot NextPreview