SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 71
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with upload progress bar

    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.

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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();
    	}
    
    
    })();

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could understand what I mean? hehehe

  5. #5
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Yes, I just haven't had time to work on it yet. I hope to get to it tomorrow.

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. Thank you for your help.

  7. #7
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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();
    	}
     
     
    })();

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After clicking the submit button, was thus:

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

  9. #9
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked in parts. Gostraia also that even before clicking the submit button, the progress bar appeared: http://i.imgur.com/5Ug1H.jpg

  11. #11
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Okay, so you want the bar to appear, but be at 0% before the button is clicked right? That shouldn't be too difficult.

  12. #12
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly.

    Thank you.

  13. #13
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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();
    	}
     
     
    })();

  14. #14
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Appears only the percentage, and when I click the submit button nothing happens. see: http://blabloo.com.br/upload/

  15. #15
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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();
    	}
     
     
    })();

  16. #16
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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%

  17. #17
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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();
    	}
     
     
    })();

  18. #18
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sensational. The only problem now is that the percentage is always at 0%.

  19. #19
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    My bad, change Math.Round to Math.round (lowercase 'r'). Then the percentage will work

  20. #20
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    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();
    	}
     
     
    })();

  21. #21
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thank you.

  22. #22
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    I would think you would do this in PHP shortly after the move_uploaded_file() statement.

  24. #24
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);

  25. #25
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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);


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •