I encountered an issue while trying to upload an image to the WhatsApp Cloud API using Axios. Despite setting the content type of the form data to image/png
for an image with a .png
extension, I keep receiving an error message from WhatsApp indicating an invalid_request
. The error message specifically mentions that the parameter "file" must be a file with one of the specified MIME types, but it's receiving a file of type "application/octet-stream".
The error message received from WhatsApp is:
OAuth 'Facebook Platform' 'invalid_request' '(#100) Param file must be a file with one of the following types: audio/aac, audio/mp4, audio/mpeg, audio/amr, audio/ogg, audio/opus, application/vnd.ms-powerpoint, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/pdf, text/plain, application/vnd.ms-excel, image/jpeg, image/png, image/webp, video/mp4, video/3gpp. Received file of type 'application/octet-stream'
Here is code for the node.js file
(async () => {
const formData = new FormData();
formData.append("messaging_product", "whatsapp");
formData.append("type", "image/png");
const stream = await streamToBlob(
fs.createReadStream(
"/filepath"
)
);
formData.append("file", stream);
console.log("formData", formData);
let config = {
method: "post",
maxBodyLength: Infinity,
url: `https://graph.facebook.com/v18.0/${phoneNumberId}/media`,
headers: {
Authorization:
`Bearer ${token}`,
"Content-Type": "multipart/form-data;image/png",
},
data: formData,
};
axios
.request(config)
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error);
});
})();
Despite setting the content type of the form data to "image/png" for an image with a .png extension
You have added an extra parameter with the name type
, and the value image/png
- which has nothing whatsoever to do with the actual Content-Type
of anything else.
And you have set Content-Type: multipart/form-data;image/png
, which simply makes no sense. The Content-Type of the request needs to be just multipart/form-data
. image/png
is only the Content-Type of one of the parts inside this multipart request.
https://www.npmjs.com/package/stream-to-blob shows that streamToBlob
takes an optional second parameter, mimeType
- and that is where you need to set the Content-Type for the BLOB that you are creating here.
const stream = await streamToBlob(
fs.createReadStream(
"/filepath"
),
"image/png"
);