File Upload

File Upload membantu pengguna mengunggah satu atau beberapa berkas ke dalam sistem. Komponen ini dirancang agar proses pengiriman dokumen pendukung terasa cepat, terstruktur, dan aman.

Penggunaan

Gunakan komponen File Upload sebagai area interaktif untuk memilih atau menyeret (drag and drop) berkas yang ingin diunggah. File upload baiknya digunakan pada formulir pendaftaran, pengiriman dokumen, atau fitur pelaporan yang membutuhkan lampiran file. Pastikan desainnya intuitif dan memberi umpan balik visual yang jelas, seperti status berhasil, gagal, atau sedang diproses, agar pengguna memahami setiap langkah unggahan.

Anatomi

Upload Field

Upload Button

Upload Item

Perilaku

Upload Base

•Pengguna dapat mengunggah file dengan cara drag and drop atau memilih file melalui tombol Pilih File.
•Jika sistem hanya menerima satu file, komponen akan menampilkan status file yang diunggah dan menonaktifkan unggahan tambahan.
•Tambahkan deskripsi tambahan bila sistem memiliki prasyarat khusus, seperti ukuran maksimal, jenis file yang diterima, atau format tertentu.

Upload Base

•Menampilkan nama file, status unggahan, dan tombol aksi.
•Bagian deskripsi dapat menampilkan ukuran file atau pesan eror jika unggahan gagal.

Varian

Varian dalam file upload terdapat pada item upload base yang dibagi menjadi Upload Field dan Upload Button.

Upload Field

Upload Button

Keadaan

Upload Base

Komponen Upload Base memiliki tiga state utama: Default, Focus, dan Disabled.

Jika sistem hanya menerima satu file, Upload Base juga memiliki tiga keadaan tambahan: Uploading, Uploaded, dan Error.

Upload Item

Komponen Upload Item memiliki tiga state: Uploading, Uploaded, dan Error. Digunakan untuk menampilkan status file yang diunggah secara individu.

Uploading

Uploaded

Error

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan label yang jelas agar pengguna tahu jenis file yang perlu diunggah.

❌ Dihindari

Hindari pesan eror yang tidak spesifik atau tidak memberi tahu solusi.

✅ Disarankan

Tampilkan hingga 5 upload item dalam satu daftar. Jika jumlah item melebihi batas tersebut, sembunyikan sisanya dan sediakan tombol “Lihat Selengkapnya” untuk menampilkan seluruh daftar.

❌ Dihindari

Jangan tampilkan semua upload item sekaligus. Sembunyikan sebagian item jika jumlahnya lebih dari lima, dan berikan opsi untuk menampilkan sisanya bila diperlukan.

Penerapan

Halaman Turunan

Gunakan varian base Field saat unggah file menjadi aksi utama dalam sebuah halaman atau bagian.

Pengguna dapat mengunggah file dengan dua cara: memilih melalui tombol “Pilih Dokumen” atau menyeret dan meletakkan file langsung ke area unggahan (drag & drop).

Varian ini cocok digunakan pada halaman dengan fokus utama terhadap proses unggah dokumen.

Form

Gunakan varian base Button saat unggah file dilakukan di dalam sebuah form.

Varian ini menjaga tampilan form tetap ringkas dan terintegrasi dengan elemen input lainnya, seperti nama, surel, atau keterangan tambahan.