feat: file upload component

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .DS_Store
-.turbo
+.turbo
+apps/docs

.prettierignore

@@ -8,6 +8,7 @@ node_modules
 **/devtools/ui
 dist
 build
+.next
 .commandkit
 
 .DS_Store

apps/test-bot/src/app/commands/(interactions)/prompt.tsx

@@ -9,6 +9,7 @@ import {
   ChatInputCommandContext,
   StringSelectMenu,
   StringSelectMenuOption,
+  FileUpload,
 } from 'commandkit';
 import { ComponentType, MessageFlags } from 'discord.js';
 
@@ -42,6 +43,9 @@ export async function chatInput(ctx: ChatInputCommandContext) {
           placeholder="Lorem ipsum dolor sit amet..."
         />
       </Label>
+      <Label label="File" description="Upload a file">
+        <FileUpload customId="file" />
+      </Label>
       <Label label="Select" description="Select an option">
         <StringSelectMenu customId="select">
           <StringSelectMenuOption

apps/website/docs/api-reference/commandkit/classes/app-events-handler.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## AppEventsHandler
 
-<GenerationInfo sourceFile="packages/commandkit/src/app/handlers/AppEventsHandler.ts" sourceLine="45" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/app/handlers/AppEventsHandler.ts" sourceLine="46" packageName="commandkit" />
 
 Handles Discord.js events and CommandKit custom events with support for namespacing and middleware.
 

apps/website/docs/api-reference/commandkit/functions/file-upload.mdx

@@ -0,0 +1,36 @@
+---
+title: "FileUpload"
+isDefaultIndex: false
+generated: true
+---
+
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+<!-- This file was generated from the CommandKit source. Do not modify. Instead, re-run the "docgen" script -->
+
+
+## FileUpload
+
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="173" packageName="commandkit" />
+
+The file upload component.
+
+
+
+*Example*
+
+```ts
+<FileUpload customId="file" />
+```
+
+```ts title="Signature"
+function FileUpload(props: FileUploadProps): FileUploadBuilder
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`<a href='/docs/api-reference/commandkit/interfaces/file-upload-props#fileuploadprops'>FileUploadProps</a>`} />
+

apps/website/docs/api-reference/commandkit/functions/modal.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## Modal
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="32" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="38" packageName="commandkit" />
 
 The modal component.
 

apps/website/docs/api-reference/commandkit/functions/paragraph-input.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ParagraphInput
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="149" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="155" packageName="commandkit" />
 
 The paragraph text input component.
 

apps/website/docs/api-reference/commandkit/functions/short-input.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ShortInput
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="137" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="143" packageName="commandkit" />
 
 The short text input component.
 

apps/website/docs/api-reference/commandkit/functions/text-input.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## TextInput
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="89" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="95" packageName="commandkit" />
 
 The text input component.
 

apps/website/docs/api-reference/commandkit/interfaces/app-events-handler-loaded-data.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## AppEventsHandlerLoadedData
 
-<GenerationInfo sourceFile="packages/commandkit/src/app/handlers/AppEventsHandler.ts" sourceLine="34" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/app/handlers/AppEventsHandler.ts" sourceLine="35" packageName="commandkit" />
 
 Data structure representing loaded event information for external consumption.
 

apps/website/docs/api-reference/commandkit/interfaces/file-upload-props.mdx

@@ -0,0 +1,44 @@
+---
+title: "FileUploadProps"
+isDefaultIndex: false
+generated: true
+---
+
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+<!-- This file was generated from the CommandKit source. Do not modify. Instead, re-run the "docgen" script -->
+
+
+## FileUploadProps
+
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="161" packageName="commandkit" />
+
+
+
+```ts title="Signature"
+interface FileUploadProps extends Omit<FileUploadComponentData, 'type' | 'required'> {
+    id?: number;
+    required?: boolean;
+}
+```
+* Extends: <code>Omit&#60;FileUploadComponentData, 'type' | 'required'&#62;</code>
+
+
+
+<div className="members-wrapper">
+
+### id
+
+<MemberInfo kind="property" type={`number`}   />
+
+
+### required
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
+
+
+</div>

apps/website/docs/api-reference/commandkit/interfaces/loaded-event.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## LoadedEvent
 
-<GenerationInfo sourceFile="packages/commandkit/src/app/handlers/AppEventsHandler.ts" sourceLine="22" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/app/handlers/AppEventsHandler.ts" sourceLine="23" packageName="commandkit" />
 
 Represents a loaded event with all its listeners.
 

apps/website/docs/api-reference/commandkit/interfaces/modal-props.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ModalProps
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="16" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="22" packageName="commandkit" />
 
 The properties for the modal component.
 

apps/website/docs/api-reference/commandkit/interfaces/text-input-props.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## TextInputProps
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="70" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="76" packageName="commandkit" />
 
 
 

apps/website/docs/api-reference/commandkit/types/event-listener.mdx

@@ -21,6 +21,7 @@ Represents an event listener with its configuration.
 type EventListener = {
     handler: ListenerFunction;
     once: boolean;
+    parallel: boolean;
 }
 ```
 
@@ -36,6 +37,11 @@ type EventListener = {
 <MemberInfo kind="property" type={`boolean`}   />
 
 
+### parallel
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
 
 
 </div>

examples/basic-js/package.json

@@ -16,6 +16,6 @@
   },
   "dependencies": {
     "commandkit": "^1.2.0-rc.12",
-    "discord.js": "^14.23.2"
+    "discord.js": "^14.24.0"
   }
 }

examples/basic-ts/package.json

@@ -16,6 +16,6 @@
   },
   "dependencies": {
     "commandkit": "^1.2.0-rc.12",
-    "discord.js": "^14.23.2"
+    "discord.js": "^14.24.0"
   }
 }

examples/deno-ts/package.json

@@ -16,6 +16,6 @@
   },
   "dependencies": {
     "commandkit": "^1.2.0-rc.12",
-    "discord.js": "^14.23.2"
+    "discord.js": "^14.24.0"
   }
 }

examples/with-ai/package.json

@@ -15,7 +15,7 @@
     "@commandkit/tasks": "^1.2.0-rc.12",
     "@types/ms": "^2.1.0",
     "commandkit": "^1.2.0-rc.12",
-    "discord.js": "^14.23.2",
+    "discord.js": "^14.24.0",
     "ms": "^2.1.3",
     "weather-js": "^2.0.0"
   },

examples/with-leveling-system/package.json

@@ -27,7 +27,7 @@
     "@umami/node": "^0.4.0",
     "canvacord": "^6.0.2",
     "commandkit": "^1.2.0-rc.12",
-    "discord.js": "^14.23.2",
+    "discord.js": "^14.24.0",
     "murmurhash": "^2.0.1",
     "prisma": "^6.8.2",
     "sharp": "^0.34.2"

examples/without-cli/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "commandkit": "^1.2.0-rc.12",
-    "discord.js": "^14.23.2"
+    "discord.js": "^14.24.0"
   },
   "devDependencies": {
     "@types/node": "^24.3.3",

package.json

@@ -68,7 +68,8 @@
       "devalue@<5.3.2": ">=5.3.2",
       "vite@>=7.0.0 <=7.0.6": ">=7.0.7",
       "vite@>=7.1.0 <=7.1.4": ">=7.1.5",
-      "axios@<1.12.0": ">=1.12.0"
+      "axios@<1.12.0": ">=1.12.0",
+      "vite@>=7.0.0 <=7.0.7": ">=7.0.8"
     },
     "onlyBuiltDependencies": [
       "@swc/core",

packages/commandkit/src/components/interactive/modal/Modal.ts

@@ -1,4 +1,9 @@
-import { TextInputBuilder, TextInputStyle } from 'discord.js';
+import {
+  TextInputBuilder,
+  TextInputStyle,
+  FileUploadComponentData,
+  FileUploadBuilder,
+} from 'discord.js';
 import { MaybeArray } from '../../common/types';
 import { CommandKitElement } from '../../common/element';
 import {
@@ -9,6 +14,7 @@ import {
 } from './ModalKit';
 import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 import { warnDeprecated } from '../../../utils/warning';
+import { applyId } from '../../display/common';
 
 /**
  * The properties for the modal component.
@@ -151,3 +157,39 @@ export function ParagraphInput(
 ): CommandKitElement<'text-input'> {
   return TextInput({ ...props, style: TextInputStyle.Paragraph });
 }
+
+export interface FileUploadProps
+  extends Omit<FileUploadComponentData, 'type' | 'required'> {
+  id?: number;
+  required?: boolean;
+}
+
+/**
+ * The file upload component.
+ * @param props The file upload properties.
+ * @returns The commandkit element.
+ * @example <FileUpload customId="file" />
+ */
+export function FileUpload(props: FileUploadProps): FileUploadBuilder {
+  const file = new FileUploadBuilder();
+
+  applyId(props, file);
+
+  if (props.maxValues != null) {
+    file.setMaxValues(props.maxValues);
+  }
+
+  if (props.minValues != null) {
+    file.setMinValues(props.minValues);
+  }
+
+  if (props.customId != null) {
+    file.setCustomId(props.customId);
+  }
+
+  if (props.required != null) {
+    file.setRequired(props.required);
+  }
+
+  return file;
+}