ImageField Upload Image - DingTalk Help Center

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	`'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	`'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	`'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.	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`