Komponen / Form & input

FileUpload

Area unggah lampiran (PO customer, BAST, faktur) dengan daftar file dan progres per file.

React · BetaFigma · siapFigma Sumber

Import

tsx

import { FileUpload, formatFileSize } from '@divistant/circca-react';

Komponen tidak mengunggah sendiri. Juga menerima atribut <div> untuk wadah luar.

Prop	Tipe	Default	Keterangan
files	FileUploadItem[]	[]	{ id, name, size, progress?, status: "uploading" \| "done" \| "error", error?, meta? } — dikelola pemanggil.
onFilesAdd	(files: File[]) => void	—	File yang lolos accept & maxSize, dari pilih file maupun tarik-lepas.
onRemove	(id: string) => void	—	Hapus file / batalkan unggahan berjalan.
onRetry	(id: string) => void	—	Ulangi unggahan gagal. Tanpa ini tombol "Coba lagi" tidak tampil.
onReject	(rejections: FileUploadRejection[]) => void	—	File ditolak ({ file, reason: "type" \| "size", message }). Pesan juga tampil di daftar sampai ditutup.
accept	string	—	Sama dengan atribut accept: ".pdf,.jpg,.png" atau "application/pdf,image/*".
multiple	boolean	false	Boleh lebih dari satu file.
maxSize	number	—	Ukuran maksimum per file (byte).
hint	ReactNode	—	Petunjuk (properti Figma "Hint"): "PDF, JPG, atau PNG · maks. 10 MB". Default dari maxSize.
prompt / browseLabel	ReactNode / string	'Tarik file ke sini atau' / 'pilih file'	Teks ajakan dan tombol pilih file.
hideDropzone	boolean	false	Sembunyikan area drop, mis. field satu file yang sudah terisi.
invalid / disabled / required	boolean	false	Mengikuti FormField bila dibungkus.
name	string	—	Nama input file asli.
aria-label	string	—	Nama aksesibel bila tidak dibungkus FormField.

Utilitas ukuran file Bahasa Indonesia.

Prop	Tipe	Default	Keterangan
(bytes, locale?)	(number, string) => string	—	"820 B", "48 KB", "2,4 MB".

Kode komponen ada di packages/react/src/components/file-upload. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.