Aller au contenu

Composants · Référence

File Picker

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

Dernière mise à jour le 17 octobre 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
Déposez un fichier PDF ou texte, ou ouvrez le sélecteur de fichiers natif.

Glissez-déposez un fichier ici

Accepte : .pdf,.txt

Image
Les images sélectionnées utilisent une URL d’aperçu locale gérée.

Glissez-déposez un fichier ici

Accepte : image/*

Plusieurs fichiers
Choisissez plusieurs documents à la fois ou ajoutez des fichiers à la sélection actuelle.

Glissez-déposez des fichiers ici

Accepte : .pdf,.txt,.doc,.docx