Edge/IE fail to set Content-Type header on XHR whose body is a typed Blob about formdata

[balessan]

Yes I can confirm your patch works fine.

Stupid IE.

[jimmywarting]

hmm, it do look badly formatted. Could you try to dump the actual blob that are being sent using this client side code?
here is how

var blob = formdata._blob() 
var fr = new FileReader
fr.onload = function() {
  console.log(fr.result)
}
fr.readAsText(blob)

for me it looks something like:

------formdata-polyfill-0.24730354822730538
Content-Disposition: form-data; name="key"

value
------formdata-polyfill-0.24730354822730538--

which is correct.

Would also help if you dumped the request headers... specifically the content-type header you get in your server

[balessan]

Using the code you provided I got the following ( see the screenshot as I am testing using BrowserStack and cannot copy/paste easily ), which looks ok.

So then it's an issue on the backend side.Is that possible that the formdata-polyfill prefix is conflicting with the form entry parsing library of my current framework ?

Hum...

[jimmywarting]

Got to be a problem on the server side...
Are you using a library for parsing multipart forms?

Things you can check:

• Are the the blob size the same as Content-Length request header?
• Are the Content-Type request header same as the blob's mime type?

PHP should be able to parse it $_POST["email"]

[balessan]

I'll check that ;-)

[jimmywarting]

chromes FormData don't look much different

fd = new FormData
fd.append('key', 'value')
new Response(fd).text().then(console.log)

result = `
------WebKitFormBoundary9F5Xu977y9H9FXm0
Content-Disposition: form-data; name="key"

value
------WebKitFormBoundary9F5Xu977y9H9FXm0--
`

note: Math.random is not always the same length
So calling fd._blob() might not be the same size when you are sending it.

so you can instead send the blob... xhr.send(blob)

[balessan]

What seems strange is that the developer tools of my IE11 borwserStack instance are not detecting anything in the request body, even though the code you gave me seems ok. See the following screen for reference.

It really looks to me that the HTTP Post is send empty.

[jimmywarting]

I'm not sure how you can miss something like a -, spaces and ; in your body. Something is stripping the content

[jimmywarting]

Weird. try sending the blob then and see what happens... xhr.send(formdata._blob())
the content-type header is wrong, but it might also be the response content-type and not the request content-type

the polyfill also got another trick in the sleeve, formdata = formdata._asNative()

[jimmywarting]

mather of fact, it looks to me like you are inspecting the response body, response header & the response content-type

[balessan]

Ok on the client side I was missing the Content-Type : multipart/form-data which explains the emptyness of the request body when inspecting.

Remaining issue is on the backend side.

Thanks for your attention, I have been making some progress ;-) And your library has no issue then.

[jimmywarting]

Was snooping around on browserstack myself when you reveled your website.
It doesn't look like the Content-Type is being set?

If you would perhaps do it like this:

var blob = formdata._blob();

xhr.open( method, url );
xhr.setRequestHeader( "X-Requested-With", "XMLHttpRequest" );
xhr.setRequestHeader( "Content-Type", blob.type );
xhr.send( blob );

would it work for you then?

[jimmywarting]

In that case i might make a patch where i set the content-type header in the polyfill

[balessan]

I am testing.

[jimmywarting]

The spec is: If you are sending a Blob/file with ajax and no content-type header is specified it should use the Files type as content-type. IE don't seems to follow that rule?

[jimmywarting]

Gah, hate IE. Going to make a patch to fix it.

[jimmywarting]

found something related: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6047383/

[balessan]

Top ! And really thanks for your time ;-)

[balessan]

I am not that familiar with the use of Blobs so I did not look in that direction but yeah, your article seems to correspond to the situation.

[jimmywarting]

Fixed in 3.0.6 3.0.7

[balessan]

👍

[balessan]

Tested but got an issue being:

Object doesn't support property or method 'a'

The incriminated line being:

XMLHttpRequest.prototype.send=function(b){b instanceof H&&(b=b.a(),this.setRequestHeader("Content-Type", b.type))

[jimmywarting]

Forgot closure compiler mangels private properties/methods starting with _
Fixed in 3.0.7

[balessan]

Works perfect !