Dropzone file upload with drop & click

[Mudsaf]

Hello, i'm trying to create file upload box which is activated by both, file drag & drop and onclick. Currently drag & drop works fine for me, but i have no idea how to implement the feature for the click with automatically uploading the image when file area is changed.

 

Heres my code so far

<script>
$(function() {
	var dropzone = document.getElementById('upload_area');
	
	var upload = function(files) {
		var formData = new FormData(),
		xhr = new XMLHttpRequest(),
		x;
			
		for (x = 0; x < files.length; x++) {
			formData.append('file[]', files[x]);
		}
			
		
		xhr.onload = function() {
			var data = this.responseText;
			console.log(data);
		}
		
		xhr.open('post','script/php/iupload.php?fid=gallery');
		xhr.send(formData);
	}
	
	
	dropzone.ondrop = function(e) {
		e.preventDefault();
		this.className = 'dropzone';
		upload(e.dataTransfer.files);
	}
		
	dropzone.ondragover = function() {
		this.className  = 'dropzone dragover';
		return false;
	}
	
	dropzone.ondragleave = function() {
		this.className = 'dropzone';
		return false;
	}
	
	
});

</script>

<div id='upload_area' class='dropzone'>Drag & Drop or click to upload files</div>

I was able to try dropzone.onclick event, but didn't get anything to work without $("#upload_area").submit(); function. Any tips guides / tutorial videos are welcome, since im trying to improve as developer.

Edited June 5, 2016 by Mudsaf

[justsomeguy]

What exactly do you want to happen when they click? Are you trying to show a file explorer box for them to pick the file?

[Mudsaf]

Yea, just like that & when they have selected the files, automatically upload.

[justsomeguy]

You can call the click event on a regular input file element to show the dialog box. The input file element also has events for when a file is selected. e.g.:

 

document.getElementById('button').addEventListener('click', function() {
  document.getElementById('input').click();
});