Live Docs

Navigation

Forms /

stable

File Upload

Input file berbasis native File API — 2 bentuk: dropzone drag-and-drop atau tombol compact. Preview gambar, validasi tipe/ukuran, dan daftar file yang bisa dihapus.

import { FileUpload } from "@naraya/ui";

Examples

Multiple + preview gambar

Klik untuk upload atau drag & drop
PNG, JPG, atau GIF — maks 5MB per file

0 file terpilih

const [files, setFiles] = useState<File[]>([]);

<FileUpload
  multiple
  accept="image/*"
  maxSizeMb={5}
  value={files}
  onChange={setFiles}
  hint="PNG, JPG, atau GIF — maks 5MB"
/>

Single + label + validasi

Lampiran dokumen
Klik untuk upload atau drag & drop
PDF / DOCX, maks 2MB
<FileUpload
  label="Lampiran dokumen"
  accept=".pdf,.docx"
  maxSizeMb={2}
  onReject={(file, reason) => console.warn(file.name, reason)}
/>

Variant input (form field)

Pilih dokumen...Pilih File
Pilih gambar...Browse
<FileUpload variant="input" placeholder="Pilih dokumen..." />

<FileUpload variant="input" multiple buttonLabel="Browse" />

Variant button (compact)

PDF / DOCX
Belum ada file dipilih
<FileUpload variant="button" accept=".pdf,.docx" />

<FileUpload variant="button" multiple buttonLabel="Pilih Gambar" />

Disabled

Klik untuk upload atau drag & drop
Upload dinonaktifkan
Belum ada file dipilih
<FileUpload disabled />
<FileUpload variant="button" disabled />

Props

PropTypeDefaultDescription
variant"dropzone" | "button" | "input""dropzone"Bentuk: dropzone besar, tombol compact, atau field setinggi input form.
acceptstring—Filter tipe (mis. "image/*", ".pdf,.docx").
multiplebooleanfalseIzinkan banyak file.
buttonLabelReactNode"Pilih File"Label tombol pada variant "button" / "input".
placeholderstring"Pilih file..."Teks placeholder saat kosong (variant "input").
maxSizeMbnumber—Ukuran maksimum per file (MB).
valueFile[]—Daftar file terkontrol — pasangkan dengan onChange.
onChange(files: File[]) => void—Callback saat daftar file berubah.
onReject(file: File, reason: "size" | "type") => void—Dipanggil saat file ditolak validasi.
labelReactNode—Label di atas dropzone.
hintReactNode—Teks bantuan di dalam dropzone.
disabledbooleanfalseNonaktifkan interaksi.

Tokens Used

--border-subtle

Border dashed dropzone & item

--color-primary

Aksen hover/drag + teks aksi

--bg-surface

Latar dropzone & item file

--color-error

Aksi hapus file

Accessibility

  • Dropzone fokusabel (role='button', tabIndex=0) dan dibuka via Enter/Space.
  • Input file asli disembunyikan tapi tetap dipakai untuk picker native.
  • Tiap tombol hapus punya aria-label 'Remove <nama file>'.
  • Sediakan hint tipe/ukuran agar ekspektasi jelas sebelum upload.