Help with upload progress bar

**Felipe Turquize** · Jul 11, 2012 13:20

Friends, as you can see this link, some friends here from the forum helped me to adapt this script to upload files only after clicking a button.

Now I want the progress bar is displayed next to the name and file size.

You can see the system in operation here. Can you help?

Hugs.

**cpradio** · Jul 21, 2012 17:40

Just want a bit of clarification, but you want the progress bar next to the name and file size instead of behind the name and file size correct? Again, just looking for clarification so I can ensure you get what you want

**Felipe Turquize** · Jul 21, 2012 18:38

After clicking "Upload files" looks like this: http://i.imgur.com/wXLL9.jpg

I want to make so when user drag and loose files: http://i.imgur.com/5Ug1H.jpg

My script:

HTML Code:

(function() {
	var filesThatWereDropped = new Array();
	
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}


	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}


	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}


	// file selection
	function FileSelectHandler(e) {

		// cancel event and hover styling
		FileDragHover(e);

		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;

		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}

	}
	
	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
		
		// process all File objects
		while (filesThatWereDropped.length > 0) {
			var f = filesThatWereDropped.pop();
			UploadFile(f);
		}

	}


	// output file information
	function ParseFile(file) {

		Output(
			"<p>File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</p>"
		);



		// display text
		if (file.type.indexOf("text") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output(
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
		
		filesThatWereDropped.push(file);

	}


	// upload JPEG files
	function UploadFile(file) {

		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return

		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {

			// create progress bar
			var o = $id("progress");
			var progress = o.appendChild(document.createElement("p"));
			progress.appendChild(document.createTextNode("upload " + file.name));


			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
			}, false);

			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};

			// start upload
			//'upload.php?titulo=teste'
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);

		}

	}


	// initialize
	function Init() {

		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("btnSubmit");

		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);

		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {

			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";

			submitbutton.addEventListener("click", UploadFiles, false);
		}

	}

	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}


})();

**Felipe Turquize** · Jul 22, 2012 15:01

Could understand what I mean? hehehe

**cpradio** · Jul 22, 2012 15:34

Yes, I just haven't had time to work on it yet. I hope to get to it tomorrow.

**Felipe Turquize** · Jul 22, 2012 15:37

No problem. Thank you for your help.

**cpradio** · Jul 23, 2012 04:39

Okay, try the following. I placed comments in the code where I made changes explaining why I made those changes.

I don't have an easy way to test it, so once you have it up on your server, if it isn't working, let me know so I can see what is going on.

Code javascript:

(function() {
	var filesThatWereDropped = new Array();
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
 
		// process all File objects
		while (filesThatWereDropped.length > 0) {
			var f = filesThatWereDropped.pop();
			UploadFile(f);
		}
 
	}
 
	var SAFE_FILE_NAME = '/[^a-z0-9]+/gi'; // Added this line to define the acceptable characters to use for the id of the new progress bar location
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<p>File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</p>" +
			//Added this line to create the new progress bar location
			"<p style=\"display:inline-block;\" id=\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\"></p>"
		);
 
 
 
		// display text
		if (file.type.indexOf("text") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output(
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
 
		filesThatWereDropped.push(file);
 
	}
 
 
	// upload JPEG files
	function UploadFile(file) {
 
		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return
 
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
 
			// create progress bar
			var o = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
			var progress = o.appendChild(document.createElement("p"));
			progress.appendChild(document.createTextNode("upload " + file.name));
 
 
			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};
 
			// start upload
			//'upload.php?titulo=teste'
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
 
		}
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("btnSubmit");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			submitbutton.addEventListener("click", UploadFiles, false);
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

**Felipe Turquize** · Jul 23, 2012 06:15

After clicking the submit button, was thus:

http://i.imgur.com/gs3zw.jpg

**cpradio** · Jul 23, 2012 06:56

Wohoo! I was very close
Here is the updated JavaScript

Code javascript:

(function() {
	var filesThatWereDropped = new Array();
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
 
		// process all File objects
		while (filesThatWereDropped.length > 0) {
			var f = filesThatWereDropped.pop();
			UploadFile(f);
		}
 
	}
 
	var SAFE_FILE_NAME = new RegExp("[^a-z0-9]+", "gi"); // Added this line to define the acceptable characters to use for the id of the new progress bar location
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<p style=\"float: left;\">File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</p>" +
			//Added this line to create the new progress bar location
			"<p style=\"float: left;\" class=\"progress\" id=\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\"></p>" +
			"<br style=\"clear:left;\" />"
		);
 
 
 
		// display text
		if (file.type.indexOf("text") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output(
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
 
		filesThatWereDropped.push(file);
 
	}
 
 
	// upload JPEG files
	function UploadFile(file) {
 
		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return
 
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
 
			// create progress bar
			var o = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
			var progress = o.appendChild(document.createElement("p"));
			progress.appendChild(document.createTextNode("upload " + file.name));
 
 
			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};
 
			// start upload
			//'upload.php?titulo=teste'
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
 
		}
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("btnSubmit");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			submitbutton.addEventListener("click", UploadFiles, false);
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

Then you also need to update your style.css
Change

Code css:

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
	background: #eee url("progress.png") 100% 0 repeat-y;
}
 
#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}
 
#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

To

Code css:

.progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
	background: #eee url("progress.png") 100% 0 repeat-y;
}
 
.progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}
 
.progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

**Felipe Turquize** · Jul 23, 2012 07:07

It worked in parts. Gostraia also that even before clicking the submit button, the progress bar appeared: http://i.imgur.com/5Ug1H.jpg

**cpradio** · Jul 23, 2012 07:15

Okay, so you want the bar to appear, but be at 0% before the button is clicked right? That shouldn't be too difficult.

**Felipe Turquize** · Jul 23, 2012 07:18

Exactly.

Thank you.

**cpradio** · Jul 23, 2012 08:34

Okay, try the below code:

Code javascript:

(function() {
	var filesThatWereDropped = new Array();
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
 
		// process all File objects
		while (filesThatWereDropped.length > 0) {
			var f = filesThatWereDropped.pop();
			UploadFile(f);
		}
 
	}
 
	var SAFE_FILE_NAME = new RegExp("[^a-z0-9]+", "gi"); // Added this line to define the acceptable characters to use for the id of the new progress bar location
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<p style=\"float: left;\">File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</p>" +
			//Added this line to create the new progress bar location
			"<p style=\"float: left;\" class=\"progress\" id=\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\">" +
			"<p id=\"upload_" + file.name.replace(SAFE_FILE_NAME, '') + "\">0%</p>" +
			"</p>" +
			"<br style=\"clear:left;\" />"
		);
 
 
 
		// display text
		if (file.type.indexOf("text") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output(
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
 
		filesThatWereDropped.push(file);
 
	}
 
 
	// upload JPEG files
	function UploadFile(file) {
 
		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return
 
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
 
			// create progress bar
			var o = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
			var progress = $id("upload_" + file.name.replace(SAFE_FILE_NAME, '')); // o.appendChild(document.createElement("p"));
			//progress.appendChild(document.createTextNode("upload " + file.name));
 
 
			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
				progress.innerText = pc + "%";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};
 
			// start upload
			//'upload.php?titulo=teste'
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
 
		}
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("btnSubmit");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			submitbutton.addEventListener("click", UploadFiles, false);
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

**Felipe Turquize** · Jul 23, 2012 08:39

Appears only the percentage, and when I click the submit button nothing happens. see: http://blabloo.com.br/upload/

**cpradio** · Jul 23, 2012 08:43

Okay, the percentage is going down instead of up (interesting, but I can fix that). You need to update your style.css however, otherwise, you won't see the progress bar background.

Here is the updated code to handle the progress text.

Code javascript:

(function() {
	var filesThatWereDropped = new Array();
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
 
		// process all File objects
		while (filesThatWereDropped.length > 0) {
			var f = filesThatWereDropped.pop();
			UploadFile(f);
		}
 
	}
 
	var SAFE_FILE_NAME = new RegExp("[^a-z0-9]+", "gi"); // Added this line to define the acceptable characters to use for the id of the new progress bar location
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<p style=\"float: left;\">File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</p>" +
			//Added this line to create the new progress bar location
			"<p style=\"float: left; margin-left: 2em;\" class=\"progress\" id=\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\">" +
			"<p id=\"upload_" + file.name.replace(SAFE_FILE_NAME, '') + "\">0%</p>" +
			"</p>" +
			"<br style=\"clear:left;\" />"
		);
 
 
 
		// display text
		if (file.type.indexOf("text") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output(
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
 
		filesThatWereDropped.push(file);
 
	}
 
 
	// upload JPEG files
	function UploadFile(file) {
 
		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return
 
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
 
			// create progress bar
			var o = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
			var progress = $id("upload_" + file.name.replace(SAFE_FILE_NAME, '')); // o.appendChild(document.createElement("p"));
			//progress.appendChild(document.createTextNode("upload " + file.name));
 
 
			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
				progress.innerText = (e.loaded / e.total * 100) + "%";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};
 
			// start upload
			//'upload.php?titulo=teste'
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
 
		}
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("btnSubmit");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			submitbutton.addEventListener("click", UploadFiles, false);
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

**Felipe Turquize** · Jul 23, 2012 09:18

I did so, but it did not work: "<p id=\"upload_" + file.name.replace(SAFE_FILE_NAME, '') + "\" class=\"progress\" id=\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\">0%</p>"

Its showing the percentage of "full"? Atualemente is thus eg 21.773737728785132%

**cpradio** · Jul 23, 2012 09:27

Okay, I changed some of the HTML output, as I think the problem is with nested paragraphs.

I also rounded the percentage.

Code JavaScript:

(function() {
	var filesThatWereDropped = new Array();
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
 
		// process all File objects
		while (filesThatWereDropped.length > 0) {
			var f = filesThatWereDropped.pop();
			UploadFile(f);
		}
 
	}
 
	var SAFE_FILE_NAME = new RegExp("[^a-z0-9]+", "gi"); // Added this line to define the acceptable characters to use for the id of the new progress bar location
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<div style=\"float: left;\">File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</div>" +
			//Added this line to create the new progress bar location
			"<div style=\"float: left; margin-left: 2em;\" class=\"progress\" id=\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\">" +
			"<p id=\"upload_" + file.name.replace(SAFE_FILE_NAME, '') + "\">0%</p>" +
			"</div>" +
			"<br style=\"clear:left;\" />"
		);
 
 
 
		// display text
		if (file.type.indexOf("text") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output(
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
 
		filesThatWereDropped.push(file);
 
	}
 
 
	// upload JPEG files
	function UploadFile(file) {
 
		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return
 
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
 
			// create progress bar
			var o = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
			var progress = $id("upload_" + file.name.replace(SAFE_FILE_NAME, '')); // o.appendChild(document.createElement("p"));
			//progress.appendChild(document.createTextNode("upload " + file.name));
 
 
			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
				progress.innerText = Math.Round(e.loaded / e.total * 100) + "%";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};
 
			// start upload
			//'upload.php?titulo=teste'
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
 
		}
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("btnSubmit");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			submitbutton.addEventListener("click", UploadFiles, false);
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

**Felipe Turquize** · Jul 23, 2012 09:37

Sensational. The only problem now is that the percentage is always at 0%.

**cpradio** · Jul 23, 2012 09:54

My bad, change Math.Round to Math.round (lowercase 'r'). Then the percentage will work

**cpradio** · Jul 23, 2012 10:33

Originally Posted by cpradio

My bad, change Math.Round to Math.round (lowercase 'r'). Then the percentage will work

For those that would like the code with the correction

Code JavaScript:

(function() {
	var filesThatWereDropped = new Array();
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
 
		// process all File objects
		while (filesThatWereDropped.length > 0) {
			var f = filesThatWereDropped.pop();
			UploadFile(f);
		}
 
	}
 
	var SAFE_FILE_NAME = new RegExp("[^a-z0-9]+", "gi"); // Added this line to define the acceptable characters to use for the id of the new progress bar location
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<div style=\"float: left;\">File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</div>" +
			//Added this line to create the new progress bar location
			"<div style=\"float: left; margin-left: 2em;\" class=\"progress\" id=\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\">" +
			"<p id=\"upload_" + file.name.replace(SAFE_FILE_NAME, '') + "\">0%</p>" +
			"</div>" +
			"<br style=\"clear:left;\" />"
		);
 
 
 
		// display text
		if (file.type.indexOf("text") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output(
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
 
		filesThatWereDropped.push(file);
 
	}
 
 
	// upload JPEG files
	function UploadFile(file) {
 
		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return
 
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "application/vnd.rn-realmedia-vbr" || file.type == "application/pdf" || file.type == "video/x-ms-wmv" || file.type == "video/x-flv" || file.type == "image/png" || file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
 
			// create progress bar
			var o = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
			var progress = $id("upload_" + file.name.replace(SAFE_FILE_NAME, '')); // o.appendChild(document.createElement("p"));
			//progress.appendChild(document.createTextNode("upload " + file.name));
 
 
			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
				progress.innerText = Math.round(e.loaded / e.total * 100) + "%";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};
 
			// start upload
			//'upload.php?titulo=teste'
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
 
		}
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("btnSubmit");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			submitbutton.addEventListener("click", UploadFiles, false);
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

**Felipe Turquize** · Jul 23, 2012 10:41

Perfect! Thank you.

**Felipe Turquize** · Jul 24, 2012 15:44

Friend, one thing I forgot to ask: What is the best way, after clicking the submit button, record in the database the value typed in an input. This value would be the name of the gallery.

In PHP I can do, I'm asking about Javascript.

**cpradio** · Jul 24, 2012 16:18

I would think you would do this in PHP shortly after the move_uploaded_file() statement.

**Felipe Turquize** · Jul 24, 2012 16:23

Well this is not my question. It's about JavaScript.

It would be something like this?

HTML Code:

xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.setRequestHeader("X_TITLE", titleGallery);
xhr.send(file);

**cpradio** · Jul 25, 2012 02:46

Oh, I see. I mis-understood. So you will have a text box on the page where the user enters a gallery name?

Then yes, you are on a good start, but you will likely want to change your code to this:

Code javascript:

xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.setRequestHeader("X_TITLE", $id('id_of_input_field').value);
xhr.send(file);

User Tag List

Thread: Help with upload progress bar

Thread Tools

Display

Help with upload progress bar

Bookmarks

Bookmarks

Posting Permissions