Trigger

A clickable element that opens the file picker dialog.

Usage

1import { UplofileRoot, UplofileTrigger } from "@/components/ui/uplofile";
2
3export default function TriggerDemo() {
4  return (
5    <UplofileRoot upload={async () => ({ url: "" })}>
6      {/* Simple Trigger */}
7      <UplofileTrigger className="underline text-blue-500">
8        Select files
9      </UplofileTrigger>
10
11      {/* Trigger with Render Props */}
12      <UplofileTrigger
13        render={({ isUploading, doneCount, uploadingCount }) => (
14          <span>
15            {isUploading
16              ? `Uploading ${uploadingCount} files...`
17              : "Upload files"}
18          </span>
19        )}
20      />
21    </UplofileRoot>
22  );
23}

With Custom Element

Use asChild to render your own element:

1<UplofileTrigger asChild>
2  <button className="custom-button">
3    <UploadIcon /> Upload files
4  </button>
5</UplofileTrigger>

Render Props

You can use a function as children or the render prop to access internal state. See the "Usage" example above for a live demonstration of render props.

Render props available to trigger children
Property	Type	Description
`items`	type UploadFileItem[]	Array of all file items
`isUploading`	boolean	Whether any file is uploading
`uploadingCount`	number	Number of files currently uploading
`doneCount`	number	Number of successfully uploaded files
`errorCount`	number	Number of failed uploads
`totalProgress`	number \| undefined	Average progress of all active uploads
`open`	() => void	Function to open the file dialog

Props

Trigger component props
Prop	Type	Description
`asChild`	boolean	Merge props onto child element
`disabled`	boolean	Disable the trigger