SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 71
  1. #26
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  2. #27
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,071
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    You just need to update the following
    Code JavaScript:
    	function UploadFiles(e) {
    		e.stopPropagation();
    		e.preventDefault();
     
    		// process all File objects
    		while (filesThatWereDropped.length > 0) {
    			var f = filesThatWereDropped.pop();
    			UploadFile(f);
    		}
     
    	}

    To
    Code JavaScript:
    	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);
    			}
    		}
     
    	}

  3. #28
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It did not work. Is not it better to just change the css class?

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

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

  6. #31
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,071
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I forgot I did a .length on the field instead of just referencing the value. Below is the corrected code.
    Code JavaScript:
    	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);
    			}
    		}
     
    	}

  7. #32
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,071
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    $('error').style.display = 'block';

  8. #33
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now it worked. I have to enable the submit button only if the input has any value?

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

  10. #35
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And how do I? pod eme help? My conhecimenro in jquery and javascript is null.

  11. #36
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,071
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    With jQuery you can do something like so:
    Code JavaScript:
    $('#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.

  12. #37
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now it's perfect, I made some more changes. Thank you.

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

  14. #39
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,071
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Please note, this does not replace your jQuery code, so keep that logic, this only replaces the logic behind your upload, but try this
    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();
     
    		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.

  15. #40
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It did not work, the upload is still broken.

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

  17. #42
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right, let's leave it at that. Thanks for the help.

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

    PHP Code:
    // 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?

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

  20. #45
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did so but did not work:

    PHP Code:
    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']); 

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

  22. #47
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that if the files are very light, they recorded the same time. If I upload two files, record twice.

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

    PHP Code:
    $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?

  24. #49
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,071
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    You need to grab the pre-existing id.

    PHP Code:
        $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)."')"); 

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


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
  •