Drag & drop upload after clicking a button

**Felipe Turquize** · Jul 4, 2012 08:34

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.

**markbrown4** · Jul 5, 2012 01:29

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?

**Felipe Turquize** · Jul 5, 2012 02:15

Originally Posted by markbrown4

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.

**markbrown4** · Jul 5, 2012 05:13

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.

**Felipe Turquize** · Jul 5, 2012 05:35

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

	}

**cpradio** · Jul 5, 2012 05:37

Change "drop" to "click" on the submitbutton.addEventListener. Submit buttons do not have a drop event

**Felipe Turquize** · Jul 5, 2012 05:50

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>

**cpradio** · Jul 5, 2012 06:56

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

**Felipe Turquize** · Jul 5, 2012 07:16

It did not work. It is as if the javascript does not exist.

**cpradio** · Jul 5, 2012 07:29

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

**Felipe Turquize** · Jul 5, 2012 07:42

Still did not work, but I think it is that way.

**cpradio** · Jul 5, 2012 08:00

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

	}

**Felipe Turquize** · Jul 5, 2012 08:15

It did not work.

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

Thanks for the help.

**cpradio** · Jul 5, 2012 11:00

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


})();

**cpradio** · Jul 5, 2012 11:01

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

**Felipe Turquize** · Jul 5, 2012 11:09

How strange it did not work. http://blabloo.com.br/upload/

**cpradio** · Jul 5, 2012 11:11

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

**Felipe Turquize** · Jul 5, 2012 11:15

Everything worked perfectly, except the progress bar that is only satisfied when the upload finishes.

Thank you

**cpradio** · Jul 5, 2012 11:22

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

	}

**Felipe Turquize** · Jul 5, 2012 11:31

This problem is solved, had not seen this piece of code. The problem now is different.

**Felipe Turquize** · Jul 7, 2012 01:23

Can you help me on that too, my friend?

Thank you in advance.

**cpradio** · Jul 7, 2012 05:05

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.

**Felipe Turquize** · Jul 8, 2012 18:32

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.

**cpradio** · Jul 9, 2012 05:02

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.

**Felipe Turquize** · Jul 10, 2012 16:55

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.

User Tag List

Thread: Drag & drop upload after clicking a button

Thread Tools

Display

Drag & drop upload after clicking a button

Bookmarks

Bookmarks

Posting Permissions