DIA
discord.js - Imagine an app•7mo ago
CodeSpacePlus

Handling attachments in ModalBuilder

Hello! I was wondering if the Modal builder is able to handle image attachments? I've been trying to use the AttachmentBuilder class but either is not the right approach or I'm missing something. Here's the code for the ModalBuilder 
const modReportModal = new ModalBuilder()
    .setTitle('New Mod Report')
    .setCustomId('modReportModal')
    .setComponents(
        new ActionRowBuilder().setComponents(
          new TextInputBuilder()
            .setLabel('username')
            .setCustomId('usernameField')
            .setStyle(TextInputStyle.Short)
            .setRequired(true)
        ),
        new ActionRowBuilder().setComponents(
          new TextInputBuilder()
            .setLabel('Accusation')
            .setCustomId('accusationField')
            .setStyle(TextInputStyle.Paragraph)
            .setRequired(true)
        ),
        // Here's where I'm trying to add the image attachment field
        new ActionRowBuilder().setComponents(
          new AttachmentBuilder()
            .setFile('C:/')
            .setName('test.jpg')
        )
     );

await interaction.showModal(modReportModal);
const modalSubmit = await interaction.awaitModalSubmit({filter: () => true, time: 1000000});
const message = 'Your report has been posted to the report channel! Thank you!';
modalSubmit.reply({content: message, ephemeral: true});
// build embed message and send to report channel
newModReportSubmission(interaction, modalSubmit);
const modReportModal = new ModalBuilder()
    .setTitle('New Mod Report')
    .setCustomId('modReportModal')
    .setComponents(
        new ActionRowBuilder().setComponents(
          new TextInputBuilder()
            .setLabel('username')
            .setCustomId('usernameField')
            .setStyle(TextInputStyle.Short)
            .setRequired(true)
        ),
        new ActionRowBuilder().setComponents(
          new TextInputBuilder()
            .setLabel('Accusation')
            .setCustomId('accusationField')
            .setStyle(TextInputStyle.Paragraph)
            .setRequired(true)
        ),
        // Here's where I'm trying to add the image attachment field
        new ActionRowBuilder().setComponents(
          new AttachmentBuilder()
            .setFile('C:/')
            .setName('test.jpg')
        )
     );

await interaction.showModal(modReportModal);
const modalSubmit = await interaction.awaitModalSubmit({filter: () => true, time: 1000000});
const message = 'Your report has been posted to the report channel! Thank you!';
modalSubmit.reply({content: message, ephemeral: true});
// build embed message and send to report channel
newModReportSubmission(interaction, modalSubmit);
When trying to run this slash command I get the following error: 
....\node_modules\@discordjs\rest\dist\index.js:730
      throw new DiscordAPIError(data, "code" in data ? data.code : data.error, status, method, url, requestData);
            ^

DiscordAPIError[50035]: Invalid Form Body
data.components[2].components[0][TAG_FIELD_MISSING]: Field "type" is required to determine the model type.
    at handleErrors (...\node_modules\@discordjs\rest\dist\index.js:730:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async BurstHandler.runRequest (...\node_modules\@discordjs\rest\dist\index.js:835:23)
    at async _REST.request (...\node_modules\@discordjs\rest\dist\index.js:1278:22)
    at async ChatInputCommandInteraction.showModal (...\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:256:5)
    at async chatInputCommand (file:///.../src/index.js:566:4) {
  requestBody: {
    files: undefined,
    json: {
      type: 9,
      data: {
        title: 'New Mod Report',
        custom_id: 'modReportModal',
        components: [
          { type: 1, components: [Array] },
          { type: 1, components: [Array] },
          { type: 1, components: [Array] }
        ]
      }
    }
  },
  rawError: {
    message: 'Invalid Form Body',
    code: 50035,
    errors: {
      data: { components: { '2': { components: [Object] } } }
    }
  },
  code: 50035,
  status: 400,
  method: 'POST',
}
....\node_modules\@discordjs\rest\dist\index.js:730
      throw new DiscordAPIError(data, "code" in data ? data.code : data.error, status, method, url, requestData);
            ^

DiscordAPIError[50035]: Invalid Form Body
data.components[2].components[0][TAG_FIELD_MISSING]: Field "type" is required to determine the model type.
    at handleErrors (...\node_modules\@discordjs\rest\dist\index.js:730:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async BurstHandler.runRequest (...\node_modules\@discordjs\rest\dist\index.js:835:23)
    at async _REST.request (...\node_modules\@discordjs\rest\dist\index.js:1278:22)
    at async ChatInputCommandInteraction.showModal (...\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:256:5)
    at async chatInputCommand (file:///.../src/index.js:566:4) {
  requestBody: {
    files: undefined,
    json: {
      type: 9,
      data: {
        title: 'New Mod Report',
        custom_id: 'modReportModal',
        components: [
          { type: 1, components: [Array] },
          { type: 1, components: [Array] },
          { type: 1, components: [Array] }
        ]
      }
    }
  },
  rawError: {
    message: 'Invalid Form Body',
    code: 50035,
    errors: {
      data: { components: { '2': { components: [Object] } } }
    }
  },
  code: 50035,
  status: 400,
  method: 'POST',
}
Unfortunately the AttachmentBuilder class doesn't have any sort of setType method (according to the error message that's what's missing). Is there a way to achieve this in a modal or should I try a different approach? (paste image urls) Node version: 22.2.0 Discord.js version: 14.15.2
3 Replies
d.js toolkit
d.js toolkit•7mo ago
- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - ✅ Marked as resolved by OP
monbrey
monbrey•7mo ago
Modals do not support attachments AttachmentBuilder is for sending attachments, not a component
CodeSpacePlus
CodeSpacePlusOP•7mo ago
Feared as much. Guess I'll have to work on another approach. Thanks for responding!

Did you find this page helpful?