useUplofile

Reads the same context every child component subscribes to. Call it inside <Root> to build custom UI without prop drilling.

Signature

function useUplofile<TMeta = any, TFileSource = unknown>(): {
  items: UploadFileItem<TMeta, TFileSource>[];
  setItems: (items | updater) => void;
  isLoading: boolean;
  disabled?: boolean;
  multiple: boolean;
  accept: string;
  actions: ItemActions;
  openFileDialog: () => void;
  fileInputProps: Record<string, any>;
  getDropzoneProps: () => Record<string, any>;
  hiddenInputValue: string;
  name: string;
};

// Throws if called outside <Root>.

Context value

Everything Trigger, Dropzone, and Preview read is available here too.

itemsUploadFileItem<TMeta, TFileSource>[]

The full list: idle, uploading, done, error, canceled, or removing.

—

setItems(items | updater) => void

Replace the list directly. This is an escape hatch; actions cover the usual file operations.

—

isLoadingboolean

True while initial is resolving.

—

disabledboolean | undefined

Mirrors Root’s disabled prop.

—

multipleboolean·acceptstring

The resolved Root options. Read them instead of duplicating configuration in custom UI.

—

actionsItemActions

See the Actions reference.

—

openFileDialog() => void

What Trigger calls under the hood. Use it to build a custom trigger.

—

fileInputPropsRecord<string, any>

Props for a native file input when you need to render one yourself.

—

getDropzoneProps() => Record<string, any>

Returns the keyboard and drag-and-drop props used by Dropzone.

—

hiddenInputValuestring

The JSON string HiddenInput renders, if you need it elsewhere.

—

namestring

Root’s resolved hidden-field name.

—

Example

import { useUplofile } from "uplofile";

export function UploadSummary() {
  const { items, isLoading, accept, multiple } = useUplofile();
  const done = items.filter((item) => item.status === "done").length;

  if (isLoading) return <p>Loading existing files…</p>;

  return (
    <p>
      {done} of {items.length} uploaded · accepts {accept}
      {multiple ? " · multiple" : ""}
    </p>
  );
}

PreviousActions NextBasic uploader