XMLHttpRequest (a)synchronous file upload

csrss

Hi guys. I do not know JS / AJAX / Web tech, I just need plain and simple mechanism for multiple files upload. Currently I have this (taken from the net actually):

function uploader(place, targetPHP)
{
// Function drop file
this.drop = function(event)
{
event.preventDefault();
var dt = event.dataTransfer;
var files = dt.files;

	var progressBar = document.querySelector('progress');
	for (var i = 0; i < files.length; i++) 
	{
		var file = files\[i\];
	
		xhr = new XMLHttpRequest();
		xhr.open('POST', targetPHP, false);
		xhr.setRequestHeader('UP-FILENAME', file.name);
		xhr.setRequestHeader('UP-SIZE', file.size);
		xhr.setRequestHeader('UP-TYPE', file.type);
		xhr.onreadystatechange = function()
		{
			if(this.readyState == 4 && this.status == 200)
			{
				progressBar.value = Math.round((i \* 100) / files.length);
			}
		}
		xhr.send(file); 
	}
	progressBar.value = 100;
	setTimeout("location.reload(true);", 2000);
}

// The inclusion of the event listeners (DragOver and drop)
this.uploadPlace =  document.getElementById(place);
this.uploadPlace.addEventListener("dragover", function(event)
{
	event.stopPropagation(); 
	event.preventDefault();
}, true);
this.uploadPlace.addEventListener("drop", this.drop, false);

}

This thing uploading files synchronously one by one but it makes a browser, such as IE for example, freezes. I need to modify this script the way it will be doing same but asynchronously. So it will upload one file, then in onreadystatechange event it will trigger next file upload. This is because my server is a 2 threaded application, which processes XMLHttpRequest one by one. Basically, I got no idea how to modify this script that way because I do not know js / ajax at all. I was trying to collect files into an array, which was a class member, and then process them but uploader just stopped after first file upload. Thanks in advance.

011011010110000101100011011010000110100101101110 0110010101110011

csrss

Responding to my own question but it seems like I was messing around with this keyword in an inappropriate way. Correct code for sequential async file uploader goes like this:

function XMLHttpUploader(place, targetPHP)
{
upload = function (currentArray, arrayTotalSize) {
var currentFile = currentArray.shift();

    if (currentFile) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', targetPHP, true);
        xhr.setRequestHeader('UP-FILENAME', currentFile.name);
        xhr.setRequestHeader('UP-SIZE', currentFile.size);
        xhr.setRequestHeader('UP-TYPE', currentFile.type);
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var progressBar = document.querySelector('progress');
                if (progressBar) {
                    progressBar.value = Math.round(((arrayTotalSize - currentArray.length) \* 100) / arrayTotalSize);
                }

                upload(currentArray, arrayTotalSize);
            }
        }
        xhr.onerror = function () {
            alert('File transfer failed!');
        }
        xhr.send(currentFile);
    }
    else {
        var progressBar = document.querySelector('progress');
        if (progressBar) {
            progressBar.value = 100;
            setTimeout("location.reload(true);", 2000);
        }
    }
}

// Function drop file
this.drop = function(event) 
{
    event.preventDefault();
	var currentArray = new Array();
	for (var i = 0; i < event.dataTransfer.files.length; i++) {
	    currentArray.push(event.dataTransfer.files\[i\]);
	}
	upload(currentArray, currentArray.length);
}

// The inclusion of the event listeners (DragOver and drop)
this.uploadPlace =  document.getElementById(place);
this.uploadPlace.addEventListener("dragover", function(event)
{
	event.stopPropagation(); 
	event.preventDefault();
}, true);
this.uploadPlace.addEventListener("drop", this.drop, false);

}

011011010110000101100011011010000110100101101110 0110010101110011