Help with upload progress bar

JavaScript
61

So it seems using that progress bar may be a bit difficult, as the only logical way that I can see on how to use it is to have a really ugly CSS file (where each percentage is defined)

Here is the progress bar stylesheet

/* 

If you have any questions or comments feel free to shoot
be an email at galen@galengidman.com.

Cheers!

*/

/* ============================================================================ */

/* 

This is just some code to make the page look nice, but
it's not at all essential to making the progress bars
work. Feel free to ignore it.

*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);*{margin:0;padding:0}body{width:640px;margin:auto;padding:100px 0 50px 0;background:url(body-bg.png) #222}#container{font:16px/24px 'Droid Serif',Georgia,serif;text-align:center;color:#fff;text-shadow:0 1px 0 #000}h1{font-size:36px;line-height:36px}h3{margin-top:50px}a{color:#fff}#bars-container{margin:50px 0}.progress-bar{float:left;margin:10px 0}.alt{float:right}.clear{clear:both}

/* ============================================================================ */

/*

This is where all the fun begins. From here on the code
is essential to making the progress bars work.

*/

/* progress bar base */
.progress-bar { 
  width: 300px;
  height: 24px;
  padding: 4px;
  background-color: #191919;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  box-shadow: inset 0 1px 2px #000,
    0 1px 0 #2b2b2b;
  -webkit-box-shadow: inset 0 1px 2px #000,
    0 1px 0 #2b2b2b;
  -moz-box-shadow: inset 0 1px 2px #000,
    0 1px 0 #2b2b2b;
}

/* code for the inner (colorful) part of the bar */
.progress-bar:before { 
  content: '';
  display: block;
  position: relative;
  width: 0px;
  height: 24px;
  background: #999;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 
   inset 0 -1px 3px rgba(0, 0, 0, 0.4), 
   0 1px 1px #000;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
}

/* code to stripe the bars */
.progress-bar:after { 
  content: '|||||||||||||';
  display: block;
  position: relative;
  width: 0px;
  height: 24px;
  margin-top: -24px;
  overflow: hidden;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  transform: skewX(-30deg);
  -webkit-transform: skewX(-30deg);
  -moz-transform: skewX(-30deg);
  -o-transform: skewX(-30deg);
  font:bold 120px/80px sans-serif;
  letter-spacing: -6px;
  color: #000;
  opacity: 0.06;
}

.progress-0percent::before {
  width: 0%;
}

.progress-2percent::before {
  width: 2%;
}

.progress-4percent::before {
  width: 4%;
}

.progress-6percent::before {
  width: 6%;
}

.progress-8percent::before {
  width: 8%;
}

.progress-10percent::before {
  width: 10%;
}

.progress-12percent::before {
  width: 12%;
}

.progress-14percent::before {
  width: 14%;
}

.progress-16percent::before {
  width: 16%;
}

.progress-18percent::before {
  width: 18%;
}

.progress-20percent::before {
  width: 20%;
}

.progress-22percent::before {
  width: 22%;
}

.progress-24percent::before {
  width: 24%;
}

.progress-26percent::before {
  width: 26%;
}

.progress-28percent::before {
  width: 28%;
}

.progress-30percent::before {
  width: 30%;
}

.progress-32percent::before {
  width: 32%;
}

.progress-34percent::before {
  width: 34%;
}

.progress-36percent::before {
  width: 36%;
}

.progress-38percent::before {
  width: 38%;
}

.progress-40percent::before {
  width: 40%;
}

.progress-42percent::before {
  width: 42%;
}

.progress-44percent::before {
  width: 44%;
}

.progress-46percent::before {
  width: 46%;
}

.progress-48percent::before {
  width: 48%;
}

.progress-50percent::before {
  width: 50%;
}

.progress-52percent::before {
  width: 52%;
}

.progress-54percent::before {
  width: 54%;
}

.progress-56percent::before {
  width: 56%;
}

.progress-58percent::before {
  width: 58%;
}

.progress-60percent::before {
  width: 60%;
}

.progress-62percent::before {
  width: 62%;
}

.progress-64percent::before {
  width: 64%;
}

.progress-66percent::before {
  width: 66%;
}

.progress-68percent::before {
  width: 68%;
}

.progress-70percent::before {
  width: 70%;
}

.progress-72percent::before {
  width: 72%;
}

.progress-74percent::before {
  width: 74%;
}

.progress-76percent::before {
  width: 76%;
}

.progress-78percent::before {
  width: 78%;
}

.progress-80percent::before {
  width: 80%;
}

.progress-82percent::before {
  width: 82%;
}

.progress-84percent::before {
  width: 84%;
}

.progress-86percent::before {
  width: 86%;
}

.progress-88percent::before {
  width: 88%;
}

.progress-90percent::before {
  width: 90%;
}

.progress-92percent::before {
  width: 92%;
}

.progress-94percent::before {
  width: 94%;
}

.progress-96percent::before {
  width: 96%;
}

.progress-98percent::before {
  width: 98%;
}

.progress-100percent::before {
  width: 100%;
}

.progress-0percent::after {
  width: 0%;
}

.progress-2percent::after {
  width: 2%;
}

.progress-4percent::after {
  width: 4%;
}

.progress-6percent::after {
  width: 6%;
}

.progress-8percent::after {
  width: 8%;
}

.progress-10percent::after {
  width: 10%;
}

.progress-12percent::after {
  width: 12%;
}

.progress-14percent::after {
  width: 14%;
}

.progress-16percent::after {
  width: 16%;
}

.progress-18percent::after {
  width: 18%;
}

.progress-20percent::after {
  width: 20%;
}

.progress-22percent::after {
  width: 22%;
}

.progress-24percent::after {
  width: 24%;
}

.progress-26percent::after {
  width: 26%;
}

.progress-28percent::after {
  width: 28%;
}

.progress-30percent::after {
  width: 30%;
}

.progress-32percent::after {
  width: 32%;
}

.progress-34percent::after {
  width: 34%;
}

.progress-36percent::after {
  width: 36%;
}

.progress-38percent::after {
  width: 38%;
}

.progress-40percent::after {
  width: 40%;
}

.progress-42percent::after {
  width: 42%;
}

.progress-44percent::after {
  width: 44%;
}

.progress-46percent::after {
  width: 46%;
}

.progress-48percent::after {
  width: 48%;
}

.progress-50percent::after {
  width: 50%;
}

.progress-52percent::after {
  width: 52%;
}

.progress-54percent::after {
  width: 54%;
}

.progress-56percent::after {
  width: 56%;
}

.progress-58percent::after {
  width: 58%;
}

.progress-60percent::after {
  width: 60%;
}

.progress-62percent::after {
  width: 62%;
}

.progress-64percent::after {
  width: 64%;
}

.progress-66percent::after {
  width: 66%;
}

.progress-68percent::after {
  width: 68%;
}

.progress-70percent::after {
  width: 70%;
}

.progress-72percent::after {
  width: 72%;
}

.progress-74percent::after {
  width: 74%;
}

.progress-76percent::after {
  width: 76%;
}

.progress-78percent::after {
  width: 78%;
}

.progress-80percent::after {
  width: 80%;
}

.progress-82percent::after {
  width: 82%;
}

.progress-84percent::after {
  width: 84%;
}

.progress-86percent::after {
  width: 86%;
}

.progress-88percent::after {
  width: 88%;
}

.progress-90percent::after {
  width: 90%;
}

.progress-92percent::after {
  width: 92%;
}

.progress-94percent::after {
  width: 94%;
}

.progress-96percent::after {
  width: 96%;
}

.progress-98percent::after {
  width: 98%;
}

.progress-100percent::after {
  width: 100%;
}

/* code for the colors */
.blue:before { 
  background: #099;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));
  background: -moz-linear-gradient(top, #099, #006A6B);
}

.pink:before { 
  background: #f09;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f36), to(#AC2246));
  background: -moz-linear-gradient(top, #f36, #AC2246);
}

.green:before { 
  background: #7EBD01;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));
  background: -moz-linear-gradient(top, #7EBD01, #568201);
}

.orange:before { 
  background: #f90;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f90), to(#f60));
  background: -moz-linear-gradient(top, #f90, #f60);
}

Here is the updated 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();

                var regexRemoveSpaces = /[\\s]+/gi;
                if ($id('titulo').value.replace(regexRemoveSpaces, '').length !== 0) // Do not allow it to be empty or just filled with spaces
                {

                        // process all File objects
                        while (filesThatWereDropped.length > 0) {
                                var f = filesThatWereDropped.pop();
                                UploadFile(f);
                        }
                }else{
                        $('error').style.display = 'block';
                }
        }

        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-bar blue\\" id=\\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\\">" +
                        "</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, "<").replace(/>/g, ">") +
                                        "</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.type == "image/gif" || file.type == "video/avi" && 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));
                                var roundedPercent = Math.round(e.loaded / e.total * 100);
                                if (roundedPercent % 2 == 0)
                                    progress.className = 'progress-bar blue progress-' + roundedPercent + 'percent';
                                progress.innerText = roundedPercent + "%";
                        }, false);

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

                        // start upload
                        xhr.open("POST", $id("upload").action, true);
                        xhr.setRequestHeader("X_FILENAME", file.name);
                        xhr.setRequestHeader("X_TITULO", $id('titulo').value);
                        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();
        }

})();

$(document).ready(function() {
        $('#btnSubmit').click(function() {
                $('#titulo').attr('disabled', 'disabled');
                $(this).attr('disabled', 'disabled');
                $('#filedrag').css('background-color', '#EBEBE4');
        });
        $('#titulo').bind('keyup', function() {
          if ($(this).val().length != 0)
          {
                 $('#btnSubmit').attr('disabled', '');
          }
          else
          {
                 $('#btnSubmit').attr('disabled', 'disabled');
          }
        });
});

I had to remove the filename and the 0% that displayed inside the progress bar as I haven’t found a way to get that to work with this new one you found.

62

Friend, did not work for me, only the gray background is displayed.

My filedrag.js:

(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(
			"<tr>" +
				"<td>"+ file.name +"</td>" +
				"<td>"+ file.size +" bytes</td>" +
				"<td style=\\"float: left; margin-left: 2em;\\" class=\\"progress-bar blue\\" id=\\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\\">" +	
				"</td>" +
			"</tr>"
		);

		// 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, "<").replace(/>/g, ">") +
					"</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.type == "image/gif" || file.type == "video/avi" && 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));
				var roundedPercent = Math.round(e.loaded / e.total * 100);
				if (roundedPercent % 2 == 0)
					progress.className = 'progress-bar blue progress-' + roundedPercent + 'percent';
				progress.innerText = roundedPercent + "%";
			}, false);

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

			// start upload
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.setRequestHeader("X_GALERIA", $id('galeria').value);
			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();
	}

})();

$(document).ready(function() {
	$('#btnSubmit').click(function() {

		$(this).attr('disabled', 'disabled');
		$('#filedrag').css('background-color', '#EBEBE4');
	});
	/*$('#titulo').bind('keyup', function() {
	  if ($(this).val().length != 0)
	  {
		 $('#btnSubmit').attr('disabled', '');
	  }
	  else
	  {
		 $('#btnSubmit').attr('disabled', 'disabled');
	  }
	});*/
});
63

Have you moved it to your website? Got a new URL for it? I need to see what it is doing as I don’t think I’m far off, probably a simple JavaScript error or something.

64

2
Uncaught TypeError: Cannot set property ‘className’ of null filedrag.js:105
(anonymous function) filedrag.js:105

2
Uncaught TypeError: Cannot set property ‘className’ of null filedrag.js:112
xhr.onreadystatechange filedrag.js:112

65

Okay, try this

(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(
			"<tr>" +
				"<td>"+ file.name +"</td>" +
				"<td>"+ file.size +" bytes</td>" +
				"<td style=\\"float: left; margin-left: 2em;\\" class=\\"progress-bar blue\\" id=\\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\\">" +	
				"</td>" +
			"</tr>"
		);
 
		// 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, "<").replace(/>/g, ">") +
					"</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.type == "image/gif" || file.type == "video/avi" && 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));
				var roundedPercent = Math.round(e.loaded / e.total * 100);
				if (roundedPercent % 2 == 0) {
					progress.className = "progress-bar blue progress-" + roundedPercent.toString() + "percent";
				}
				progress.innerText = roundedPercent + "%";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "progress-bar blue progress-100precent" : "progress-bar pink progress-100precent");
				}
			};
 
			// start upload
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.setRequestHeader("X_GALERIA", $id('galeria').value);
			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();
	}
 
})();

$(document).ready(function() {
	$('#btnSubmit').click(function() {

		$(this).attr('disabled', 'disabled');
		$('#filedrag').css('background-color', '#EBEBE4');
	});
	/*$('#titulo').bind('keyup', function() {  
	  if ($(this).val().length != 0)
	  {
		 $('#btnSubmit').attr('disabled', '');
	  }
	  else
	  {
		 $('#btnSubmit').attr('disabled', 'disabled');
	  }
	});*/
});
66

2
Uncaught TypeError: Cannot set property ‘className’ of null filedrag.js:105
(anonymous function) filedrag.js:105
2
Uncaught TypeError: Cannot set property ‘className’ of null filedrag.js:113
xhr.onreadystatechange filedrag.js:113

67

Ah, okay. I found it. Try this

(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(
			"<tr>" +
				"<td>"+ file.name +"</td>" +
				"<td>"+ file.size +" bytes</td>" +
				"<td style=\\"float: left; margin-left: 2em;\\" class=\\"progress-bar blue\\" id=\\"progress_" + file.name.replace(SAFE_FILE_NAME, '') + "\\">" +	
				"</td>" +
			"</tr>"
		);
 
		// 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, "<").replace(/>/g, ">") +
					"</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.type == "image/gif" || file.type == "video/avi" && file.size <= $id("MAX_FILE_SIZE").value) {
 
			// create progress bar
			var progress = $id("progress_" + file.name.replace(SAFE_FILE_NAME, '')); // Updated this line to use the new progress bar location we deinfed in ParseFile
 
 
			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				var roundedPercent = Math.round(e.loaded / e.total * 100);
				if (roundedPercent % 2 == 0) {
					progress.className = "progress-bar blue progress-" + roundedPercent.toString() + "percent";
				}
				progress.innerText = roundedPercent + "%";
			}, false);
 
			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "progress-bar blue progress-100precent" : "progress-bar pink progress-100precent");
				}
			};
 
			// start upload
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.setRequestHeader("X_GALERIA", $id('galeria').value);
			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();
	}
 
})();

$(document).ready(function() {
	$('#btnSubmit').click(function() {

		$(this).attr('disabled', 'disabled');
		$('#filedrag').css('background-color', '#EBEBE4');
	});
	/*$('#titulo').bind('keyup', function() {  
	  if ($(this).val().length != 0)
	  {
		 $('#btnSubmit').attr('disabled', '');
	  }
	  else
	  {
		 $('#btnSubmit').attr('disabled', 'disabled');
	  }
	});*/
});
68

The progress bar is filled, but disappears when it reaches 100%. Only the gray background appears.

69

That is because I misspelled 100percent

Replace the following line

progress.className = (xhr.status == 200 ? "progress-bar blue progress-100precent" : "progress-bar pink progress-100precent");

With

progress.className = (xhr.status == 200 ? "progress-bar blue progress-100percent" : "progress-bar pink progress-100percent");
70

Perfect. Thank you.

Changing the subject, tell me if the WordPress MU you can view the header of the “blog father” in “blogs children”?

71

You should really re-post that question in the Wordpress forum here (as I’m not a Wordpress expert), but a quick google search, came up with [url=http://mu.wordpress.org/forums/topic/16235]this