How can i use XmlHttpRequest or FileAPI in Internet Explorer?

Question

Below code is from the html5uploader and it works well on all browsers except IE 10. I have tried my best to include a function where IE is detected and the dropped file read but was unable to get this working in IE.

How do i modify code in the function below to include Internet Explorer 10?

Full Javascript code here. Link to uploader here.

    // Firefox 3.6, Chrome 6, WebKit
    if(window.FileReader) { 

        // Once the process of reading file
        this.loadEnd = function() {
            bin = reader.result;                
            xhr = new XMLHttpRequest();
            xhr.open('POST', targetPHP+'?up=true', true);
            var boundary = 'xxxxxxxxx';
            var body = '--' + boundary + "\r\n";  
            body += "Content-Disposition: form-data; name='upload'; filename='" + file.name + "'\r\n";  
            body += "Content-Type: application/octet-stream\r\n\r\n";  
            body += bin + "\r\n";  
            body += '--' + boundary + '--';      
            xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
            // Firefox 3.6 provides a feature sendAsBinary ()
            if(xhr.sendAsBinary != null) { 
                xhr.sendAsBinary(body); 
            // Chrome 7 sends data but you must use the base64_decode on the PHP side
            } else { 
                xhr.open('POST', targetPHP+'?up=true&base64=true', true);
                xhr.setRequestHeader('UP-FILENAME', file.name);
                xhr.setRequestHeader('UP-SIZE', file.size);
                xhr.setRequestHeader('UP-TYPE', file.type);
                xhr.send(window.btoa(bin));
            }
            if (show) {
                var newFile  = document.createElement('div');
                newFile.innerHTML = 'Loaded : '+file.name+' size '+file.size+' B';
                document.getElementById(show).appendChild(newFile);             
            }
            if (status) {
                document.getElementById(status).innerHTML = 'Loaded : 100%<br/>Next file ...';
            }
        }

Answer 1

perhaps this can help other people, even if the problem is resolved for you:

1) be sure you force your browser to IE10 : <meta http-equiv="X-UA-Compatible" content="IE=edge">

2) don't use reader.readAsBinaryString(file); but reader.readAsDataURL(file); for IE

3) send the XHR object with xhr.send and do not use btoa (just do xhr.send((bin));)

4) Generally, in order your code to be comptatible with all browser, use if (navigator.appName === "Microsoft Internet Explorer") { ... } and open your XHR object with a different target for each browser (like this: xhr.open('POST', targetPHP+'?up=true&browser=IE', true); ), because if will be handled differently by PHP.

Everything is explained here : How can i change the XmlHttpRequest or FileAPI used in html5uploader to support IE