Sending email attachments through Mailgun API with Axios in React

Other Questions Mailgun
1

I’m trying to send emails with file attachments using the Mailgun API in my React application. I’m using Axios to make the HTTP requests.

The issue I’m facing is that while the email gets delivered with an attachment, the attachment has problems. The filename shows up as just a dot (“.”) instead of the actual filename I specified. When I try to open the attachment after renaming it, it just contains “[object Object]” as the content instead of the actual file data.

Here’s my current implementation:

const formData = new FormData();
const fileSystem = require("fs");

formData.append("from", "[email protected]");
formData.append("to", "John Doe <[email protected]>");
formData.append("subject", "Document Delivery");
formData.append("text", "Please find the attached document.");
formData.append("attachment", [{
    filename: "document.txt",
    data: fileSystem.readFileSync(__dirname + "/sample.txt", {
        encoding: "utf8",
        flag: "r"
    })
}]);

const apiUrl = "https://api.mailgun.net/v3/sandbox456.mailgun.org/messages";

await axios.post(apiUrl, formData, {
    auth: {
        username: "api",
        password: process.env.MAILGUN_KEY
    },
    headers: { "Content-Type": "multipart/form-data" }
});

What am I doing wrong with the attachment formatting? How should I properly structure the attachment data for Mailgun?

2

The problem’s with your attachment parameter structure. When using FormData with Mailgun, you need to append the file data directly - don’t wrap it in an array or object. Your current code passes [{filename: "document.txt", data: fileContent}] but Mailgun wants the raw file content. Try this instead: javascript const fileContent = fileSystem.readFileSync(__dirname + "/sample.txt"); formData.append("attachment", fileContent, "document.txt"); The third parameter sets the filename that shows up in the email. Make sure you’re reading the file as a buffer, not a UTF-8 string for binary files. This’ll fix both the filename issue and that “[object Object]” content problem.

3

Had this exact same problem a few months ago. You’re appending the attachment wrong - you’re passing an array with an object, but FormData wants the actual file data directly. Don’t wrap it in an object. Read the file as a buffer instead of a utf8 string, then append it like formData.append('attachment', fileBuffer, 'document.txt'). That third parameter is your filename. Also check you’re not accidentally JSON.stringify-ing anything - that’s probably why you’re seeing “[object Object]” as the content.

4

the issue is you’re using fs in react, which won’t work client-side. but the main problem is your attachment format - ditch the array brackets and object structure. just do formData.append('attachment', fileData, 'document.txt') where fileData is the actual file content, not wrapped in an object. that’s why mailgun sees [object Object].