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

# Attachment

> Learn how to configure and use the YiDA Attachment component, including upload types, button content and style, multiselect and file-count limits, supported file formats, and online preview and editing. This guide is intended for users who want to optimize their workflows with this component.

## 1. Use Cases

Use the Attachment component to upload file content such as certificates, materials, data, and contracts.

Each attachment in YiDA is currently limited to 100 MB.

<Note>
  For component attributes, usage, and examples, see [**Interface**](/open/yida/components/interface).
</Note>

## 2. Basic Features

### 2.1 Upload Type

Feature: Set how attachments are uploaded.

**Path:** Attribute >> Upload detail settings >> Upload type

Two upload types are available: click and drag-and-drop.

**Click** (when set to click, click Upload File to upload attachments directly)

**Drag-and-drop** (when set to drag-and-drop, drag files into the dashed box to upload):

### 2.2 Button Content

Feature: Set the text of the upload button.

**Path**: Attribute >> Upload detail settings >> Button content (this option appears only when the upload type is set to click)

The effect is as follows:

The button content defaults to Upload File. You can customize the button text to fit your needs.

The effect is as follows:

### 2.3 Button Type

Three button types are available: primary, second (secondary), and normal.

primary: the button has a blue background with white text.

The effect is as follows:

second (secondary): the button has a blue border and blue text. The effect is as follows:

normal: the button has a gray border and gray text. The effect is as follows:

### 2.4 Multiselect and Maximum Number of Files

#### 2.4.1 Multiselect

Feature: When Multiselect is on, users can upload multiple attachments at once.

**Path**: Attribute >> Upload detail settings >> Multiselect

**Note**: With Multiselect on, users can select multiple files when uploading. The number of files they can select depends on the value set in "Maximum number of files."

#### 2.4.2 Maximum Number of Files

Feature: Set the maximum number of attachments that can be uploaded.

**Path**: Attribute >> Upload detail settings >> Maximum number of files

When the maximum number of files is set to 4, the effect is as follows:

### 2.5 Upload File Type

Feature: Set the file formats allowed for upload.

<Note>
  File extensions support only digits and English letters.
</Note>

**Path:** Attribute >> Upload detail settings >> Upload file type

Example: If the upload file type is set to PDF, only PDF files can be uploaded. The effect is as follows:

After this setting, other file types cannot be uploaded on the upload page. As shown below, files in other image formats are grayed out and cannot be selected. Only PDF files can be selected and uploaded.

This property sets the accept attribute for file uploads, which restricts allowed file types. For details, see the [**MDN documentation**](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept).

### 2.6 Online Attachment Preview

Previewing before submission lets you verify that the uploaded attachments are correct. Previewing after submission reduces the need to download attachments and saves local storage. Online attachment preview is now supported on both PC and mobile, before and after data submission.

Preview supports three types of Office documents—Excel, Word, and PPT—as well as PDF. Supported extensions:

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

Online preview on PC

Online preview on mobile

### 2.7 Upload Attachments in Comments

When commenting on submitted form data, you can upload attachments on both PC and mobile.

Upload attachments in comments on PC

Upload attachments in comments on mobile

## 3. Online Attachment Editing

### 3.1 Prerequisites

Note: This feature is exclusive to the Professional edition and above.

1. Attachment editing currently supports three types of Office documents: Word, PPT, and Excel. Supported extensions:

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

**Note**: In addition to the types above, attachment preview also supports PDF.

### 3.2 How to Enable

To use online attachment editing, first turn on the "Online editing" switch on the Attachment component.

Turning on this switch only means the form supports online editing. To edit uploaded attachments after data submission, you also need to configure permissions.

**Note**: Permission configuration differs between forms and workflow forms. Refer to the following paths:

**Path**: Open the target form >> Settings >> Page permissions >> Add permission group >> Select the editable permission in the Attachment column

**Path**: Open the target workflow form >> Settings >> Workflow design >> Set up the approval node >> Configure the action permissions of the approver at the current approval node >> Select "Editable" in the Attachment column (approvers with this permission can edit attachments online during approval)

After configuration, open the form details to edit attachments online. The effect is as follows:

Click the "Edit" button to open a new editing page.

### 3.3 How Online Editing Works

#### 3.3.1 Auto-Save

The editing page saves automatically after each edit. You can also press "Ctrl+S" to save manually.

Frequent saving is not recommended. Each manual save creates a new version, and the system limits saved versions to 10.

#### 3.3.2 Collaboration Records

Click "Collaboration records" in the upper-right corner to view the edit history of every user who has worked on the document.

**Note**: The "Version history" feature on this page is not yet available.

The effect is as follows:

## 4. Advanced Validation

Example scenario: Require users to upload exactly 2 attachments—no more, no fewer.

**Path**: Turn on Multiselect >> Set the maximum number of files to 2 >> Click Validation >> Custom function. Copy the following code into the custom function page. The effect is as follows:

Copy and reuse the following code (adjust the number as needed, but keep it in sync with the maximum number of files):

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

The result looks like this:

## 5. FAQ

<AccordionGroup>
  <Accordion id="q1" title="5.1 How do I set a minimum number of attachments?">
    To set a minimum number of attachments, configure a custom validation function on the Attachment component.

    **Path**: Click the Attachment component >> Attribute panel >> Custom validation function

    Copy and reuse the following code:

    ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
    function validateRule(value) {
      // Validation fails if fewer than 2 attachments are uploaded
      return value.length >= 2
    }
    ```
  </Accordion>

  <Accordion id="q2" title="5.2 How do I export attachment files?">
    Exporting attachments and images is supported. Download the files from the data management page.
  </Accordion>

  <Accordion id="q3" title="5.3 Why can't uploaded images be rotated?">
    Images uploaded through the Attachment component cannot be rotated. If you need rotation, use the Image Upload component to submit image data.
  </Accordion>

  <Accordion id="q4" title="5.4 How do I get the online preview URL of an attachment?">
    Create an OnChange action on the Attachment component. The preview URL does not include a domain, so when assigning it to a Single-line text component, prepend "[https://www.yidaapps.com](https://www.yidaapps.com)" as shown below:

    Code example:

    ```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 Attachment Preview Error: Server Error, Try Again!

If the error "Server error, try again!" appears when previewing an attachment on the Source records page, check whether the DingTalk UserID of the user performing the preview contains an underscore "\_". UserID supports only uppercase and lowercase letters, digits 0-9, and hyphens (-).

**Path to set UserID**: Admin signs in to the [DingTalk Admin Console](https://oa.dingtalk.io) >> \[Contacts] in the left panel >> \[Internal Contacts Management] >> \[Add User] >> Set \[Employee UserID].

**Tips:**

* UserID is the unique identifier of an employee in the organization. Once generated, it cannot be changed.

* After leaving and rejoining the organization, previous records—such as attendance, reports, approvals, and YiDA form data—can no longer be viewed. Proceed with caution.

### 5.6 Conditions for Attachment Preview

* Attachment preview has file size limits: 20 MB for the Free plan and Basic edition, and 60 MB or more for the Professional and Dedicated editions. Larger files must be downloaded to your device before previewing.