CodingForums.com - 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:
Code:
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) + "%";

        }

}