How to stream upload as multipart form data with fetch?

Question

I am on chrome, where sending ReadableStream as an octet stream is supported. If I provide a ReadableStream as the body to fetch, everything works. However, if I append it to a FormData like below and provide that instead, that does not work.

async function main() {
  const blob = new Blob([new Uint8Array(10 * 1024 * 1024)]);
  const body = new FormData();

  body.append("file", blob.stream());
 
  await fetch(..., {
    method: "POST"
    body: body,
    duplex: "half",
  });
}

This is because from append documentation:

If the value is not a string or a Blob, append() will convert it to a string automatically:

So file in my form data gets coerced to the literal text [object ...], not the actual binary data of the stream.

How can I stream blob using form data? I must deal with blob.stream(), since my use case requires a ReadableStream.

Answer 1

The only way I can see this working is by making the form data (either the plain value of the form fields or a FormData object) be part of the blob (not the blob part of the FormData, JSON document etc.). Maybe creating the content of the multipart/form-data as a blob.

Like in this answer: https://stackoverflow.com/a/23517227/322084 where you can see the structure of a POST request with the content-type of multipart/form-data.