Actions Reference

Programmatic actions available via render props and hooks.

Available Actions

Action	Signature	Description
`remove`	(uid: string) => void	Remove a specific file
`cancel`	(uid: string) => void	Cancel an in-flight upload
`retry`	(uid: string) => void	Retry a failed upload
`openFileDialog`	() => void	Open the file picker

Using the Hook

1import { useUplofile } from "uplofile";
2
3function CustomControls() {
4  const {
5    actions: { cancel, remove, retry },
6    items,
7    openFileDialog,
8  } = useUplofile();
9
10  return (
11    <div>
12      <button onClick={openFileDialog}>Open File</button>
13      <div>
14        {items.map((item) => {
15          return (
16            <div>
17              <div>{item.name}</div>
18              <button onClick={() => remove(item.uid)}>Remove</button>
19              {item.status === "uploading" && (
20                <button onClick={() => cancel(item.uid)}>Cancel</button>
21              )}
22              {item.status === "error" && (
23                <button onClick={() => retry(item.uid)}>Retry</button>
24              )}
25            </div>
26          );
27        })}
28      </div>
29    </div>
30  );
31}