SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 71 of 71
  1. #51
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,058
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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
    Code JavaScript:
    xhr.open("POST", $id("upload").action, false);

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

  3. #53
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would also allow them to be created galleries with the same name. What do you suggest?

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

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

  6. #56
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Friend, you can help me replace my progress bar for that in CSS? http://lab.galengidman.com/progress-bars/

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

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

  9. #59
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll be grateful if you could help me with this other problem too. http://www.sitepoint.com/forums/show...ns-black-image

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

  11. #61
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,058
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    /* 
    
    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
    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-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.

  12. #62
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Friend, did not work for me, only the gray background is displayed.

    My filedrag.js:

    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);
    		}
    	}
     
    	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');
    	  }
    	});*/
    });

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

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

  15. #65
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,058
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Okay, try this
    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);
    		}
    	}
     
    	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');
    	  }
    	});*/
    });

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

  17. #67
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,058
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay. I found it. Try this
    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);
    		}
    	}
     
    	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');
    	  }
    	});*/
    });

  18. #68
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The progress bar is filled, but disappears when it reaches 100%. Only the gray background appears.

  19. #69
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,058
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    That is because I misspelled 100percent

    Replace the following line
    Code:
    progress.className = (xhr.status == 200 ? "progress-bar blue progress-100precent" : "progress-bar pink progress-100precent");
    With
    Code:
    progress.className = (xhr.status == 200 ? "progress-bar blue progress-100percent" : "progress-bar pink progress-100percent");

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

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

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


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
  •