How to send multipart/form-data with antd upload react

Question

I am using react and antd.
The component I am using from antd is Drag and Drop.
I am trying to send multipart/form-data using FormData object.
It sends the file (.zip file that should be sent as blob) but it does not send it as blob nor anything related to the other keys and values.
Here's a Sandbox.

Expected Request Payload:

------WebKitFormBoundaryysdTGvf0cRZVGpQ4
Content-Disposition: form-data; name="file"; filename="aFileName.zip"
Content-Type: application/octet-stream

[0,1,2]
------WebKitFormBoundaryysdTGvf0cRZVGpQ4
Content-Disposition: form-data; name="x2"

y2
------WebKitFormBoundaryysdTGvf0cRZVGpQ4
Content-Disposition: form-data; name="x3"

true
------WebKitFormBoundaryysdTGvf0cRZVGpQ4
Content-Disposition: form-data; name="x4"

2
------WebKitFormBoundaryysdTGvf0cRZVGpQ4

Actual Request Paylod:

------WebKitFormBoundaryysdTGvf0cRZVGpQ4
Content-Disposition: form-data; name="file"; filename="aFileName.zip"
Content-Type: application/zip


------WebKitFormBoundaryysdTGvf0cRZVGpQ4

Solution 1

I have used customRequest to solve this problem.
You can find an example here: Send multipart/form-data with antd upload #11616

Solution 2

If you just want to use <Upload> as a file input and only have <Form> submit the file for you, here is my solution