Skip to content

Components · Reference

File Picker

An accessible controlled file picker with drag-and-drop, attachment metadata, image previews, and replace and delete actions.

Last updated October 17, 2026

Overview

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.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. Message overrides are keyed by arbitrary locale strings, so additional languages can be supplied with messages={{ es: { ... } }}. Exact locale keys such as es-MX take precedence over base keys such as es; English is the final fallback.

Install

shell
bunx shadcn@latest add @krak-stack/file-picker

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/*

Multiple files
Choose several documents at once or add more files to the current selection.

Drag and drop files here

Accepts: .pdf,.txt,.doc,.docx