> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # ImageField Unggah Gambar > Referensi komponen ImageField untuk unggah gambar di YiDA, mencakup konfigurasi properti seperti batas jumlah gambar dan pratinjau, digunakan untuk mengunggah dan mengirimkan aset gambar pada formulir. ## Kapan digunakan * Gunakan pada skenario yang membutuhkan pengunggahan dan pengiriman aset gambar. ## Contoh komponen ## Properti komponen | Atribut | Deskripsi | Tipe | Default | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------------- | | `accept` | Menentukan tipe gambar unggahan yang diterima (pisahkan beberapa nilai dengan koma). | `string` | `'image/*'` | | `autoUpload` | Apakah mengunggah secara otomatis. Jika dinonaktifkan, panggil this.\$('fieldId').startUpload() secara manual untuk memulai unggahan. | `boolean` | `true` | | `beforeUpload` | Peristiwa yang dipicu sebelum unggahan. | `(file: object, options: object) => void` | - | | `behavior` | Status tampilan komponen formulir. | [Behavior](/id/open/yida/components/interface#behavior) | `'NORMAL'` | | `buttonSize` | Ukuran tombol unggah. | `'small' \| 'medium' \| 'large'` | `'medium'` | | `buttonText` | Menentukan konten tombol. Hanya berlaku di PC. | `string` | `'Unggah File'` | | `buttonType` | Tipe tombol unggah. | `'primary' \| 'secondary' \| 'normal'` | `'primary'` | | `customUploadPane` | Panel kustom. | `() => ReactNode` | - | | `data` | Menentukan parameter tambahan yang dilampirkan saat unggahan. | `object` | `{}` | | `formatter` | Peristiwa pemrosesan data. | `(response: any) => any` | - | | `label` | Judul komponen formulir. | `string` | - | | `labelAlign` | Posisi judul komponen formulir. | `'left' \| 'top'` | `'top'` | | `labelColOffset` | Menentukan posisi offset judul. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24. | `number` | `0` | | `labelColSpan` | Menentukan lebar yang ditempati judul. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24. | `number` | `4` | | `labelTextAlign` | Perataan judul komponen formulir. | `'left' \| 'right'` | `'right'` | | `labelTipsIcon` | Ikon untuk entri tips judul komponen formulir. Berlaku saat labelTipsTypes disetel ke **text** atau **render**. | `string` | - | | `labelTipsRender` | Metode rendering kustom untuk tips judul komponen formulir. Berlaku saat labelTipsTypes disetel ke **render**. | `(props: IComponentProps) => ReactNode` | - | | `labelTipsText` | Teks tips judul komponen formulir. Berlaku saat labelTipsTypes disetel ke **text**. | `string` | - | | `labelTipsTypes` | Menentukan tipe tips untuk judul komponen formulir. | [LabelTipsTypes](/id/open/yida/components/interface#labeltipstypes) | `'none'` | | `limit` | Menentukan jumlah maksimum file yang dapat diunggah. | `number` | `9` | | `maxFileSize` | Menentukan ukuran maksimum per file (MB). | `number` | `50` | | `multiple` | Apakah mendukung unggah beberapa gambar. | `boolean` | `true` | | `name` | Nama yang dikirim ke sisi server saat unggahan. | `string` | - | | `normalListType` | Menentukan gaya daftar. | `'text' \| 'image'` | `'image'` | | `onCancel` | Peristiwa yang dipicu saat pengguna mengklik untuk membatalkan unggahan. | `() => void` | - | | `onChange` | Peristiwa yang dipicu saat nilai komponen berubah. | `({ value: object }) => void` | - | | `onDragLeave` | Peristiwa yang dipicu saat drag meninggalkan komponen. | `() => void` | - | | `onDragOver` | Peristiwa yang dipicu saat drag melewati komponen. | `() => void` | - | | `onDrop` | Peristiwa yang dipicu saat drag diselesaikan pada komponen. | `() => void` | - | | `onError` | Peristiwa yang dipicu saat nilai komponen gagal diunggah. | `(file: object, value: array) => void` | - | | `onProgress` | Peristiwa yang dipicu saat komponen sedang mengunggah. | `() => void` | - | | `onRemove` | Peristiwa yang dipicu saat pengguna mengklik untuk menghapus nilai komponen. | `(file: object) => void` | - | | `onSelect` | Peristiwa yang dipicu saat nilai komponen dipilih. | `(file: object) => void` | - | | `onSuccess` | Peristiwa yang dipicu saat nilai komponen berhasil diunggah. | `(file: object, value: array) => void` | - | | `onlyCameraUpload` | Izinkan unggahan hanya melalui kamera. Fitur ini saat ini hanya didukung di klien seluler DingTalk. Jika diaktifkan, fungsi unggah otomatis akan dinonaktifkan pada klien selain seluler DingTalk. | `boolean` | `false` | | `size` | Ukuran komponen formulir. | [Size](/id/open/yida/components/interface#size) | `'medium'` | | `timeout` | Menentukan batas waktu unggahan, dalam ms. | `number` | `0` | | `tips` | Deskripsi komponen formulir, ditampilkan di bawah kontrol. | `string` | - | | `type` | Menentukan tipe unggahan. Hanya berlaku di PC. | `'normal' \| 'drag' \| 'card'` | `'normal'` | | `validation` | Pengaturan validasi komponen formulir. Untuk detail, lihat [Dokumentasi Validasi Formulir](/id/open/yida/guide/concept/validation). | [Validation\[\]](/id/open/yida/components/interface#validation) | `[]` | | `value` | Nilai default. | `array` | - | | `withCredentials` | Menentukan apakah permintaan diizinkan membawa cookie. | `boolean` | `false` | | `wrapperColOffset` | Menentukan posisi offset komponen formulir. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24. | `number` | `0` | | `wrapperColSpan` | Menentukan lebar yang ditempati komponen formulir. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24. | `number` | `0` |