Skip to content

Commit c20b256

Browse files
anthonydiscordLulalabyadvaith1
authored
Modal File Upload (#7887)
* file uploads! * Update reference.mdx * Small tweaks * Added changelog * Update wording * Fix tables * Update docs/components/reference.mdx Co-authored-by: Lala Sabathil <[email protected]> * Fix id * Fix resolved * Update docs/components/reference.mdx Co-authored-by: advaith <[email protected]> * Sorry lol --------- Co-authored-by: Lala Sabathil <[email protected]> Co-authored-by: advaith <[email protected]>
1 parent 9efaf06 commit c20b256

File tree

4 files changed

+131
-1
lines changed

4 files changed

+131
-1
lines changed

‎docs/change-log/2025-10-15-modal-file-upload.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: "Adding More Modal Components!"
3+
date: "2025-10-15"
4+
topics:
5+
- "Interactions"
6+
- "Components"
7+
---
8+
9+
Have you ever wanted to collect more than text from a user through a modal? With the new [**File Upload**](/docs/components/reference#file-upload) component you can! You can specify a min and max number of files accepted between 0 and 10, and if uploading files within that limit is required before submitting. Any file types are accepted, and the max file size is based on the user's upload limit in that channel.
10+
11+
#### The New Component:
12+
13+
- [**File Upload**](/docs/components/reference#file-upload)
14+
15+
#### Developer Resources
16+
17+
- [Using Modal Components](/docs/components/using-modal-components) - Dive into creating a modal
18+
- Check out our [Component Reference](/docs/components/reference) for details on all available components.

‎docs/components/reference.mdx‎

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ The following is a complete table of available components. Details about each co
5555
| 14 | [Separator](/docs/components/reference#separator) | Component to add vertical padding between other components | Layout | Message |
5656
| 17 | [Container](/docs/components/reference#container) | Container that visually groups a set of components | Layout | Message |
5757
| 18 | [Label](/docs/components/reference#label) | Container associating a label and description with a component | Layout | Modal |
58+
| 19 | [File Upload](/docs/components/reference#file-upload) | Component for uploading files | Interactive | Modal |
5859

5960
--------------
6061
## Anatomy of a Component
@@ -1998,6 +1999,7 @@ The `description` may display above or below the `component` depending on the pl
19981999
| [Role Select](/docs/components/reference#role-select) |
19992000
| [Mentionable Select](/docs/components/reference#mentionable-select) |
20002001
| [Channel Select](/docs/components/reference#channel-select) |
2002+
| [File Upload](/docs/components/reference#file-upload) |
20012003

20022004
###### Label Interaction Response Structure
20032005

@@ -2017,6 +2019,7 @@ The `description` may display above or below the `component` depending on the pl
20172019
| [Role Select](/docs/components/reference#role-select-role-select-interaction-response-structure) |
20182020
| [Mentionable Select](/docs/components/reference#mentionable-select-mentionable-select-interaction-response-structure) |
20192021
| [Channel Select](/docs/components/reference#channel-select-channel-select-interaction-response-structure) |
2022+
| [File Upload](/docs/components/reference#file-upload-file-upload-interaction-response-structure) |
20202023

20212024
###### Examples
20222025

@@ -2053,7 +2056,115 @@ The `description` may display above or below the `component` depending on the pl
20532056
```
20542057
</Collapsible>
20552058

2056-
--------------------------------
2059+
--------------
2060+
## File Upload
2061+
2062+
File Upload is an interactive component that allows users to upload files in modals. File Uploads can be configured to have a minimum and maximum number of files between 0 and 10, along with `required` for if the upload is required to submit the modal. The max file size a user can upload is based on the user's upload limit in that channel.
2063+
2064+
File Uploads are available on modals. They must be placed inside a [Label](/docs/components/reference#label).
2065+
2066+
###### File Upload Structure
2067+
2068+
| Field | Type | Description |
2069+
|-------------|---------|--------------------------------------------------------------------------------------------------------|
2070+
| type | integer | `19` for file upload |
2071+
| id? | integer | Optional identifier for component |
2072+
| custom_id | string | ID for the file upload; max 100 characters |
2073+
| min_values? | integer | Minimum number of items that must be uploaded (defaults to 1); min 0, max 10 |
2074+
| max_values? | integer | Maximum number of items that can be uploaded (defaults to 1); max 10 |
2075+
| required? | boolean | Whether the file upload requires files to be uploaded before submitting the modal (defaults to `true`) |
2076+
2077+
###### File Upload Interaction Response Structure
2078+
2079+
| Field | Type | Description |
2080+
|-----------|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
2081+
| type | integer | `19` for a File Upload |
2082+
| id | integer | Unique identifier for the component |
2083+
| custom_id | string | Developer-defined identifier for the input; max 100 characters |
2084+
| values | array of snowflakes | IDs of the uploaded files found in the [resolved data](/docs/interactions/receiving-and-responding#interaction-object-resolved-data-structure) |
2085+
2086+
###### Examples
2087+
2088+
<Collapsible title="Modal Example" description="Modal create payload with a File Upload component" icon="code">
2089+
2090+
<Collapsible title="Rendered Example" description="Visualization of the message created by the payload below" icon="image" nested={true}>
2091+
![Example of a modal with a File Upload](images/components/file-upload-modal-example.webp)
2092+
</Collapsible>
2093+
2094+
```json
2095+
{
2096+
"type": 9,
2097+
"data": {
2098+
"custom_id": "bug_submit_modal",
2099+
"title": "Bug Submission",
2100+
"components": [
2101+
{
2102+
"type": 18, // ComponentType.LABEL
2103+
"label": "File Upload",
2104+
"description": "Please upload a screenshot or other image that shows the bug you encountered.",
2105+
"component": {
2106+
"type": 19, // ComponentType.FILE_UPLOAD
2107+
"custom_id": "file_upload",
2108+
"min_values": 1,
2109+
"max_values": 10,
2110+
"required": true
2111+
}
2112+
}
2113+
]
2114+
}
2115+
}
2116+
```
2117+
</Collapsible>
2118+
2119+
<Collapsible title="Modal Submit Interaction Data Example" description="When a user submits a modal containing a File Upload" icon="code">
2120+
2121+
When a user submits a modal that contains a File Upload, this is the basic form of the interaction data payload you will receive. The full payload
2122+
is available in the [interaction](/docs/interactions/receiving-and-responding#interaction-object-interaction-structure) reference.
2123+
2124+
```json
2125+
{
2126+
"type": 5, // InteractionType.MODAL_SUBMIT
2127+
...additionalInteractionFields, // See the Interaction documentation for all fields
2128+
2129+
"data": {
2130+
"components": [
2131+
{
2132+
"component": {
2133+
"custom_id": "file_upload",
2134+
"id": 2,
2135+
"type": 19,
2136+
"values": [
2137+
"111111111111111111111"
2138+
]
2139+
},
2140+
"id": 1,
2141+
"type": 18
2142+
}
2143+
],
2144+
"custom_id": "bug_submit_modal",
2145+
"resolved": {
2146+
"attachments": {
2147+
"111111111111111111111": {
2148+
"content_type": "image/png",
2149+
"ephemeral": true,
2150+
"filename": "bug.png",
2151+
"height": 604,
2152+
"id": "111111111111111111111",
2153+
"placeholder": "/PcBAoBQydvKesabEIoMsdg=",
2154+
"placeholder_version": 1,
2155+
"proxy_url": "https://media.discordapp.net/ephemeral-attachments/2222222222222222222/111111111111111111111/bug.png?ex=68dc7ce1&is=68db2b61&hm=5954f90117ccf8716ffa6c7f97a778a0d039810c9584045f400d8a9fff590768&",
2156+
"size": 241394,
2157+
"url": "https://cdn.discordapp.com/ephemeral-attachments/2222222222222222222/111111111111111111111/bug.png?ex=68dc7ce1&is=68db2b61&hm=5954f90117ccf8716ffa6c7f97a778a0d039810c9584045f400d8a9fff590768&",
2158+
"width": 2482
2159+
}
2160+
}
2161+
}
2162+
}
2163+
}
2164+
```
2165+
</Collapsible>
2166+
2167+
----------------------
20572168
## Unfurled Media Item
20582169

20592170
An Unfurled Media Item is a piece of media, represented by a URL, that is used within a component. It can be

‎docs/interactions/receiving-and-responding.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ Sent in `APPLICATION_COMMAND` and `APPLICATION_COMMAND_AUTOCOMPLETE` interaction
145145
| [Channel Select](/docs/components/reference#channel-select-channel-select-interaction-response-structure) |
146146
| [Text Display](/docs/components/reference#text-display-text-display-interaction-response-structure) |
147147
| [Label](/docs/components/reference#label-label-interaction-response-structure) |
148+
| [File Upload](/docs/components/reference#file-upload-file-upload-interaction-response-structure) |
148149

149150
###### Resolved Data Structure
150151

‎static/images/components/file-upload-modal-example.webp‎

21.5 KB
Loading

0 commit comments

Comments
 (0)