S3 PUT request from microsoft edge and IE fails be

Question

This issue might be related to this question, but the platform is different so I am not sure. I had written JavaScript code in angularJS to upload an image to s3, it seems to work fine on most of the modern browsers but fails on Microsoft edge and IE 11 as far I have tested.

The code does a PUT call to update an existing s3 URI with an image file

let s3URLforImageUpload = encodeURI(response.payload.data) // already existing URI;
$http.put(s3URLforImageUpload, file, {headers: {'Content-Type': file.type}}) // file from ng-select directive
.success(function(response) {})
.catch(function(error) {})

I can see a 403 to my PUT request in the network tab.I am not sure how I can create a JSfiddle to reproduce this issue but what happens is for some reason

Chrome or Firefox treat the url and I can see in network tab for parameters like

X-Amz-SignedHeaders: content-type;host

But on Microsoft edge and IE11, I see host as a separate parameter

X-Amz-SignedHeaders: content-type
host:

I have tried changing the code for sending the request to xmlhttprequest to see if anything changes with how parameters are sent and it also gives me the same response.

let s3URLforImageUpload = encodeURI(response.payload.data);
var req = new XMLHttpRequest();
req.onload = function(response) {
  console.log("RESPONSE 2", response);
}
req.open("PUT", s3URLforImageUpload);
req.setRequestHeader("Content-type", file.type);
req.send(file);

I get the same 403 response and I can see the same issue with the sent parameters. Any guidance will be much appreciated.