Components
File Picker
An accessible controlled file picker with drag-and-drop, attachment metadata, image previews, and replace and delete actions.
Install
Add this registry item to your app with shadcn.
bash
bunx --bun shadcn@latest add https://krakstack.net/r/file-picker.jsonOverview
FilePicker is a form-library-independent controlled file input. It combines a visually hidden native input with an accessible choose button, drag-and-drop selection, shadcn Attachment presentation, file metadata, image previews, and replace/delete actions. English and French labels are built in and can be overridden through messages.
Usage
tsx
const [file, setFile] = useState<File>();
<FilePicker
accept="application/pdf"
canClear={Boolean(file)}
file={file}
id="document"
name="document"
onChange={setFile}
onClear={() => setFile(undefined)}
title={file?.name ?? "Document"}
/>Pass image={{ alt, width, height, src }} to enable image previews. src can represent a persisted image while a newly selected file is previewed through a managed object URL.
Dependencies
Packages and shadcn components required by this registry item.
Dependencies
Registry Dependencies
Preview
Document
Drop a PDF or text file, or open the native file dialog.
Drag and drop a file here
Accepts: .pdf,.txt
Image
Selected images use a managed local preview URL.
Drag and drop a file here
Accepts: image/*