FormInputFile

Pemilih file custom dengan drag-and-drop, validasi, multiple, daftar file, dan preview gambar lokal.

Dasar

Komponen menghasilkan objek File melalui v-model. Pemilihan file dan validasi terjadi di komponen; aplikasi tetap mengunggahnya ke server melalui API atau FormData.

Dokumen kontrak

Unggah PDF atau gambar dengan ukuran maksimal 5 MB.

Belum ada file terpilih.

Multiple dan preview

Mode multiple menambahkan file baru ke array yang sudah ada. Gunakan max-files, max-size, dan accept untuk validasi awal sebelum upload. Gambar menerima preview lokal; dokumen menampilkan ikon, nama, dan ukuran.

Foto lokasi

Pilih sampai empat foto. File baru belum diunggah ke server.

0 dari 4 foto dipilih.

Tombol ringkas

Variant button cocok untuk toolbar atau proses impor. Daftar file tetap ditampilkan dan dapat disembunyikan melalui show-list="false".

Impor data pickup

CSV atau XLSX, maksimal 5 MB.

Error dan disabled

Error aplikasi berasal dari FormField. File yang melanggar tipe, ukuran, duplikat, atau jumlah maksimum juga menampilkan pesan lokal dan dikirim melalui event reject.

Bukti pembayaran

Bukti pembayaran wajib diunggah.

Dokumen terverifikasi

File tidak dapat diganti selama proses verifikasi.

Mengunggah ke server

Komponen tidak memulai request jaringan. Masukkan nilai model ke FormData ketika form disimpan. Server tetap harus memeriksa tipe, ukuran, isi file, izin, dan nama penyimpanan karena validasi browser hanya membantu pengguna sebelum upload.

const body = new FormData()\nfor (const file of files.value) body.append('files[]', file)\nawait $fetch('/api/documents', { method: 'POST', body })

API

Props

Prop	Tipe	Default	Keterangan
id	string	—	ID saat dipakai sendiri. Di dalam FormField, setel ID-nya di FormField.
v-model	File \| File[] \| null	null	File terpilih. Multiple menghasilkan File[], sedangkan mode tunggal menghasilkan File.
variant	'dropzone' \| 'button'	'dropzone'	Area drag-and-drop atau tombol upload ringkas.
size	'sm' \| 'md' \| 'lg'	'md'	Ukuran area, teks, preview, dan tombol.
multiple	boolean	false	Mengizinkan lebih dari satu file dan menambahkan pilihan baru.
accept	string	semua tipe	Daftar MIME, wildcard, atau ekstensi native seperti image/*,.pdf.
maxSize	number	5 * 1024 * 1024	Ukuran maksimum setiap file dalam byte; 0 meniadakan batas.
maxFiles	number	0	Jumlah maksimum pada multiple; 0 meniadakan batas.
preview	boolean	true	Membuat object URL lokal untuk preview file gambar.
showList	boolean	true	Menampilkan daftar file, ukuran, preview, dan tombol hapus.
allowDuplicates	boolean	false	Mengizinkan metadata file yang sama dipilih lebih dari sekali.
capture	boolean \| 'user' \| 'environment'	undefined	Meneruskan petunjuk sumber kamera ke input file pada perangkat.
disabled	boolean	false	Menonaktifkan pemilihan, drop, dan penghapusan file.
required	boolean	false	Menandai trigger wajib diisi; diwarisi dari FormField.
invalid	boolean	false	Status error untuk pemakaian mandiri.
browseLabel	string	'Pilih file'	Label tombol pada variant button.
dropLabel	string	'Klik untuk memilih atau tarik file ke sini'	Teks utama dropzone.
hint	string	dibuat dari accept dan batas	Keterangan ringkas di dalam dropzone.

Slots

Slot	Tipe	Default	Keterangan
trigger	{ browse, dragging, disabled }	—	Mengganti dropzone atau tombol pemilih file.
file	{ file, index, previewUrl, remove }	—	Mengganti tampilan setiap file terpilih.

Events

Event	Tipe	Default	Keterangan
update:modelValue	(File \| File[] \| null) => void	—	Dipicu untuk sinkronisasi v-model.
change	(File \| File[] \| null) => void	—	Dipicu ketika daftar file yang valid berubah.
reject	(W4cFormInputFileRejection[]) => void	—	Mengirim file yang ditolak beserta alasan type, size, count, atau duplicate.
remove	(file: File, index: number) => void	—	Dipicu setelah satu file dihapus.

Atribut name dan listener native diteruskan ke input file. Class/style diterapkan pada wrapper. Ref komponen menyediakan browse(), clear(), dan focus().