file uploader progress bars

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 (int 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) + "%";
}
}

With this line

var progressBar = document.getElementById('progressBar');

you are trying to access a <progress> element with id="progressBar", but with this code

pbar.setAttribute('id', 'progressBar' + i);

you created the <progress> elements with id="progressBar0", "progressBar1" etc. respectively. So there is no <progress> element with id="progressBar". The same can be applied to the <div> with id="report"

will not grow with green goo, you know?
lol! best. question. ever. lovin it.

so I have to pass i to function progressFunction(evt)

but now the script just decided not to work at all, when i drop files they open in my browser hmm... I changed nothing!

my html is simple like this:


<script type="text/javascript" src="dropbox.js"></script>
<div id="dropArea">Drop Area</div>
<div id="progressDiv"></div>


Might anybody know why this happened all of a sudden?

Can it be because I'm now using notepad++ to edit this script?