feat(components): File upload component for modals (#4468)

* feat(components): File upload component for modals

* Update comments

upstream has been merged into the file uploads pr

* reverse transform, comment typo fix

packages/bot/src/transformers/component.ts

@@ -3,6 +3,8 @@ import {
   type DiscordButtonComponent,
   type DiscordContainerComponent,
   type DiscordFileComponent,
+  type DiscordFileUploadComponent,
+  type DiscordFileUploadInteractionResponse,
   type DiscordLabelComponent,
   type DiscordLabelInteractionResponse,
   type DiscordMediaGalleryComponent,
@@ -69,6 +71,9 @@ export function transformComponent(bot: Bot, payload: DiscordMessageComponent |
     case MessageComponentTypes.Label:
       component = transformLabelComponent(bot, payload)
       break
+    case MessageComponentTypes.FileUpload:
+      component = transformFileUploadComponent(bot, payload)
+      break
   }
 
   return bot.transformers.customizers.component(bot, payload, component)
@@ -294,3 +299,23 @@ function transformLabelComponent(bot: Bot, payload: DiscordLabelComponent | Disc
 
   return label
 }
+
+function transformFileUploadComponent(bot: Bot, payload: DiscordFileUploadComponent | DiscordFileUploadInteractionResponse): Component {
+  const props = bot.transformers.desiredProperties.component
+  const fileUpload = {} as Component
+
+  if (props.type && payload.type) fileUpload.type = payload.type
+  if (props.id && payload.id) fileUpload.id = payload.id
+  if (props.customId && payload.custom_id) fileUpload.customId = payload.custom_id
+
+  // Check that this is a response
+  if ('values' in payload) {
+    if (props.values && payload.values) fileUpload.values = payload.values
+  } else {
+    if (props.minValues && payload.min_values) fileUpload.minValues = payload.min_values
+    if (props.maxValues && payload.max_values) fileUpload.maxValues = payload.max_values
+    if (props.required && payload.required) fileUpload.required = payload.required
+  }
+
+  return fileUpload
+}

packages/bot/src/transformers/reverse/component.ts

@@ -4,6 +4,7 @@ import {
   type DiscordButtonComponent,
   type DiscordContainerComponent,
   type DiscordFileComponent,
+  type DiscordFileUploadComponent,
   type DiscordLabelComponent,
   type DiscordMediaGalleryComponent,
   type DiscordMediaGalleryItem,
@@ -53,6 +54,8 @@ export function transformComponentToDiscordComponent(
       return transformThumbnailComponent(bot, payload)
     case MessageComponentTypes.Label:
       return transformLabelComponent(bot, payload)
+    case MessageComponentTypes.FileUpload:
+      return transformFileUploadComponent(bot, payload)
     case MessageComponentTypes.Separator:
     case MessageComponentTypes.TextDisplay:
       // As of now they are compatible
@@ -223,3 +226,14 @@ function transformLabelComponent(bot: Bot, payload: Component): DiscordLabelComp
     component: bot.transformers.reverse.component(bot, payload.component!) as DiscordLabelComponent['component'],
   }
 }
+
+function transformFileUploadComponent(bot: Bot, payload: Component): DiscordFileUploadComponent {
+  return {
+    type: MessageComponentTypes.FileUpload,
+    id: payload.id,
+    custom_id: payload.customId!,
+    max_values: payload.maxValues,
+    min_values: payload.minValues,
+    required: payload.required,
+  }
+}