Help with upload progress bar

[cpradio]

The best option is to run the uploads synchronously. So that two photos couldn't be uploaded at the exact same time. Which can be done by changing your JavaScript to

xhr.open("POST", $id("upload").action, false);

[Felipe Turquize]

So is bad, because all the progress bars are filled at the same time, the end of the process.

When doubts about the title, any suggestions?

[Felipe Turquize]

I would also allow them to be created galleries with the same name. What do you suggest?

[cpradio]

The multiple categories with the same name will be a problem and your code actually won't support it, it will put the images in the category that already has that name.

As for how to prevent the duplicate category names from being recreated, I'm still thinking about it and would suggest posting a new thread in the PHP forum about it. As you will get more responses there.

[Felipe Turquize]

The question of the title was pretty easy to solve. I took the session_id () in the upload page and went to the upload.php (I think with md5 () is better, right?).

All that remains is to solve that problem of files with the same size, which are upados simultaneously and create the gallery twice. = /

[Felipe Turquize]

Friend, you can help me replace my progress bar for that in CSS? http://lab.galengidman.com/progress-bars/

[cpradio]

Hey Felipe, I am sure I can help you achieve that, however, I am out of town this weekend so my resources are very limited. I should be able to devote more time on Monday when I return.

[Felipe Turquize]

Thank you.

[Felipe Turquize]

I'll be grateful if you could help me with this other problem too. http://www.sitepoint.com/forums/show...ns-black-image

[Felipe Turquize]

The problem of image resizing is resolved. I did not realize that was generating the md5 several times.

Now I need to customize the progress bar only.

[cpradio]

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, "&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.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.

[Felipe Turquize]

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, "&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.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');
	  }
	});*/
});

[cpradio]

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.

[Felipe Turquize]

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

[cpradio]

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, "&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.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');
	  }
	});*/
});

[Felipe Turquize]

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

[cpradio]

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, "&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.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');
	  }
	});*/
});

[Felipe Turquize]

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

[cpradio]

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");

[Felipe Turquize]

Perfect. Thank you.

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

[cpradio]

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 this