XMLHttpRequest file upload not working in IE11

Question

Hi I have the following JS on my page. It is working fine on chrome and firefox. but its not working on Internet Explorer 11. I'm a salesforce developer and I don't know much javascript. Can you please help me find where the issue is? Thanks in advance.

tests = {
        filereader: typeof FileReader != 'undefined',
        dnd: 'draggable' in document.createElement('span'),
        formdata: !!window.FormData,
        progress: "upload" in new XMLHttpRequest
    },
    support = {
        filereader: document.getElementById('filereader'),
        formdata: document.getElementById('formdata'),
        progress: document.getElementById('progress')
    },
    progress = document.getElementById('uploadprogress'),
    fileupload = document.getElementById('upload');
    
    "filereader formdata progress".split(' ').forEach(
        function (api) {
            if (tests[api] === false) {
                support[api].className = 'fail';
            } else {
                support[api].className = 'hidden';
            }
        }
    );
    
    function textBeforeDrag(flag){
        if(flag)
        {
            holder_txt1.className = '';
            holder_txt2.className = 'hidden';
        }else{
            holder_txt1.className = 'hidden';
            holder_txt2.className = '';
        }
    }
    
    function resetAll()
    {
        holder.className = holder_txt1.className = '';
        holder_txt2.className = uploadStatus.className = 'hidden';
    }
    
    function readfiles(files) { 
        
        var goodSize = true;
        var formData = tests.formdata ? new FormData() : null;
        for (var i = 0; i < files.length; i++) {
            size = typeof ActiveXObject !== 'undefined' ?
                        getIEFileSize(files[i])
                        :
                        files[i].fileSize || files[i].size;
            goodSize = 5000000 > size;
            if(!goodSize)
            {
                alert(files[i].name +' is too large, please choose a file that is 5Mb or less');
                return;
            }
            goodSize = 26214400 > size+{!allAttSize};
            if(!goodSize)
            {
                alert(this.files[0].name +' is too large - Total Attachment Size should not exceed 25MB');
                return;
            }
            uploadStatus.className = '';
            holder.className = 'hidden';
            
            // now post a new XHR request
            if (tests.formdata) {
                var xhr = new XMLHttpRequest();
                
                var sfdcurl = 'https://'+sfdcHostName+'.salesforce.com/services/apexrest/DragAndDrop/v1?FileName='+encodeURIComponent(files[i].name)+'&cType='+encodeURIComponent(files[i].type)+ '&parId={!thisCase.id}';
                
                xhr.open('POST','/services/proxy' );
                
                xhr.setRequestHeader("Authorization","Bearer {!$Api.Session_ID}");
                xhr.setRequestHeader('SalesforceProxy-Endpoint', sfdcurl);
                xhr.setRequestHeader('X-User-Agent', 'DragAndDropAPI v1.0');
                
                xhr.onload = function() {
                    progress.value = progress.innerHTML = 100;
                };
                
                if (tests.progress) {
                    xhr.upload.onprogress = function (event) {
                        if (event.lengthComputable) {
                            var complete = (event.loaded / event.total * 100 | 0);
                            progress.value = progress.innerHTML = complete;
                        }
                    }
                }
                
                xhr.onreadystatechange=function()
                {
                    if (xhr.readyState==4 && xhr.status != 200)
                    {
                        if(xhr.responseText)
                            alert(xhr.responseText);
                        else
                            alert('Some error occurred while uploading file');
                        
                        console.log(xhr);
                    }else{
                          
                    }
                }
                xhr.send(files[i]);
            }
        } 
        setTimeout(function(){addDroppedAttachment();},1000);
    }
    
    if (tests.dnd) {
        holder.ondragover = function () {
            this.className = 'hover';
            textBeforeDrag(false);
            return false;
        };
        holder.ondragend = function () {
            this.className = '';
            textBeforeDrag(true);
            return false;
        };
        holder.ondrop = function (e) {
            textBeforeDrag(true);
            this.className = '';
            e.preventDefault();
            readfiles(e.dataTransfer.files);
            resetAll();
        }
    } else {
        fileupload.className = 'hidden';
        fileupload.querySelector('input').onchange = function () {
            readfiles(this.files);
        };
    }

Answer 1

In the line:

var xhr = new XMLHttpRequest();

Change for:

var xhr = new ActiveXObject('Msxml2.XMLHTTP');

Now, your file upload work only in Internet Explorer 11.

Maybe, for you file upload to work in all navigator's (that support XMLHTTPRequest), try this:

if('ActiveXObject' in window){
   return new ActiveXObject('Msxml2.XMLHTTP');
}else{
   return new XMLHttpRequest();
}

Source: http://www.purplesquirrels.com.au/2014/06/local-ajax-calls-ie11/.