How to convert async AsyncIterable<Uint8Array> to File in Javascript

Question

Hello I'm sending/POST a File from a HTML Form on a browser client to a Remix application server.

The Remix applicaton server is sending/handling my File as a async AsyncIterable. I now need to convert it back to a File object so I can send it to a backend server as FormData.

I tried both with and without buffer for demo:

Does anyone have experiance with convert AsyncIterable to Blob then to File??

const myHandler: UploadHandler = async ({ name, contentType, data, filename }) => {
  //'data' is data of type AsyncIterable<Uint8Array>
  //'contentType' is 'image/png'

  let dataArray1 = []; //test1 without buffer
  let dataArray2 = []; //test2 with buffer

  for await (const x of data) {
    dataArray1.push(x); //without buffer
    dataArray2.push(x.buffer); //with buffer
  }

  const blob1 = new Blob(dataArray1, {type: contentType});
  const blob2 = new Blob(dataArray2, {type: contentType});

  const file1 = new File([blob1], filename, { type: contentType });
  const file2 = new File([blob2], filename, { type: contentType });
  console.log('file1.size: ', file1.size); 
  //file1 size is 1336843 (and for file2)
  //but i'm getting content-length 1337028 from my browser Form
  //so I'm not sure if it's correct

  return file1;
};

[![content-length size][1]][1]

[![enter image description here][2]][2]

[![enter image description here][3]][3]

[![enter image description here][4]][4]

When i'm sending back out using fetch to the backend i'm getting: RequestContentLengthMismatchError: Request body length does not match content-length header. But I have made sure the content-length is the same size as the file. In this case it I set it to 1336842 which is the Byte size of the file (file1.size) — Bobby
– Bobby, Commented Aug 8, 2022 at 12:03
Added some images showing the content-length and size of the File before erroring with Fetch — Bobby
– Bobby, Commented Aug 8, 2022 at 12:16
Your code that is computing the contentLength using reduce looks weird, but I can't tell what the problem is unless you post the complete thing as formatted text instead of a painting. Also why are you even trying to compute the content-length yourself instead of letting fetch do this (correctly) for you? — Bergi
– Bergi, Commented Aug 9, 2022 at 1:24

Sérgio Carneiro · Accepted Answer · 2022-08-22 19:18:59Z

2

Try passing the blob parts directly into the file constructor.

const myHandler: UploadHandler = async ({ name, contentType, data, filename }) =>
{
   const dataArray1 = [];

   for await (const x of data)
   {
      dataArray1.push(x);
   }

   const file1 = new File(dataArray1, filename, { type: contentType });

   return file1;
};

answered Aug 22, 2022 at 19:18

Sérgio Carneiro

4,0264 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to convert async AsyncIterable<Uint8Array> to File in Javascript

1 Answer 1

Try passing the blob parts directly into the file constructor.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Try passing the blob parts directly into the file constructor.

Comments

Your Answer

Sign up or log in

Post as a guest

Related