Problems with image upload from browsers to Amazon S3

Question

Recently I have implemented image upload to Amazon S3 from javascript in browser. I have focused to FireFox, Chrome and IE only.

At the end I have not managed to implement it for IE - any version(even 10).

The use case was something like this:

1. select a local image file
2. send file size, mime content type and file name to a server in cloud.
3. make base64 thumbnail out of image file
4. server in cloud do the signing and sends me all important data and url for upload
5. Get the data and form xhr:XMLHttpRequest object
6. Using "POST" method, upload file over "multipart/form-data" request, using also provided data (acl, key, Content-Type, AWSAccessKey, signature, policy and file)

The another important thing is that browsers' location protocol is https.

Problems: I have run into several problems, mostly on IE.

1. reading file's size, mime type, or local path is not possible in IE<10.
2. IE<10 can't read local file content for base64 creation.

3. IE 10 can do that stuff (1 and 2) but has an issue with xhr.open("POST",url,true) - it crashes when url starts with http:// (the browser calls it from https://something.com/more/stuff)

   3.1. If browser is on http it works.

   3.2. if POST request is called for url that starts with https:// it doesn't crash but it fails uploading 3.2.1. The same as 3.2 is happening on the FireFox

Not acceptable solutions:

1. Everything works when the browser and destination url starts with http://
2. Use a flash plugin

It would be really, really good if the solution would support older browsers, it would be very good if it supports IE9+, and ok if supports just IE10. Of course FF and Chrome should work with it also.

Here is a part of code that works, but have an issue (problem 3):

function sendFile(putFields){
var xhr = new getXHRObject(); // returns new XMLHttpRequest object.
var url = 'http://'+putFields.bucket+"."+putFields.host+"/";
xhr.onreadystatechange=function(){
   if (http.readyState==4&&null!=http.status&&(http.status==200||http.status==201
        ||http.status==202||http.status==204||http.status==205||http.status==0)){
        alert('success!');
    }else if (http.readyState==4){
        alert('fail ');
    }
}

 var params={
        'acl':""+putFields.acl,
        'key':""+putFields.key,
        'Content-Type':putFields.contentType,
        'AWSAccessKeyId':putFields.awsAccessKeyId,
        'signature':putFields.signature,//encodeURIComponent()
        'policy':""+putFields.policy,
        'file':aFile
 };
 var fData = new FormData();

 for (var p in params)
     fData.append(p,params[p]);

xhr.open("POST", postUrl, true); // IE crashes here when https-->http is the case
setTimeout(function(){ xhr.send(fData);}, 100);
}

I am trying to find solution for this for some time now but with no real success, please help!

Answer 1

If any one still gets this error, I found that adding 'contentType' fixed it

$('.uploadAssets').ajaxForm( {
    dataType:               'json',
    contentType:            'application/json; charset=utf-8',//added this line and problem solved
    beforeSend:             beforeuploadAssetsPostForm,
    success:                uploadAssetsFormResponse,
    error:                  uploadAssetsError
});