Preview

Displays previews of selected files with full control over rendering.

Usage

1import {
2  UplofileRoot,
3  UplofileDropzone,
4  UplofileTrigger,
5  UplofilePreview,
6} from "@/components/ui/uplofile";
7
8export default function PreviewDemo() {
9  return (
10    <UplofileRoot upload={async () => ({ url: "" })}>
11      <UplofileDropzone className="border p-4 rounded">
12        <UplofileTrigger>Select files</UplofileTrigger>
13
14        {/* Default Preview */}
15        <UplofilePreview />
16
17        {/* Custom Preview with Render Props */}
18        <UplofilePreview
19          render={({ items, actions }) => (
20            <ul className="mt-4 space-y-2">
21              {items.map((item) => (
22                <li key={item.uid} className="flex items-center gap-2">
23                  <span>
24                    {item.name} - {item.status}
25                  </span>
26                  <button
27                    onClick={() => actions.remove(item.uid)}
28                    className="text-red-500 text-sm"
29                  >
30                    Remove
31                  </button>
32                </li>
33              ))}
34            </ul>
35          )}
36        />
37      </UplofileDropzone>
38    </UplofileRoot>
39  );
40}

Default Behavior

By default, UplofilePreview renders a responsive grid of file cards with preview images, upload progress, and action buttons (Cancel, Retry, Remove).

Default Preview

The default preview component provides a responsive grid layout with image thumbnails, progress bars, and action buttons.

1<UplofilePreview />

Custom Preview (No Styling)

If you want to build your own preview UI from scratch without any default styling, use the render prop.

1<UplofilePreview
2  render={({ items, actions }) => (
3    <ul>
4      {items.map((item) => (
5        <li key={item.uid}>
6          {item.name} - {item.status}
7          <button onClick={() => actions.remove(item.uid)}>
8            Remove
9          </button>
10        </li>
11      ))}
12    </ul>
13  )}
14/>

Custom Rendering (Render Props)

Use the render prop to completely customize the preview UI. See the "Usage" example above for a live demonstration of custom rendering.

Property	Type	Description
`items`	type UploadFileItem[]	Array of selected files
`setItems`	(items) => void	Function to update the items list
`actions`	ItemActions	Actions to manage items (remove, retry, cancel)