fetch - Missing boundary in multipart/form-data POST
The solution to the problem is to explicitly set Content-Type
to undefined
so that your browser or whatever client you're using can set it and add that boundary value in there for you. Disappointing but true.
FormData how to get or set boundary in multipart/form-data - Angular
Well, seems that the headers ContentType should be undefined, in order to add the correct boundaries
What is the boundary parameter in an HTTP multi-part (POST) Request?
The boundary parameter is set to a number of hyphens plus a random string at the end, but you can set it to anything at all. The problem is, if the boundary string shows up in the request data, it will be treated as a boundary.
For some tips, and an example function for sending multipart/form-data see my answer to this question. It wouldn't be too difficult to modify that function to use a loop for each part you would like to send.
What is the '-' in multipart/form-data?
Not a single -
is mandatory. You can have any number of them. It is actually a mystery to me why user-agents tend to add so many. It is probably traditional because in the old days, when people still regularly looked at the actual protocol traffic, it provided some nice visual separation. Nowadays it is pointless.
Note however, that when you use the boundary in the stream, it must be prefixed by two hyphens (--
). That’s part of the protocol. Of course, the fact that most user-agents use lots of hyphens in their boundary makes this very hard to see by example.
Furthermore, the last boundary (which marks the end of the message) is prefixed and suffixed by two hyphens (--
).
So in summary, you could call your boundary OMGWTFPLZDIEKTHX
, and then your traffic could look like this:
Content-Type: multipart/form-data; boundary=OMGWTFPLZDIEKTHX
--OMGWTFPLZDIEKTHX
Content-Type: text/plain
First part (plain text).
--OMGWTFPLZDIEKTHX
Content-Type: text/html
<html>Second part (HTML).</html>
--OMGWTFPLZDIEKTHX--
How to set boundaries in an http request?
OK so I gave up on this. And then after a week I found out you can do this.
const form = new FormData();
headers['Content-Type'] = `multipart/form-data; boundary=${form._boundary}`;
Related Topics
Css Overflow-X: Visible; and Overflow-Y: Hidden; Causing Scrollbar Issue
Is Putting a Div Inside an Anchor Ever Correct
Canvas Width and Height in Html5
How to Style the Parent Element When Hovering a Child Element
Floated Elements of Variable Height Push Siblings Down
Stretch and Scale CSS Background
Flex Property Not Working in Ie
File Input 'Accept' Attribute - Is It Useful
Why Doesn't the Height of a Container Element Increase If It Contains Floated Elements
How to Overlay One Div Over Another Div
Limit File Format When Using ≪Input Type="File"≫
How to Detect When Cancel Is Clicked on File Input
Zoom to Fit: Pdf Embedded in HTML
Flex/Grid Layouts Not Working on Button or Fieldset Elements