Form Attachments

File picker and attachment preview list connected to Form context with support for existing files and upload states.

Installation

bash

pnpm dlx shadcn@latest add @cs/form-attachments

Usage

tsx

import { Form } from "@/components/cs/form";
import { FormAttachments } from "@/components/cs/form-attachments";

tsx

<Form action={saveDocuments}>
  <FormAttachments />
</Form>

API Reference

FormAttachments

Displays existing and newly selected files and uploads new files through the nearest Form. The translation namespace must contain add, noFiles, idle, uploading, processing, error, done, ready, and remove with a {name} interpolation.

Props

Name	Type	Default	Description
accept	string \| undefined	-	Accepted file extensions or MIME types passed to the native file picker.
containerClassName	string \| undefined	-	Additional class names applied to the grid wrapper that contains all attachment cards.
defaultValue	DefaultFile[] \| undefined	-	Files already stored by the application and shown before new uploads.
disabled	boolean \| undefined	-	Disables the file picker button.
itemClassName	string \| undefined	-	Additional class names applied to each individual attachment item.
readOnly	boolean \| undefined	false	Prevents selecting or removing files while keeping existing attachments visible.
translationsRootKey	string \| undefined	"form.attachments"	Translation namespace containing the attachment labels and messages. The namespace must provide `add`, `noFiles`, `idle`, `uploading`, `processing`, `error`, `done`, and `ready` strings, plus `remove` with a `{name}` interpolation. `{ "add": "Add file", "noFiles": "No files selected", "idle": "Ready to upload", "uploading": "Uploading", "processing": "Processing", "error": "Upload failed", "done": "Uploaded", "ready": "Ready", "remove": "Remove {name}" }` The default namespace is `form.attachments`.

Dependencies

@cs/attachments @cs/form