> ## 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 画像アップロード

> ImageField 画像アップロードコンポーネントのリファレンス。画像枚数制限やプレビューなどのプロパティ設定を解説し、フォームで画像ファイルをアップロード・送信する際に使用します。

## 使用するタイミング

* 画像ファイルをアップロードして送信する必要があるシナリオで使用します。

## コンポーネント例

## コンポーネントプロパティ

| 属性                 | 説明                                                                                                                | タイプ                                                                 | デフォルト           |
| ------------------ | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------------- |
| `accept`           | アップロード可能な画像タイプを設定します（複数の値はカンマで区切ります）。                                                                             | `string`                                                            | `'image/*'`     |
| `autoUpload`       | 自動アップロードするかどうか。無効にした場合は、this.\$('fieldId').startUpload() を手動で呼び出してアップロードを開始します。                                   | `boolean`                                                           | `true`          |
| `beforeUpload`     | アップロード前にトリガーされるイベント。                                                                                              | `(file: object, options: object) => void`                           | -               |
| `behavior`         | フォームコンポーネントの表示状態。                                                                                                 | [Behavior](/ja/open/yida/components/interface#behavior)             | `'NORMAL'`      |
| `buttonSize`       | アップロードボタンのサイズ。                                                                                                    | `'small' \| 'medium' \| 'large'`                                    | `'medium'`      |
| `buttonText`       | ボタンのコンテンツを設定します。PC でのみ有効です。                                                                                       | `string`                                                            | `'ファイルをアップロード'` |
| `buttonType`       | アップロードボタンのタイプ。                                                                                                    | `'primary' \| 'secondary' \| 'normal'`                              | `'primary'`     |
| `customUploadPane` | カスタムパネル。                                                                                                          | `() => ReactNode`                                                   | -               |
| `data`             | アップロード時に付加する追加パラメータを設定します。                                                                                        | `object`                                                            | `{}`            |
| `formatter`        | データ処理イベント。                                                                                                        | `(response: any) => any`                                            | -               |
| `label`            | フォームコンポーネントのタイトル。                                                                                                 | `string`                                                            | -               |
| `labelAlign`       | フォームコンポーネントタイトルの配置位置。                                                                                             | `'left' \| 'top'`                                                   | `'top'`         |
| `labelColOffset`   | タイトルのオフセット位置を設定します。値はグリッド値で、1 は 1/24 を表します。                                                                       | `number`                                                            | `0`             |
| `labelColSpan`     | タイトルが占める幅を設定します。値はグリッド値で、1 は 1/24 を表します。                                                                          | `number`                                                            | `4`             |
| `labelTextAlign`   | フォームコンポーネントタイトルの配置方向。                                                                                             | `'left' \| 'right'`                                                 | `'right'`       |
| `labelTipsIcon`    | フォームコンポーネントタイトルのヒントエントリポイントのアイコン。labelTipsTypes が **text** または **render** に設定されている場合に有効です。                        | `string`                                                            | -               |
| `labelTipsRender`  | フォームコンポーネントタイトルのヒントをカスタムレンダリングする方法。labelTipsTypes が **render** に設定されている場合に有効です。                                   | `(props: IComponentProps) => ReactNode`                             | -               |
| `labelTipsText`    | フォームコンポーネントタイトルのヒントテキスト。labelTipsTypes が **text** に設定されている場合に有効です。                                                | `string`                                                            | -               |
| `labelTipsTypes`   | フォームコンポーネントタイトルのヒントのタイプを設定します。                                                                                    | [LabelTipsTypes](/ja/open/yida/components/interface#labeltipstypes) | `'none'`        |
| `limit`            | アップロード可能なファイルの最大数を設定します。                                                                                          | `number`                                                            | `9`             |
| `maxFileSize`      | 1 ファイルあたりの最大サイズ（MB）を設定します。                                                                                        | `number`                                                            | `50`            |
| `multiple`         | 複数の画像のアップロードをサポートするかどうか。                                                                                          | `boolean`                                                           | `true`          |
| `name`             | アップロード時にサーバーサイドに送信される名前。                                                                                          | `string`                                                            | -               |
| `normalListType`   | リストのスタイルを設定します。                                                                                                   | `'text' \| 'image'`                                                 | `'image'`       |
| `onCancel`         | ユーザーがアップロードのキャンセルをクリックしたときにトリガーされるイベント。                                                                           | `() => void`                                                        | -               |
| `onChange`         | コンポーネントの値が変更されたときにトリガーされるイベント。                                                                                    | `({ value: object }) => void`                                       | -               |
| `onDragLeave`      | ドラッグがコンポーネントから離れたときにトリガーされるイベント。                                                                                  | `() => void`                                                        | -               |
| `onDragOver`       | ドラッグがコンポーネント上を通過したときにトリガーされるイベント。                                                                                 | `() => void`                                                        | -               |
| `onDrop`           | コンポーネント上でドラッグが完了したときにトリガーされるイベント。                                                                                 | `() => void`                                                        | -               |
| `onError`          | コンポーネントの値のアップロードが失敗したときにトリガーされるイベント。                                                                              | `(file: object, value: array) => void`                              | -               |
| `onProgress`       | コンポーネントがアップロード中にトリガーされるイベント。                                                                                      | `() => void`                                                        | -               |
| `onRemove`         | ユーザーがコンポーネントの値の削除をクリックしたときにトリガーされるイベント。                                                                           | `(file: object) => void`                                            | -               |
| `onSelect`         | コンポーネントの値が選択されたときにトリガーされるイベント。                                                                                    | `(file: object) => void`                                            | -               |
| `onSuccess`        | コンポーネントの値のアップロードが成功したときにトリガーされるイベント。                                                                              | `(file: object, value: array) => void`                              | -               |
| `onlyCameraUpload` | カメラ経由でのみアップロードを許可します。この機能は現在、DingTalk モバイルクライアントでのみサポートされています。有効にすると、DingTalk モバイルクライアント以外ではアップロード機能が自動的に無効になります。 | `boolean`                                                           | `false`         |
| `size`             | フォームコンポーネントのサイズ。                                                                                                  | [Size](/ja/open/yida/components/interface#size)                     | `'medium'`      |
| `timeout`          | アップロードのタイムアウトをミリ秒単位で設定します。                                                                                        | `number`                                                            | `0`             |
| `tips`             | フォームコンポーネントの説明。コントロールの下に表示されます。                                                                                   | `string`                                                            | -               |
| `type`             | アップロードのタイプを設定します。PC でのみ有効です。                                                                                      | `'normal' \| 'drag' \| 'card'`                                      | `'normal'`      |
| `validation`       | フォームコンポーネントのバリデーション設定。詳細は[フォームバリデーションドキュメント](/ja/open/yida/guide/concept/validation)を参照してください。                    | [Validation\[\]](/ja/open/yida/components/interface#validation)     | `[]`            |
| `value`            | デフォルト値。                                                                                                           | `array`                                                             | -               |
| `withCredentials`  | リクエストに Cookie を含めることを許可するかどうかを設定します。                                                                              | `boolean`                                                           | `false`         |
| `wrapperColOffset` | フォームコンポーネントのオフセット位置を設定します。値はグリッド値で、1 は 1/24 を表します。                                                                | `number`                                                            | `0`             |
| `wrapperColSpan`   | フォームコンポーネントが占める幅を設定します。値はグリッド値で、1 は 1/24 を表します。                                                                   | `number`                                                            | `0`             |