CodeSpacePlus Posts - Answer Overflow

CodeSpacePlus

•Created by CodeSpacePlus on 7/20/2024 in #djs-questions

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

5 replies

Gaming

Programming