Actions

Three verbs cover everything a file can do after it’s selected. Every entry point below hands you the same shape.

Item actions

Each takes the item’s uid, not the item itself. Call retry only for items selected in this session; pre-hydrated items do not have a local file to upload again.

cancel(uid: string) => void

Aborts an in-flight upload through its AbortSignal. The item then moves to "canceled".

—

remove(uid: string) => void

Runs onRemove if you passed one, honoring removeMode; otherwise just drops the item.

—

retry(uid: string) => void

Calls upload() again for an item with a local file source, resetting progress to 0%. It is intended for errored or canceled uploads; pre-hydrated items have no local source.

—

Where you get them

useUplofile().actions

Anywhere inside Root. The usual way to build custom controls.

—

<Preview render>({ actions }) => …

Scoped to the render prop, alongside items.

—

<Root ref>.actions

From outside the context. See Root’s Ref API.

—

Using the hook

openFileDialog ships alongside actions on the same context, so there’s no separate import for the "select files" button.

import { useUplofile } from "uplofile";

function CustomControls() {
  const { items, actions, openFileDialog } = useUplofile();

  return (
    <div>
      <button onClick={openFileDialog}>Select files</button>
      {items.map((item) => (
        <div key={item.uid}>
          {item.name}
          {item.status === "uploading" && (
            <button onClick={() => actions.cancel(item.uid)}>Cancel</button>
          )}
          {item.status === "error" && (
            <button onClick={() => actions.retry(item.uid)}>Retry</button>
          )}
          <button onClick={() => actions.remove(item.uid)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

PreviousTypes NextExamples