The file msw get is not the original file... Why and How to fix?

[PeterlitsZo]

UPDATED: It looks to be a bug. See #929 and #931

---

Hello everyone...

Here is my hook, to upload file:

const useUploadPicture = () => {
  const uploadPicture = async (picture: File) => {
    const data = new FormData();
    data.append('file', picture);
    const res = await fetch('/api/v1/picture-bed', {
      method: 'POST',
      body: data,
      // headers: {
      //   "Content-Type": "multipart/form-data",
      // },
    });
    const { url } = await res.json() as { url: string };
    return url;
  };
  return uploadPicture;
};

export default useUploadPicture;

And here, is a handler to hold it:

const pictureBedApiPost = rest.post(
  '/api/v1/picture-bed',
  async (req, res, ctx) => {
    const body = req.body;
    if (typeof body !== 'object' || body === null) {
      return res(ctx.status(400));
    }
    const file = body.file;
    if (!(file instanceof File)) {
      return res(ctx.status(400));
    }
    console.log('[Mock] The req:');
    console.log(req);

    const url: string = await fromFileToDataUrl(file);
    console.log('[Mock] The data URL of file');
    console.log(url);
    const result = res(
      ctx.status(201),
      ctx.json({ url }),
    )
    console.log('[Mock] Get', req, 'return', result);
    return result;
  }
);

export default pictureBedApiPost;

Great right? But the req.body.file is not the same file as the original file. It is bigger. The data-URL of the file is also different than the data-URL of the original file...

Help please. Thanks a lot.

[nemanjam]

Where is definition for fromFileToDataUrl()?

[PeterlitsZo]

It is really easy: try to read it by FileReader, and then... get its data-url:

const fromFileToDataUrl = async (file: File) => {
  return await new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
    reader.readAsDataURL(file);
  })
}

[kettanaito]

Hey, @PeterlitsZo. Thanks for raising this.

I don't think that MSW has proper support for mocking binaries and buffers. Some scenarios may work but some, as your experience shows, are unaccounted for.

In that regard, I've kicked off a proof of concept of handling all mocked response bodies as readable streams, meaning that all data will be transferred between the client and the worker as Uint8Array and not a stringified representation of a response's body (#1288). I think this should resolve your issue as well.

[PeterlitsZo]

Really thank you for your great work!