SitePoint Sponsor

User Tag List

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

    Drag & drop upload after clicking a button

    Friends, I have used this wonderful script to upload images, but now I want to customize it to upload only after clicking a button.

    By default it uploads automatically.

    Can you help?

    Hugs.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Are you sure?

    The article seems to parse the images straight away but doesn't do anything with uploading.
    Do you have a link to your page?

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Are you sure?

    The article seems to parse the images straight away but doesn't do anything with uploading.
    Do you have a link to your page?
    The upload is done automatically. I gostria to upload only after clicking a button.

    You can test on my server: http://blabloo.com.br/upload/

    The images are moved to http://blabloo.com.br/upload/uploads

    Hugs.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Ah, ok.

    All you need to do is remove UploadFile(f); from FileSelectHandler
    and add submitbutton.addEventListener("drop", UploadFile, false); instead of hiding the submit button.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Friend, did as you suggested and it did not work. See:

    Code:
    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);
    		}
    
    	}
    Code:
    function Init() {
    
    		var fileselect = $id("fileselect"),
    			filedrag = $id("filedrag"),
    			submitbutton = $id("submitbutton");
    
    		// 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("drop", UploadFile, false);
    		}
    
    	}

  6. #6
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Change "drop" to "click" on the submitbutton.addEventListener. Submit buttons do not have a drop event

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still did not work. Do a test: http://blabloo.com.br/upload/. No need to change anything in HTML? Is thus:

    HTML Code:
    <form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
    
    <fieldset>
    <legend>HTML File Upload</legend>
    
    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="999999999999999999999999999999999999999999999999999999999999999" />
    <div>
    	<label for="fileselect">Files to upload:</label>
    	<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
    	<div id="filedrag">or drop files here</div>
    </div>
    <div id="submitbutton">
    	<button type="submit">Upload Files</button>
    </div>
    
    </fieldset>
    
    </form>

  8. #8
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Yep, you need to update the HTML too.

    Okay, so the first thing you need to do is put an id attribute on the button. id="btnSubmit" or something similar should work.

    Then change this line
    Code:
    submitbutton.addEventListener("click", UploadFile, false); //was previously using drop
    To
    Code:
    $id('btnSubmit').addEventListener("click", UploadFile, false); // needs to match the id attribute you placed on the button

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It did not work. It is as if the javascript does not exist.

  10. #10
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Alright, sorry, I missed a lot in the JavaScript code, as UploadFile requires you to pass in which file to upload.

    So you need a new function
    Code:
    
    	// file selection
    	function UploadFiles(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++) {
    			UploadFile(f);
    		}
    
    	}
    Then switch the button click event to call UploadFiles instead of UploadFile (I'm not 100% certain this will work either, as I don't know if the event will contain the target files or not).

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still did not work, but I think it is that way.

  12. #12
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Okay, last idea (for now), as I'm doing this without any php server available to me for testing.

    Add the following variable to the top of your script (as shown below):
    Code:
    (function() {
      var filesThatWereDropped = new Array();

    Update your ParseFile function to the following:
    Code:
    	// 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);
    		}
    
    	}
    Update your UploadFiles function to the following:
    Code:
    	function UploadFiles(e) {
    
    		// process all File objects
                    while (filesThatWereDropped.length > 0) {
                            var f = filesThatWereDropped.pop();
    			UploadFile(f);
    		}
    
    	}

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It did not work.

    I created an FTP user for you and send via private message.

    Thanks for the help.

  14. #14
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Hey what do you know! I was very close to solving this. Just had the filesThatWereDropped.push in the wrong spot.

    Here is the working JavaScript
    Code:
    /*
    filedrag.js - HTML5 File Drag & Drop demonstration
    Featured on SitePoint.com
    Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
    */
    (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) {
    
    		// 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
    			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();
    	}
    
    
    })();

  15. #15
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Meant to put this in my first response, but you may want to add
    Code:
    		e.stopPropagation();
    		e.preventDefault();
    to the UploadFiles function so it doesn't redirect to upload.php

  16. #16
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How strange it did not work. http://blabloo.com.br/upload/

  17. #17
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    I haven't uploaded the new JavaScript file to your server (as for some reason, I can access your website). So you will need to update the JavaScript file (I can't even get to http://blabloo.com.br/)

  18. #18
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything worked perfectly, except the progress bar that is only satisfied when the upload finishes.

    Thank you

  19. #19
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Right, that is where you need to add
    Code:
    e.stopPropagation();
    		e.preventDefault();
    To the UploadFiles(e) function, like so:
    Code:
    	function UploadFiles(e) {
    
    		e.stopPropagation();
    		e.preventDefault();
    		// process all File objects
    		while (filesThatWereDropped.length > 0) {
    			var f = filesThatWereDropped.pop();
    			UploadFile(f);
    		}
    
    	}

  20. #20
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This problem is solved, had not seen this piece of code. The problem now is different.

  21. #21
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you help me on that too, my friend?

    Thank you in advance.

  22. #22
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Sure, but you really didn't specify what the problem is, so I am unsure what it is I am helping you with. If it is different than your original problem, I'd also post it as a new thread on the forum.

  23. #23
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I drag an image, the progress bar is only satisfied when the upload is finished. Before the bar is filled according to the progress of the upload normally.

  24. #24
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,223
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    Are you dropping 1 or 2 images? I dropped a 1.5 MB image on there and the progress bar did two steps. I am also on a very fast connection so I had to use a large image to see if the progress bar was really doing its job.

  25. #25
    SitePoint Zealot
    Join Date
    Jul 2012
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right, it is now normal.

    Another thing I would do is display the progress bar next to the name and file size within the div messages. I tried, but failed.

    Can you help me with that? Last I ask him for help.


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
  •