Binary body of a request gets corrupted in the handler

Environment

Name	Version
msw	0.35.0
browser	Microsoft Edge
OS	Windows 10

Request handlers

Mocking setup via storybook add-on:

import { rest } from "msw";

component.parameters = {
  msw: [
    rest.post(
      "/api/xyz/42",
      ( req,res, ctx ) => { ... }]];

In the req.body I expect a multipart content which owns an jpeg image.

In preview.js I have:

import { initializeWorker, mswDecorator } from "msw-storybook-addon";

initializeWorker();
addDecorator(mswDecorator);

Actual request

The request is a multipart content which contains a jpeg image sent by fetch.

Current behavior

The data received in the request handler is a damaged jpeg file. After a lot debugging I found out that the image data gets damaged at two locations:

1. In mockServiceWorker.js function getResponse. There the body of the request is extracted by using request.text(). This damages the binary data because the data is converted to utf-8.

https://github.com/mswjs/msw/blob/11bb2441e102666184188f9f576ac65e59b1be9d/src/mockServiceWorker.js#L175

The request body is always decoded using UTF-8

1. In RequestHandler.ts function parseMultipartData there is a call to the constructor of File with

https://github.com/mswjs/msw/blob/11bb2441e102666184188f9f576ac65e59b1be9d/src/utils/internal/parseMultipartData.ts#L87

This fails because the content body given to the File constructor is encoded as UTF-8 but here the data have to be given as an ArrayBuffer.

Expected behavior

Expected is that the data from the post request will not get damaged. To prevent a damage of the image for 1. the content should be get as unicode string by using something like this:

const body = String.fromCharCode(...new Uint8Array(await request.arrayBuffer()))

For 2. we need transform the extracted data of the multipart data so the image correctly used for the creation of the File. To transform it back from unicode string to ArrayBuffer we need soething like this:

const encoded = Uint8Array.from([...contentBody].map(ch => ch.charCodeAt())).buffer;
const imageFile = new File(encoded, filename, { type: contentType });

[Ovaron1994]

Hi PupoSDC,

have you tried to use the fromCharCode for single characters in a for loop like this:

let body = “”; const uint8Arr = new Uint8Array(await request.arrayBuffer()); for (let i = 0; i < uint8Arr.byteLength; i++) { body += String.fromCharCode(uint8Arr[i]) }

This is not an effective way but it should work.

Another way should be:

const body = new TextDecoder().decode(new Uint8Array(await request.arrayBuffer()));

Did it work with this?

Greetings Michael

[Ovaron1994]

Hi kettanaito,

1. The issue did not happen for binary response bodies. It appears for binary request bodies. I want to analyze/look in the data sent via POST request.
2. Have to try to send a POST request with binary data in non-multipart way.
3. Have to write a test which send a part of binary data, for example the first 10 bytes of an jpeg image, to show that these bytes are received damaged in the mocked request handler.