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

[devnull69]

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"

[rnd me]

Originally Posted by Gatsu

will not grow with green goo, you know?

lol! best. question. ever. lovin it.

[Gatsu]

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?

[Gatsu]

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