discord.js - Imagine an app•7mo ago

MediaGalleryBuilder() error.

I've been encountering this error in which I pass the attachment://file.png in the MediaGalleryBuilder().media.url and send the AttachmentBuilder() in the files array, but it still outputs the error of it not encountering the file sent. As of now, the code is quite unpolished and really scraped on for "testing purposes", but it should work just fine; but, it doesn't.

if(message.content.startsWith('abrirTest')) {
    const [command, title, minPlyrs, maxPlyrs, code, roleId] = message.content?.includes(' ')
        ? message.content?.split(' ')
        : [null, null, null, null, null, null];

    const startUpAttachment = new AttachmentBuilder(path.join(__dirname, '..', 'assets', 'votación.png'), { name: 'votación.png' });

    const component = new StartUpEmbed()
        .addAuthor(String(message.member.tag))
        .setActualVotes(Number(maxPlyrs))
        .setMinVotes(Number(minPlyrs))
        .setColor(String('0x80a6d2'))
        .setServerInfo(String(code))
        .setTitle(String(title))
        .setMentionableId(String(roleId))
        .setAttachmentString('attachment://votación.png')

    console.log(startUpAttachment);
    return message.channel.send({
        components: [ component.getComponent('attachment://votación.png') ],
        flags: [
            MessageFlags.IsComponentsV2,
            MessageFlags.SuppressEmbeds
        ],
        files: [ startUpAttachment ]
    })
}

if(message.content.startsWith('abrirTest')) {
    const [command, title, minPlyrs, maxPlyrs, code, roleId] = message.content?.includes(' ')
        ? message.content?.split(' ')
        : [null, null, null, null, null, null];

    const startUpAttachment = new AttachmentBuilder(path.join(__dirname, '..', 'assets', 'votación.png'), { name: 'votación.png' });

    const component = new StartUpEmbed()
        .addAuthor(String(message.member.tag))
        .setActualVotes(Number(maxPlyrs))
        .setMinVotes(Number(minPlyrs))
        .setColor(String('0x80a6d2'))
        .setServerInfo(String(code))
        .setTitle(String(title))
        .setMentionableId(String(roleId))
        .setAttachmentString('attachment://votación.png')

    console.log(startUpAttachment);
    return message.channel.send({
        components: [ component.getComponent('attachment://votación.png') ],
        flags: [
            MessageFlags.IsComponentsV2,
            MessageFlags.SuppressEmbeds
        ],
        files: [ startUpAttachment ]
    })
}

33 Replies

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!

GaryOP•7mo ago

And this is the class getComponent() method:

getComponent(attachmentUrl) {

        const text1 = new TextDisplayBuilder()
            .setContent([
                `# ${this.content.title}`,
                `### <@&${this.content.mentionableRole}>${this.content.placeholderText}`,
                `>>> ` + 
                `┊:checklist:・**Mínimo ${String(this.content.minVotes)} votos.**\n`,
                `┊:checklist:・**Código del servidor: \`${this.content.serverCode}\`**\n`,
                `┊:checklist:・**Únete al servidor diréctamente [__presionando aquí__](https://policeroleplay.community/join/${this.content.serverCode}).**\n`,
                '┊:checklist:・**Reaccionar sin entrar al servidor resultará en una __sanción__.**\n',
                '┊:checklist:・[**Reglas del Servidor**](https://normativa-portland-spanish-rp.gitbook.io/normativa-portland-spanish-rp/)'
            ].join('\n'));

        const voteBtn = new ButtonBuilder()
            .setLabel(`${this.content.currVotes} / ${this.content.minVotes} Votos.`)
            .setStyle(ButtonStyle.Secondary)
            .setEmoji('✨')
            .setCustomId('vote_open_server');
        
        const section2 = new SectionBuilder()
            .addTextDisplayComponents(text1)
            .setButtonAccessory(voteBtn);
        
        this.container.addSectionComponents(section2);

        this.container.addMediaGalleryComponents(
            new MediaGalleryBuilder()
                .addItems([
                    {
                        media: {
                            url: attachmentUrl,
    
                        }
                    }
                ])
        )

        this.container.addSeparatorComponents(separator => separator.setSpacing(SeparatorSpacingSize.Large).setDivider(true));

        const voteButton = new ButtonBuilder()
            .setLabel('Presiona acá para votar!')
            .setEmoji('✨')
            .setStyle(ButtonStyle.Success)
            .setCustomId('vote_open_serverrrrr');

        
        const actionRow = new ActionRowBuilder().addComponents(voteButton);

        this.container.addActionRowComponents(actionRow);

        this.container.addTextDisplayComponents(
            new TextDisplayBuilder()
                .setContent(
                    "-# © Todos los derechos reservados, Portland Roleplay"
                )
        )

        console.log(JSON.stringify(this.container.toJSON(), null, 2));
        return this.container;
    }

getComponent(attachmentUrl) {

        const text1 = new TextDisplayBuilder()
            .setContent([
                `# ${this.content.title}`,
                `### <@&${this.content.mentionableRole}>${this.content.placeholderText}`,
                `>>> ` + 
                `┊:checklist:・**Mínimo ${String(this.content.minVotes)} votos.**\n`,
                `┊:checklist:・**Código del servidor: \`${this.content.serverCode}\`**\n`,
                `┊:checklist:・**Únete al servidor diréctamente [__presionando aquí__](https://policeroleplay.community/join/${this.content.serverCode}).**\n`,
                '┊:checklist:・**Reaccionar sin entrar al servidor resultará en una __sanción__.**\n',
                '┊:checklist:・[**Reglas del Servidor**](https://normativa-portland-spanish-rp.gitbook.io/normativa-portland-spanish-rp/)'
            ].join('\n'));

        const voteBtn = new ButtonBuilder()
            .setLabel(`${this.content.currVotes} / ${this.content.minVotes} Votos.`)
            .setStyle(ButtonStyle.Secondary)
            .setEmoji('✨')
            .setCustomId('vote_open_server');
        
        const section2 = new SectionBuilder()
            .addTextDisplayComponents(text1)
            .setButtonAccessory(voteBtn);
        
        this.container.addSectionComponents(section2);

        this.container.addMediaGalleryComponents(
            new MediaGalleryBuilder()
                .addItems([
                    {
                        media: {
                            url: attachmentUrl,
    
                        }
                    }
                ])
        )

        this.container.addSeparatorComponents(separator => separator.setSpacing(SeparatorSpacingSize.Large).setDivider(true));

        const voteButton = new ButtonBuilder()
            .setLabel('Presiona acá para votar!')
            .setEmoji('✨')
            .setStyle(ButtonStyle.Success)
            .setCustomId('vote_open_serverrrrr');

        
        const actionRow = new ActionRowBuilder().addComponents(voteButton);

        this.container.addActionRowComponents(actionRow);

        this.container.addTextDisplayComponents(
            new TextDisplayBuilder()
                .setContent(
                    "-# © Todos los derechos reservados, Portland Roleplay"
                )
        )

        console.log(JSON.stringify(this.container.toJSON(), null, 2));
        return this.container;
    }

As I said, the code its pretty raw as of now, but the methods should output no error at all. This is the AttachmentBuilder's console.log().

AttachmentBuilder {
  attachment: 'C:\\Users\\AMD\\Desktop\\portland\\assets\\votación.png',
  name: 'votación.png',
  description: undefined
}

AttachmentBuilder {
  attachment: 'C:\\Users\\AMD\\Desktop\\portland\\assets\\votación.png',
  name: 'votación.png',
  description: undefined
}

And this is the error I've been getting:

Uncaught exception: DiscordAPIError[50035]: Invalid Form Body
components[0].components[1].items[0].media.url[UNFURLED_MEDIA_ITEM_REFERENCED_ATTACHMENT_NOT_FOUND]: The referenced attachment ("attachment://votación.png") was not found
    at handleErrors (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:748:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SequentialHandler.runRequest (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:1149:23)
    at async SequentialHandler.queueRequest (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:980:14)
    at async _REST.request (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:1293:22)
    at async TextChannel.send (C:\Users\AMD\Desktop\portland\node_modules\discord.js\src\structures\interfaces\TextBasedChannel.js:195:15) {
  requestBody: {
    files: [ [Object] ],
    json: {
      content: undefined,
      tts: false,
      nonce: undefined,
      enforce_nonce: false,
      embeds: undefined,
      components: [Array],
      username: undefined,
      avatar_url: undefined,
      allowed_mentions: undefined,
      flags: 32772,
      message_reference: undefined,
      attachments: [Array],
      sticker_ids: undefined,
      thread_name: undefined,
      applied_tags: undefined,
      poll: undefined
    }
  },
  rawError: {
    message: 'Invalid Form Body',
    code: 50035,
    errors: { components: [Object] }
  },
  code: 50035,
  status: 400,
  method: 'POST',
  url: 'https://discord.com/api/v10/channels/1302354912235229307/messages'
}

Uncaught exception: DiscordAPIError[50035]: Invalid Form Body
components[0].components[1].items[0].media.url[UNFURLED_MEDIA_ITEM_REFERENCED_ATTACHMENT_NOT_FOUND]: The referenced attachment ("attachment://votación.png") was not found
    at handleErrors (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:748:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SequentialHandler.runRequest (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:1149:23)
    at async SequentialHandler.queueRequest (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:980:14)
    at async _REST.request (C:\Users\AMD\Desktop\portland\node_modules\@discordjs\rest\dist\index.js:1293:22)
    at async TextChannel.send (C:\Users\AMD\Desktop\portland\node_modules\discord.js\src\structures\interfaces\TextBasedChannel.js:195:15) {
  requestBody: {
    files: [ [Object] ],
    json: {
      content: undefined,
      tts: false,
      nonce: undefined,
      enforce_nonce: false,
      embeds: undefined,
      components: [Array],
      username: undefined,
      avatar_url: undefined,
      allowed_mentions: undefined,
      flags: 32772,
      message_reference: undefined,
      attachments: [Array],
      sticker_ids: undefined,
      thread_name: undefined,
      applied_tags: undefined,
      poll: undefined
    }
  },
  rawError: {
    message: 'Invalid Form Body',
    code: 50035,
    errors: { components: [Object] }
  },
  code: 50035,
  status: 400,
  method: 'POST',
  url: 'https://discord.com/api/v10/channels/1302354912235229307/messages'
}

Uncaught exception: DiscordAPIError[50035]: Invalid Form Body components[0].components[1].items[0].media.url[UNFURLED_MEDIA_ITEM_REFERENCED_ATTACHMENT_NOT_FOUND]: The referenced attachment ("attachment://votación.png") was not found Whenever I crtl + click the file link it outputs in the terminal, it sends me to the actual file, so I really don't know why this is failing. I've also tried this method in another file, and worked just fine. This is the one that works:

if(message.content === 'devRules') {
            if(DEVELOPER_IDS.includes(message.author.id)) {
                const rulesMessage = new RulesEmbed(Math.floor(new Date() / 1000), 'attachment://rules.png');
                const rulesAttachment = new AttachmentBuilder(path.join(__dirname, '..', 'assets', 'rules.png'), { name: 'rules.png' });
                
                message.channel.send({
                    components: [ rulesMessage.getEmbed() ],
                    flags: [
                        MessageFlags.IsComponentsV2,
                        MessageFlags.SuppressEmbeds
                    ],
                    files: [ rulesAttachment ]
                });
            }
        }

if(message.content === 'devRules') {
            if(DEVELOPER_IDS.includes(message.author.id)) {
                const rulesMessage = new RulesEmbed(Math.floor(new Date() / 1000), 'attachment://rules.png');
                const rulesAttachment = new AttachmentBuilder(path.join(__dirname, '..', 'assets', 'rules.png'), { name: 'rules.png' });
                
                message.channel.send({
                    components: [ rulesMessage.getEmbed() ],
                    flags: [
                        MessageFlags.IsComponentsV2,
                        MessageFlags.SuppressEmbeds
                    ],
                    files: [ rulesAttachment ]
                });
            }
        }

The rules embed constructor gets as a first arg the actual timestamp to place it at the message, then the second arg is placed in mediagallery's media.url property exactly as it's passed in the constructor.

GaryOP•7mo ago

This is the preview of the working one.

Mafia•7mo ago

sorry this comes off as mean but This code is nonsense StartUpEmbed is not a builder ins d.js. also you dont need the MessageFlags.SuppressEmbeds because cv2 disables embed Take a look at the example

GaryOP•7mo ago

No, I'm building them as classes for them to be reusable later on. Those classes use d.js builders.

Mafia•7mo ago

ya got it, sorry about that

GaryOP•7mo ago

For example

class StartUpEmbed {
   constructor() {
   }
}

class VotingEmbed extends StartUpEmbed {}

class StartUpEmbed {
   constructor() {
   }
}

class VotingEmbed extends StartUpEmbed {}

And within, I use the d.js Builders. dw

Mafia•7mo ago

Work to understand your error but the the MessageFlags.SuppressEmbeds thing is still true

GaryOP•7mo ago

I get that the code may seem sketchy and bad written, but technically the data that is being posted to discord to send to the channel is valid. Though it does not recognize the attachment. Oh, oke, ty I used it as a precaution, never really had it embed it b4. See how in the terminal it shows the AttachmentBuilder work well but when sent, just randomly breaking.

Mafia•7mo ago

ok so the error your getting is related to votación.png but I am unsure why it is throwing an error. To me it looks like it should work.

GaryOP•7mo ago

Right?

Mafia•7mo ago

like the error is the the file was not uploaded but you did attach it

GaryOP•7mo ago

That's why I'm confused. I've alreadh rebooted it, loaded the file manually and nothing. Already.*

Mafia•7mo ago

what if you used the item builder not sure it would change anything but worth a try

d.js docs•7mo ago

:class: MediaGalleryItemBuilder discord.js@14.19.3

GaryOP•7mo ago

Lemme try

Mafia•7mo ago

the only other thing I can think of is using a non ASCII character ó could be the issue but I hope that is not it

Inky•7mo ago

Can you show the getEmbed method?

GaryOP•7mo ago

I think not, because I ran into the same conclussion, but discord supports those characters to be sent on files. This is the getComponent() method. Or are you talking about the RulesEmbed() one. ?*

Mafia•7mo ago

but for the rules code could you share the getEmbed function

GaryOP•7mo ago

In that case, getEmbed() just returns this.container, as all of it is handled in the constructor itself.

Inky•7mo ago

Or I’m getting lost

GaryOP•7mo ago

Yeh, I'm quite unirganized. So There's the RulesEmbed() constructor, in which you pass two args: date and the attachment url. All of the component methods are andled in that constructor, and I only call getEmbed(), which should be get Constructor() to retrieve the container built in the contructor() Hope it makes quite more sense now.

Mafia•7mo ago

At this point I would unpack your class so it is just the builders in the file were you are sending the message and see if you have the error

GaryOP•7mo ago

Should I? Because I was thinking on handling the AttachmentBuilder in tbe same class file, but then I found it pointless, as it's really just the same. The.* I'm not showing direct code snippets, which would be easier, as I've turned off my machine, but I hope the explanations of the code are good enough for you both to understand.

Inky•7mo ago

Can’t rly debug anything I’d say just try using characters without accents for the name

GaryOP•7mo ago

Let me turn on my PC to send the class that works. I'll try that as well.

Mafia•7mo ago

It feels like that is the issue to me. but I would be kind of disappointed if it is

GaryOP•7mo ago

Whelp, I'm disapponted to be the one who tells you, but apparently that was the issue. Thanks guys. I just switched it from votación to votacion. Not the file tho, just the AttachmentBuilder()'s name and attachment://file.png's name. Thanks for the support.

Mafia•7mo ago

Interesting. Glad it works for you now. It probably has something to do with URL formatting

GaryOP•7mo ago

May be it. Thanks.

d.js docs•7mo ago

:discord: API Reference - Uploading Files read more

GaryOP•7mo ago

Gaming

Programming

MediaGalleryBuilder() error.

Did you find this page helpful?