JavaScript: file uploader progress bars

[Gatsu]

Hi, I am trying to make a script that will upload files and show a progress bar and I've come so far that I can upload the file but the progress bar that appear for each file will not grow with green goo, you know?

Please help!

This is a drop box version:

window.onload = function()
{
	var dropzone = document.getElementById("dropArea");
	dropzone.ondragover = dropzone.ondragenter = function(event)
	{
		event.stopPropagation();
		event.preventDefault();
	}

	dropzone.ondrop = function(event)
	{
		event.stopPropagation();
		event.preventDefault();

		var filesArray = event.dataTransfer.files;
		for (i=0; i<filesArray.length; i++)
		{
			var progressDiv = document.getElementById('progressDiv');
			var pbar = document.createElement('progress');
			var br = document.createElement('br');
			var report = document.createElement('div');
			
			pbar.setAttribute('id', 'progressBar' + i);
			pbar.setAttribute('value', '0');
			pbar.setAttribute('max', '100');
			report.setAttribute('id', 'report' + i)
			
			progressDiv.appendChild(pbar);
			progressDiv.appendChild(br);
			progressDiv.appendChild(report);
			progressDiv.appendChild(br);
			
			sendFile(filesArray[i]);
		}
	}
}


function sendFile(file)
{
	var uri = "upload.php";
	var xhr = new XMLHttpRequest();
	var fd = new FormData();

	xhr.upload.addEventListener("progress", progressFunction, false);
	
	xhr.open("POST", uri, true);
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4 && xhr.status == 200)
		{
			// Handle response.
			//alert(xhr.responseText);
			var percentageDiv = document.getElementById("report");
			percentageDiv.innerHTML = 'Transfer complete';
		}
	}
	fd.append('myFile', file);
	// Initiate a multipart/form-data upload
	xhr.send(fd);
}


function progressFunction(evt)
{
	var progressBar = document.getElementById('progressBar');
	var percentageDiv = document.getElementById('report');
	while(evt.lengthComputable)
	{
		progressBar.max = evt.total;
		progressBar.value = evt.loaded;
		percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
	}
}