JavaScript fetch() Discord file upload results in a HTTP 400 "cannot send empty message, 50006" error

Question

I am trying to upload a single PNG file to a Discord channel using a webhook using vanilla javascript because I cannot use Discord.js.

In Chrome's JavaScript console, I get the following error message:

POST https://discordapp.com/api/webhooks/ 400

Followed by this console.log() output:

Success: {message: "Cannot send an empty message", code: 50006}

I include my code and the Network console transcript at the end, but I have 1 question:

what am I doing wrong? I see that Content-Disposition for the file is of type form-data, any connection to my problem?

Before that, I managed to post messages (json only, no files) using both XMLHttpRequest and fetch.

I did not try using JQuery although I could and would prefer a pure Javascript solution.

Below is the code I wrote, to send a single PNG image as well as a payload_json JSON data payload (same error without the payload):

    const filename = 'image.png';
    domtoimage.toBlob(document.querySelector(''))
      .then(function (blob) {
        const formData = new FormData();
        var params = {
          username: "My bot name",
          avatar_url: "",
          content: "another test 2",
          embeds: [{
            "image": {
              "url": "https://i.imgur.com/ZGPxFN2.jpg"
            }
          }]
        };
        formData.append('payload_json',JSON.stringify(params))
        formData.append('file',blob);
        fetch('https://discordapp.com/api/webhooks/', {
          method: 'POST',
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          body: formData,
        })
        .then(response => response.json())
        .then(result => {
          console.log('Success:', result);
        })
        .catch(error => {
          console.error('Error:', error);
        });
      });

In Chrome's Network console, I get the following information:

General
    Request URL: https://discordapp.com/api/webhooks/
    Request Method: POST
    Status Code: 400 
    Remote Address: 162.159.134.233:443
    Referrer Policy: no-referrer-when-downgrade
Response Headers
    access-control-allow-credentials: true
    access-control-allow-headers: Content-Type, Authorization, X-Track, X-Super-Properties, X-Context-Properties, X-Failed-Requests, X-Fingerprint, X-RPC-Proxy, X-Debug-Options, x-client-trace-id, If-None-Match, X-RateLimit-Precision
    access-control-allow-methods: POST, GET, PUT, PATCH, DELETE
    access-control-allow-origin: 
    access-control-expose-headers: Retry-After, X-RateLimit-Global, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, X-RateLimit-Bucket, Date
    cf-cache-status: DYNAMIC
    cf-ray: 
    cf-request-id: 
    content-length: 58
    content-type: application/json
    date: Thu, 16 Jul 2020 04:23:41 GMT
    expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    server: cloudflare
    set-cookie: __cfduid=<__cfduid>; expires=Sat, 15-Aug-20 04:23:40 GMT; path=/; domain=.discordapp.com; HttpOnly; SameSite=Lax
    set-cookie: __cfruid=<__cfduid>; path=/; domain=.discordapp.com; HttpOnly; Secure; SameSite=None
    status: 400
    strict-transport-security: max-age=31536000; includeSubDomains
    via: 1.1 google
    x-envoy-upstream-service-time: 27
    x-ratelimit-bucket: 
    x-ratelimit-limit: 5
    x-ratelimit-remaining: 4
    x-ratelimit-reset: 
    x-ratelimit-reset-after: 2
Request Headers
    :authority: discordapp.com
    :method: POST
    :path: /api/webhooks/
    :scheme: https
    accept: */*
    accept-encoding: gzip, deflate, br
    accept-language: en,en-US;q=0.9,ja;q=0.8
    content-length: 50696
    content-type: multipart/form-data
    origin: https://
    referer: https://
    sec-fetch-dest: empty
    sec-fetch-mode: cors
    sec-fetch-site: cross-site
    user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
Request Payload
    ------WebKitFormBoundarypu7GvABzASKKKTQF
    Content-Disposition: form-data; name="payload_json"

    {"username":"WhiteBoard","avatar_url":"https://i.imgur.com/ZGPxFN2.jpg","content":"another test 2","embeds":[{"image":{"url":"https://i.imgur.com/ZGPxFN2.jpg"}}]}
    ------WebKitFormBoundarypu7GvABzASKKKTQF
    Content-Disposition: form-data; name="file"; filename="blob"
    Content-Type: image/png

    ‰PNG
    

    IHDRpíã IDAT[...]
    [...]:cjIEND®B`‚
    ------WebKitFormBoundarypu7GvABzASKKKTQF--

-------- Edit (2020/07/16 14:30): Answering my secondary question myself --------

why is the filename part in the request payload "blob"? FormData.append() accepts a third parameter with the filename, my code should look like below:

    formData.append('file',blob,filename);

user_6557302 · Answer

A build a simple js functions to resize images on client site side before sent to server. I get the result in base64 encoded and make a blob with this function

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

Then, I send a image as blob to discord webhook with fetch

function sendMessage(img, obj=false) {
  console.log("send")
  const WH_URL = "YOUR_URL"
  if(!obj)
    obj = {
      content: ''
    }
  var myHeaders = new Headers();
  var formdata = new FormData();
  formdata.append("file", img, "img.png");
  formdata.append("payload_json", JSON.stringify(obj));
  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: formdata,
    redirect: 'follow'
  };
fetch(WH_URL, requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
}

Full Example:

const resizeImage = data =>{
  return new Promise( r =>{
    let dst, ctx, width, start, time, _data;
    let img = new Image();
    img.src = data
    img.onload = () => {
      width = 300;
      dst = document.createElement("canvas")
      ctx = dst.getContext("2d")
      dst.width = width;
      dst.height = img.height * width / img.width
      start = performance.now()
      ctx.drawImage(img, 0, 0, dst.width, dst.height)
      time = (performance.now() - start).toFixed(2)
      _data = dst.toDataURL()
      r(_data)
    }
  })
}
const readImg = async form =>{
  var files = form.files;
  if (files.length === 0)
    return;
  let data = await resizeImage(window.URL.createObjectURL(files[0]))
  document.querySelector('#img').src = data;
  let b64 = data.split(",")[1] // get only base64
  sendMessage(b64toBlob(b64), { content: 'Resized Image'})
}


function sendMessage(img, obj=false) {
  console.log("send")
  const WH_URL = "YOUR_WEBHOOK_URL"
  if(!obj)
    obj = {
      content: ''
    }
  var myHeaders = new Headers();
  var formdata = new FormData();
  formdata.append("file", img, "img.png");
  formdata.append("payload_json", JSON.stringify(obj));
  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: formdata,
    redirect: 'follow'
  };
fetch(WH_URL, requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
}

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

JavaScript fetch() Discord file upload results in a HTTP 400 "cannot send empty message, 50006" error

1 Answers

Full Example: