File List

file-list.tsx exports:

FileList: lists the files of the nearest UploaderProvider.
FileListItem: renders one file with its status, progress and actions (retry, cancel, remove).
FileBadge: renders the colored file-type tile.

Use it next to an Upload Button, or anywhere you want the files of an UploaderProvider shown as a list.

The multi-file and file field components install it automatically via the CLI.

Installation

Use the shadcn CLI to add the component to your project.

npx shadcn@latest add https://edgestore.dev/r/file-list.json

<UploaderProvider uploadFn={uploadFn} autoUpload>
  {/* anything that adds files, e.g. <UploadButton /> */}
  <FileList />
</UploaderProvider>

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Hides the retry, cancel and remove actions.
`...`			Any other `<ul>` prop, such as `className`.