Help with upload progress bar

[Felipe Turquize]

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?

[cpradio]

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

[Felipe Turquize]

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

[cpradio]

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.

[Felipe Turquize]

Yes, you understood correctly, but did not work.

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

[cpradio]

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

[cpradio]

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

[Felipe Turquize]

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

[cpradio]

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

[Felipe Turquize]

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

[cpradio]

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.

[Felipe Turquize]

Now it's perfect, I made some more changes. Thank you.

[Felipe Turquize]

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?

[cpradio]

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, "&lt;").replace(/>/g, "&gt;") +
					"</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.

[Felipe Turquize]

It did not work, the upload is still broken.

[cpradio]

Okay, I don't know why that didn't work, but I tried several different ideas, none of which are stopping this behavior. Only thing left is to hide the drop zone so they can't drop another file... This is very odd. I'm not sure if this is even worth messing with, or just leaving it as is. How often do you think users will drag another item on the form while uploading one?

[Felipe Turquize]

You're right, let's leave it at that. Thanks for the help.

[Felipe Turquize]

Friend in time of need to upload the gallery to record only once in the "galerias" and the image in "imagens". The problem is that if I upload two images, the gallery's records twice in mysql.

upload.php

// Function that writes the gallery.
function gravaGaleria($titulo){
    $sql = mysql_query("INSERT INTO galerias (`id`, `titulo`) VALUES ('', '$titulo')");
}

gravaGaleria($_SERVER['HTTP_X_TITLE']); // 

if ($fn) {

    // AJAX call
    file_put_contents(
        'uploads/' . $_SERVER['HTTP_X_TITLE'] . '_' . criptografa($fn) . '.' . extensao($fn),
        file_get_contents('php://input')
    );
    echo "$fn uploaded";
    exit();

}
else {

    // form submit
    $files = $_FILES['fileselect'];

    foreach ($files['error'] as $id => $err) {
        if ($err == UPLOAD_ERR_OK) {
            $fn = $files['name'][$id];
            move_uploaded_file(
                $files['tmp_name'][$id],
                'uploads/' . $fn
            );
            echo "<p>File $fn uploaded.</p>";
        }
    }

} 

How do I fix this?

[cpradio]

The first thing you should do in gravaGaleria is SELECT COUNT(*) FROM galerias WHERE `titulo` = '$titulo', check if it returns 0, then INSERT it, otherwise, do nothing.

Secondly, you should use mysql_real_escape_string when passing $_SERVER['HTTP_X_TITLE'] to gravaGaleria to prevent SQL Injections.

[Felipe Turquize]

I did so but did not work:

function gravaGaleria($titulo){
    $sql = mysql_query("SELECT * FROM galerias WHERE `titulo` = '$titulo'");
    if (mysql_num_rows($sql) <= 1)
    {
        $grava = mysql_query("INSERT INTO galerias (`id`, `titulo`) VALUES ('', '$titulo')");
    }
}

gravaGaleria($_SERVER['HTTP_X_TITLE']); 

[cpradio]

You put <= when you want <. In short, you told it, if you are 1 or 0, insert a record. You only want to insert a record when 0.

[Felipe Turquize]

The problem is that if the files are very light, they recorded the same time. If I upload two files, record twice.

[Felipe Turquize]

Now I need to record the id of the gallery in each of the images, but records only the first. See: http://i.imgur.com/mkoAN.jpg

$sql = mysql_query("SELECT * FROM galerias WHERE `titulo` = '".$_SERVER['HTTP_X_TITULO']."'");
    if (mysql_num_rows($sql) == 0)
    {
        $grava = mysql_query("INSERT INTO galerias (`id`, `titulo`) VALUES ('', '".$_SERVER['HTTP_X_TITULO']."')");
        $id = mysql_insert_id();
    }
    $grava_imagens = mysql_query("INSERT INTO uploads (`id`, `galeria`, `imagem`) VALUES ('', '$id', '".$_SERVER['HTTP_X_TITULO'] . '_' . criptografa($fn) . '.' . extensao($fn)."')"); 

I think this solution has not, right?

[cpradio]

You need to grab the pre-existing id.

    $id = null;
    $sql = mysql_query("SELECT id FROM galerias WHERE `titulo` = '".mysql_real_escape_string($_SERVER['HTTP_X_TITULO'])."'"); 
    if (mysql_num_rows($sql) == 0) 
    { 
        $grava = mysql_query("INSERT INTO galerias (`id`, `titulo`) VALUES ('', '".mysql_real_escape_string($_SERVER['HTTP_X_TITULO'])."')"); 
        $id = mysql_insert_id(); 
    } 
    else
    {
      $row = mysql_fetch_assoc($sql);
      $id = $row[0]['id'];
    }
    $grava_imagens = mysql_query("INSERT INTO uploads (`id`, `galeria`, `imagem`) VALUES ('', '$id', '".mysql_real_escape_string($_SERVER['HTTP_X_TITULO']) . '_' . criptografa($fn) . '.' . extensao($fn)."')"); 

[Felipe Turquize]

It worked, the only problem now is that I quoted earlier.

The problem is that if the files are very light, they recorded the same time. If I upload two files, record twice.

If I upload two files the same size, two galleries will be recorded.

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