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

# 添付

> YiDA 添付コンポーネントの設定方法を解説。アップロード種別、ボタン設定、複数選択と最大ファイル数の制限、対応ファイル形式、オンラインプレビュー・編集機能まで、ワークフロー最適化に必要な操作手順を紹介します。

## 1. 利用シーン

証明書、資料、データ、契約書など、添付内容のアップロードが必要な場面で使用します。

現在、YiDA の添付は 1 件あたり 100 MB に制限されています。

<Note>
  コンポーネントの属性、使用方法、例については、[**こちら**](/ja/open/yida/components/interface)をご参照ください。
</Note>

## 2. 基本機能

### 2.1 アップロード種別

機能：添付のアップロード方法を設定します。

**パス：** 属性 >> アップロード詳細設定 >> アップロード種別

アップロード種別：クリックとドラッグ＆ドロップの 2 種類が利用可能です。

**クリック**（クリックに設定すると、「ファイルをアップロード」をクリックして直接添付をアップロードできます）

**ドラッグ＆ドロップ**（ドラッグ＆ドロップに設定すると、点線枠内にファイルをドラッグしてアップロードできます）：

### 2.2 ボタンコンテンツ

機能：アップロードボタンのテキストを設定します。

**パス**：属性 >> アップロード詳細設定 >> ボタンコンテンツ（このオプションはアップロード種別がクリックに設定されている場合のみ表示されます）

効果は次のとおりです：

ボタンコンテンツはデフォルトで「ファイルをアップロード」となっています。用途に合わせてボタンテキストをカスタマイズできます。

効果は次のとおりです：

### 2.3 ボタンタイプ

ボタンタイプ：primary、second（セカンダリ）、normal の 3 種類です。

primary：ボタンは青色の背景に白色のテキストです。

効果は次のとおりです：

second（セカンダリ）：ボタンは青色の枠線に青色のテキストです。効果は次のとおりです：

normal：ボタンはグレーの枠線にグレーのテキストです。効果は次のとおりです：

### 2.4 複数選択と最大ファイル数

#### 2.4.1 複数選択

機能：複数選択を有効化すると、ユーザーは同時に複数の添付をアップロードできます。

**パス**：属性 >> アップロード詳細設定 >> 複数選択

**注意**：複数選択を有効化すると、ユーザーはアップロード時に複数のファイルを選択できます。ただし、選択可能なファイル数は「最大ファイル数」で設定した値に依存します。

#### 2.4.2 最大ファイル数

機能：アップロード可能な添付の最大数を設定します。

**パス**：属性 >> アップロード詳細設定 >> 最大ファイル数

最大ファイル数を 4 に設定した場合、効果は次のとおりです：

### 2.5 アップロード添付種類

機能：アップロードを許可するファイル形式を設定します。

<Note>
  ファイル拡張子は数字と英字のみに対応しています。
</Note>

**パス：** 属性 >> アップロード詳細設定 >> アップロード添付種類

例：アップロード添付種類を PDF に設定すると、PDF ファイルのみアップロードできます。効果は次のとおりです：

設定後、アップロードページでは他のファイルタイプはアップロードできません。以下のとおり、他の画像形式のファイルはグレー表示となり選択できず、PDF ファイルのみを選択してアップロードできます。

この属性は実際にはファイルアップロードの accept 属性（許可するファイルタイプを制限）を設定します。詳細は[**こちらのリンク**](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)をご参照ください。

### 2.6 添付のオンラインプレビュー

送信前のプレビューでアップロードした添付が正しいかを確認できます。送信後のプレビューでは添付をダウンロードする必要がなくなり、ローカルストレージを節約できます。現在、添付のオンラインプレビューは PC・モバイルの双方で、データ送信の前後を問わず対応しています。

プレビューは 3 種類の Office ドキュメント（Excel、Word、PPT）および PDF に対応します。対応する拡張子：

Excel：et、xls、xlt、xlsx、xlsm、xltx、xltm、csv

Word：doc、docx、txt、dot、wps、wpt、dotx、docm、dotm

PPT：ppt、pptx、pptm、pptm、ppsm、pps、potx、potm、dpt、dps

PC でのオンラインプレビュー

モバイルでのオンラインプレビュー

### 2.7 コメントで添付をアップロード

送信済みフォームデータへのコメント時に、PC およびモバイルの双方で添付をアップロードできます。

PC でコメントに添付をアップロード

モバイルでコメントに添付をアップロード

## 3. 添付のオンライン編集

### 3.1 前提条件

注意：この機能はプロフェッショナル版以上の専用機能です。

1）現在、添付編集は 3 種類の Office ドキュメント（Word、PPT、Excel）のみに対応しています。対応する拡張子：

Excel：et、xls、xlt、xlsx、xlsm、xltx、xltm、csv

Word：doc、docx、txt、dot、wps、wpt、dotx、docm、dotm

PPT：ppt、pptx、pptm、pptm、ppsm、pps、potx、potm、dpt、dps

**注意**：上記のタイプに加え、添付のプレビューは PDF にも対応しています。

### 3.2 有効化方法

添付のオンライン編集を利用するには、まず添付コンポーネントの「オンライン編集」スイッチを有効化します。

スイッチの有効化はフォームがオンライン編集に対応することを意味するのみで、データ送信後にアップロードされた添付を編集するには、権限の設定も必要です。

**注意**：権限設定はフォームとワークフローフォームで異なります。以下のパスをご参照ください：

**パス**：ターゲットフォームを開く >> 設定 >> ページ権限 >> 権限グループを追加 >> 添付列で編集可能権限を選択

**パス**：ターゲットワークフローフォームを開く >> 設定 >> ワークフロー設計 >> 承認ノードを設定 >> 現在の承認ノードで承認者のアクション権限を設定 >> 添付列で「編集可能」を選択（この権限を持つ承認者は、承認中に添付をオンライン編集できます）

設定後、フォーム詳細を開いて添付をオンライン編集できます。効果は次のとおりです：

「編集」ボタンをクリックすると、新しい編集ページが開きます。

### 3.3 オンライン編集の仕組み

#### 3.3.1 自動保存

編集ページでは編集のたびに自動保存されます。「Ctrl+S」を押して手動で保存することも可能です。

頻繁な保存は推奨しません。手動保存のたびに新しいバージョンが作成され、システムは保存バージョン数を制限しています（現在は 10 バージョン）。

#### 3.3.2 コラボレーション記録

右上の「コラボレーション記録」をクリックすると、ドキュメントを操作したすべてのユーザーの編集履歴を表示できます。

**注意**：このページの「バージョン履歴」機能はまだ利用できません。

効果は次のとおりです：

## 4. 高度な検証

例：ユーザーに添付をちょうど 2 件アップロードするよう要求します（過不足なし）。

**パス**：複数選択を有効化 >> 最大ファイル数を 2 に設定 >> 検証をクリック >> カスタム関数。以下のコードをカスタム関数ページにコピーします。効果は次のとおりです：

以下のコードをコピーしてご利用ください（数値は必要に応じて調整できますが、最大ファイル数と一致させてください）：

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function validateRule(value) {
  return value.length == 2
}
```

結果は次のようになります：

## 5. FAQ

<AccordionGroup>
  <Accordion id="q1" title="5.1 添付の最小数を設定する方法を教えてください。">
    添付の最小数を設定するには、添付コンポーネントでカスタム検証関数を設定します。

    **パス**：添付コンポーネントをクリック >> 属性パネル >> カスタム検証関数

    以下のコードをコピーしてご利用ください：

    ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
    function validateRule(value) {
      // アップロードされた添付が 2 件未満の場合、検証に失敗します
      return value.length >= 2
    }
    ```
  </Accordion>

  <Accordion id="q2" title="5.2 添付ファイルをエクスポートする方法を教えてください。">
    添付および画像のエクスポートに対応しています。データ管理ページからファイルをダウンロードしてください。
  </Accordion>

  <Accordion id="q3" title="5.3 アップロードした画像を回転できないのはなぜですか。">
    添付コンポーネントを介してアップロードされた画像は回転できません。回転が必要な場合は、画像アップロードコンポーネントを使用して画像データを送信してください。
  </Accordion>

  <Accordion id="q4" title="5.4 添付のオンラインプレビュー URL を取得する方法を教えてください。">
    添付コンポーネントで OnChange アクションを作成してください。取得できるプレビュー URL にはドメインが含まれないため、一行テキストコンポーネントに代入する際は、以下のとおり `https://www.yidaapps.com` を先頭に付加してください：

    コード例：

    ```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
    export function onChange({ value }) {
      console.log('onChange', value);
      this.$('singleLineTextFieldId').setValue("https://www.yidaapps.com"+value[0].imgURL)
    }
    ```
  </Accordion>
</AccordionGroup>

### 5.5 添付プレビューエラー：サーバーエラー、再試行してください！

データ詳細情報ページで添付をプレビューする際に「サーバーエラー、再試行してください！」というエラーが表示される場合は、プレビューを実行するユーザーの DingTalk UserID にアンダースコア「\_」が含まれていないかをご確認ください。UserID は大文字・小文字の英字、0〜9 の数字、ハイフン（-）のみに対応しています。

**UserID の設定パス**：管理者が [DingTalk 管理コンソール](https://oa.dingtalk.io)にログイン >> 左側パネルの \[連絡先] >> \[社内連絡先管理] >> \[ユーザー追加] >> \[社員 UserID] を設定。

**お知らせ：**

* UserID は組織における社員の一意識別子です。一度生成されると変更できません。

* 組織を退職して再入社した後は、組織における以前の記録（勤怠、報告、承認、YiDA フォームデータなど）は閲覧できなくなります。慎重に操作してください。

### 5.6 添付プレビューの条件

* 添付プレビューにはファイルサイズ制限があります。Free プランおよびベーシック版は 20 MB、プロフェッショナル版および専用版は 60 MB 以上です。それを超えるファイルはプレビュー前にデバイスへダウンロードする必要があります。