Help with upload progress bar

Perfect! Thank you. :slight_smile:

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. :slight_smile:

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

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

It would be something like this?


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

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:

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

This! Very good.

I think it would be safer to “liberate” the area to upload files and submit button only if the title of the gallery is entered. It is very difficult to do this with jQuery?

You just need to update the following

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

	}

To


	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
	
		var regexRemoveSpaces = /[\\s]+/gi;
		if ($id('id_of_gallery_input').value.replace(regexRemoveSpaces, '').length !== '') // 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);
			}
		}

	}

It did not work. Is not it better to just change the css class?

Okay, maybe I’m not understanding what you want to do. The code I gave you should stop the upload button from working so long as the Gallery input field is empty. Once the gallery field is entered, the upload button should function.

Yes, you understood correctly, but did not work. :slight_smile:

Even without entering any value in the input, you can drop files and click the submit button.

Sorry, I forgot I did a .length on the field instead of just referencing the value. Below is the corrected code.

	function UploadFiles(e) {
		e.stopPropagation();
		e.preventDefault();
 
		var regexRemoveSpaces = /[\\s]+/gi;
		if ($id('id_of_gallery_input').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);
			}
		}
 
	}

Also, I’d probably add another div or something to the page with an id of ‘error’, so you can tell the user what went wrong. Using your CSS, have it set to display: none and then in the JavaScript, add an else statement to run the following

$('error').style.display = 'block';

Now it worked. I have to enable the submit button only if the input has any value?

To do that you will want to use an onkeyup event on your gallery textbox that then sents the .disabled property of the button to ‘’ when there is text entered, otherwise, set it to ‘disabled’ when there is no text entered

And how do I? pod eme help? My conhecimenro in jquery and javascript is null. :slight_smile:

With jQuery you can do something like so:


$('#titulo').bind('keyup', function() {  
  if ($(this).val().length != 0)
  {
     $('#btnSubmit').attr('disabled', '');
  }
  else
  {
     $('#btnSubmit').attr('disabled', 'disabled');
  }
});

You would also want to disable the button in your HTML so when the page is first loaded, it is automatically disabled by adding disabled=“disabled” to it.

Now it’s perfect, I made some more changes. Thank you. :slight_smile:

I noticed that after clicking the submit button, if you drop a file over the current upload is interrupted. Is to prevent files from being released after clicking the submit button?

Please note, this does not replace your jQuery code, so keep that logic, this only replaces the logic behind your upload, but 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();
 
		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\\" 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, "<").replace(/>/g, ">") +
					"</pre>"
				);
			}
			reader.readAsText(file);
		}
 
		filesThatWereDropped.push(file);
 
	}
 
 
	// upload JPEG files
	function UploadFile(file) {
		$id("filedrag").removeEventListener("drop", FileSelectHandler, false);

		// 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));
				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");
					$id("filedrag").addEventListener("drop", FileSelectHandler, false);
				}
			};
 
			// 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();
	}
 
})();

It removes the drop event listener when uploading and re-enables it once the upload completes.

It did not work, the upload is still broken.