> ## 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 Upload Image

> Reference for the ImageField upload image component, covering property configurations such as image count limits and preview, used to upload and submit image assets in forms.

## When to Use

* Use in scenarios where image assets need to be uploaded and submitted.

## Component Example

## Component Properties

| Attribute          | Description                                                                                                                                                                                        | Type                                                             | Default         |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------- |
| `accept`           | Sets the accepted upload image types (separate multiple values with commas).                                                                                                                       | `string`                                                         | `'image/*'`     |
| `autoUpload`       | Whether to upload automatically. When disabled, call `this.$('fieldId').startUpload()` manually to start the upload.                                                                               | `boolean`                                                        | `true`          |
| `beforeUpload`     | Event triggered before upload.                                                                                                                                                                     | `(file: object, options: object) => void`                        | -               |
| `behavior`         | Display state of the form component.                                                                                                                                                               | [Behavior](/open/yida/components/interface#behavior)             | `'NORMAL'`      |
| `buttonSize`       | Size of the upload button.                                                                                                                                                                         | `'small' \| 'medium' \| 'large'`                                 | `'medium'`      |
| `buttonText`       | Sets the button content. Only effective on PC.                                                                                                                                                     | `string`                                                         | `'Upload File'` |
| `buttonType`       | Type of the upload button.                                                                                                                                                                         | `'primary' \| 'secondary' \| 'normal'`                           | `'primary'`     |
| `customUploadPane` | Custom panel.                                                                                                                                                                                      | `() => ReactNode`                                                | -               |
| `data`             | Sets additional parameters attached during upload.                                                                                                                                                 | `object`                                                         | `{}`            |
| `formatter`        | Data processing event.                                                                                                                                                                             | `(response: any) => any`                                         | -               |
| `label`            | Title of the form component.                                                                                                                                                                       | `string`                                                         | -               |
| `labelAlign`       | Position of the form component title.                                                                                                                                                              | `'left' \| 'top'`                                                | `'top'`         |
| `labelColOffset`   | Sets the offset position of the title. The value is a grid value, where 1 represents 1/24.                                                                                                         | `number`                                                         | `0`             |
| `labelColSpan`     | Sets the width occupied by the title. The value is a grid value, where 1 represents 1/24.                                                                                                          | `number`                                                         | `4`             |
| `labelTextAlign`   | Alignment of the form component title.                                                                                                                                                             | `'left' \| 'right'`                                              | `'right'`       |
| `labelTipsIcon`    | Icon for the entry point of the form component title tips. Effective when `labelTipsTypes` is set to **text** or **render**.                                                                       | `string`                                                         | -               |
| `labelTipsRender`  | Custom rendering method for the form component title tips. Effective when `labelTipsTypes` is set to **render**.                                                                                   | `(props: IComponentProps) => ReactNode`                          | -               |
| `labelTipsText`    | Tips text of the form component title. Effective when `labelTipsTypes` is set to **text**.                                                                                                         | `string`                                                         | -               |
| `labelTipsTypes`   | Sets the type of tips for the form component title.                                                                                                                                                | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes) | `'none'`        |
| `limit`            | Sets the maximum number of files that can be uploaded.                                                                                                                                             | `number`                                                         | `9`             |
| `maxFileSize`      | Sets the maximum size per file (MB).                                                                                                                                                               | `number`                                                         | `50`            |
| `multiple`         | Whether to support uploading multiple images.                                                                                                                                                      | `boolean`                                                        | `true`          |
| `name`             | The name sent to the server side during upload.                                                                                                                                                    | `string`                                                         | -               |
| `normalListType`   | Sets the list style.                                                                                                                                                                               | `'text' \| 'image'`                                              | `'image'`       |
| `onCancel`         | Event triggered when the user clicks to cancel the upload.                                                                                                                                         | `() => void`                                                     | -               |
| `onChange`         | Event triggered when the component value changes.                                                                                                                                                  | `({ value: object }) => void`                                    | -               |
| `onDragLeave`      | Event triggered when a drag leaves the component.                                                                                                                                                  | `() => void`                                                     | -               |
| `onDragOver`       | Event triggered when a drag passes over the component.                                                                                                                                             | `() => void`                                                     | -               |
| `onDrop`           | Event triggered when a drag is completed on the component.                                                                                                                                         | `() => void`                                                     | -               |
| `onError`          | Event triggered when the component value fails to upload.                                                                                                                                          | `(file: object, value: array) => void`                           | -               |
| `onProgress`       | Event triggered while the component is uploading.                                                                                                                                                  | `() => void`                                                     | -               |
| `onRemove`         | Event triggered when the user clicks to remove the component value.                                                                                                                                | `(file: object) => void`                                         | -               |
| `onSelect`         | Event triggered when the component value is selected.                                                                                                                                              | `(file: object) => void`                                         | -               |
| `onSuccess`        | Event triggered when the component value is uploaded successfully.                                                                                                                                 | `(file: object, value: array) => void`                           | -               |
| `onlyCameraUpload` | Allow uploads only via camera. This feature is currently supported only on the DingTalk mobile client. When enabled, the upload function is automatically disabled on non-DingTalk mobile clients. | `boolean`                                                        | `false`         |
| `size`             | Size of the form component.                                                                                                                                                                        | [Size](/open/yida/components/interface#size)                     | `'medium'`      |
| `timeout`          | Sets the upload timeout, in ms.                                                                                                                                                                    | `number`                                                         | `0`             |
| `tips`             | Description of the form component, displayed below the control.                                                                                                                                    | `string`                                                         | -               |
| `type`             | Sets the upload type. Only effective on PC.                                                                                                                                                        | `'normal' \| 'drag' \| 'card'`                                   | `'normal'`      |
| `validation`       | Form component validation settings. For details, see the [Form Validation Documentation](/open/yida/guide/concept/validation).                                                                     | [Validation\[\]](/open/yida/components/interface#validation)     | `[]`            |
| `value`            | Default value.                                                                                                                                                                                     | `array`                                                          | -               |
| `withCredentials`  | Sets whether to allow requests to carry cookies.                                                                                                                                                   | `boolean`                                                        | `false`         |
| `wrapperColOffset` | Sets the offset position of the form component. The value is a grid value, where 1 represents 1/24.                                                                                                | `number`                                                         | `0`             |
| `wrapperColSpan`   | Sets the width occupied by the form component. The value is a grid value, where 1 represents 1/24.                                                                                                 | `number`                                                         | `0`             |