> ## 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.

# AttachmentField Attachment Upload

> AttachmentField attachment upload component documentation. Learn how to configure file type restrictions, upload limits, upload events, and other properties for file upload submission in forms.

## When to Use

* Use this component for file upload and submission scenarios.

## Component Example

## Component Properties

| Attribute          | Description                                                                                                                            | Type                                                             | Default         |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------- |
| `accept`           | Sets the allowed file types for upload (separate multiple values with commas), for example, .doc, .docx, .pdf.                         | `string`                                                         | -               |
| `autoUpload`       | Whether to upload automatically. When disabled, you must manually call this.\$('fieldId').startUpload() to start the upload.           | `boolean`                                                        | `true`          |
| `beforeUpload`     | Pre-upload processing event.                                                                                                           | `(file: object, options: object) => void`                        | -               |
| `behavior`         | Display state of the form component.                                                                                                   | [Behavior](/open/yida/components/interface#behavior)             | `'NORMAL'`      |
| `buttonSize`       | Sets the button size.                                                                                                                  | `'small' \| 'medium' \| 'large'`                                 | `'medium'`      |
| `buttonText`       | Sets the button content.                                                                                                               | `string`                                                         | `'Upload File'` |
| `buttonType`       | Sets the button type.                                                                                                                  | `'primary' \| 'secondary' \| 'normal'`                           | `'primary'`     |
| `customUploadPane` | Custom panel.                                                                                                                          | `() => ReactNode`                                                | -               |
| `data`             | Sets additional parameters attached to the upload.                                                                                     | `Record<string, string>`                                         | `{}`            |
| `formatter`        | Data processing event.                                                                                                                 | `(response: any) => any`                                         | -               |
| `headers`          | Sets the request headers for the upload.                                                                                               | `Record<string, string>`                                         | `{}`            |
| `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 in grid units, where 1 represents 1/24.                                            | `number`                                                         | `0`             |
| `labelColSpan`     | Sets the placeholder width of the title. The value is in grid units, where 1 represents 1/24.                                          | `number`                                                         | `4`             |
| `labelTextAlign`   | Alignment of the form component title.                                                                                                 | `'left' \| 'right'`                                              | `'right'`       |
| `labelTipsIcon`    | Icon for the form component title tip entry. Takes effect when labelTipsTypes is set to **text** or **render**.                        | `string`                                                         | -               |
| `labelTipsRender`  | Custom render method for the form component title tip. Takes effect when labelTipsTypes is set to **render**.                          | `(props: IComponentProps) => ReactNode`                          | -               |
| `labelTipsText`    | Text content of the form component title tip. Takes effect when labelTipsTypes is set to **text**.                                     | `string`                                                         | -               |
| `labelTipsTypes`   | Type setting for the form component title tip.                                                                                         | [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 (in MB).                                                                                                | `number`                                                         | `50`            |
| `multiple`         | Whether multiple file upload is supported.                                                                                             | `boolean`                                                        | `true`          |
| `name`             | Name sent to the Server-side during upload.                                                                                            | `string`                                                         | -               |
| `onCancel`         | Event triggered when the user cancels the upload.                                                                                      | `() => void`                                                     | -               |
| `onChange`         | Event triggered when the component value changes.                                                                                      | `({ value: object }) => void`                                    | -               |
| `onDragLeave`      | Event triggered when a drag action leaves the component.                                                                               | `() => void`                                                     | -               |
| `onDragOver`       | Event triggered when a drag action passes over the component.                                                                          | `() => void`                                                     | -               |
| `onDrop`           | Event triggered when a drag action is completed on the component.                                                                      | `() => void`                                                     | -               |
| `onError`          | Event triggered when the component upload fails.                                                                                       | `(file: object, value: array) => void`                           | -               |
| `onProgress`       | Event triggered while the component is uploading.                                                                                      | `() => void`                                                     | -               |
| `onRemove`         | Event triggered when the user removes an uploaded file.                                                                                | `(file: object) => void`                                         | -               |
| `onSelect`         | Event triggered when a file is selected.                                                                                               | `(file: object) => void`                                         | -               |
| `onSuccess`        | Event triggered when the component upload succeeds.                                                                                    | `(file: object, value: array) => void`                           | -               |
| `size`             | Size of the form component.                                                                                                            | [Size](/open/yida/components/interface#size)                     | `'medium'`      |
| `timeout`          | Sets the upload timeout in milliseconds.                                                                                               | `number`                                                         | `0`             |
| `tips`             | Description of the form component. Displayed below the control.                                                                        | `string`                                                         | -               |
| `type`             | Sets the upload type. Only takes effect on PC.                                                                                         | `'normal' \| 'drag'`                                             | `'normal'`      |
| `validation`       | Validation settings for the form component. For details, see the [form validation documentation](/open/yida/guide/concept/validation). | [Validation\[\]](/open/yida/components/interface#validation)     | `[]`            |
| `value`            | Default value.                                                                                                                         | `array`                                                          | -               |
| `withCredentials`  | Whether to allow the request to carry cookies.                                                                                         | `boolean`                                                        | `false`         |
| `wrapperColOffset` | Sets the offset position of the form component. The value is in grid units, where 1 represents 1/24.                                   | `number`                                                         | `0`             |
| `wrapperColSpan`   | Sets the placeholder width of the form component. The value is in grid units, where 1 represents 1/24.                                 | `number`                                                         | `0`             |