Dropzone for drag and drop uploads

For some users, drag and drop is easier or more intuitive than using a file selector to upload files. If you'd like to allow both methods, no problem -- just read on to find out how to set up a dropzone which can also open a file selector when clicked.

There are three templates we'll need to change at Admin -> Themes -> Manage Templates. First, in the "File Uploader" template, replace the section

<div class="fileupload-buttonbar">
<div class="fileupload-buttons">

<span class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" id="uploaderfiles" multiple>
</span>
<span class="fileupload-process"></span>
</div>
<div class="fileupload-progress fade" style="display:none">

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-extended"> </div>
</div>
</div>

with

<div class="dropzones" id="dropzone">
<br><br>Drag and drop files here, or click to choose files
<input type="file" name="files[]" id="uploaderfiles" multiple style="display: none;">
</div>
<div class="fileupload-buttonbar">
<div class="fileupload-progress fade" style="display:none">

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-extended"> </div>
</div>
</div>

Next, in the "Additional Document Ready Function Content" template, add this:

$("#dropzone").on("click",function(){// here when click on dropzone div
$("#dropzone input[type='file']").trigger('click');// then trigger input type=file change event
});
$("#dropzone input[type='file']").on("click",function(e){ e.stopPropagation(); });

$(document).bind('dragover', function (e) {
var dropZone = $('#dropzone'),
timeout = window.dropZoneTimeout;
if (!timeout) {
dropZone.addClass('in');
} else {
clearTimeout(timeout);
}
var found = false,
node = e.target;
do {
if (node === dropZone[0]) {
found = true;
break;
}
node = node.parentNode;
} while (node != null);
if (found) {
dropZone.addClass('hover');
} else {
dropZone.removeClass('hover');
}
window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null;
dropZone.removeClass('in hover');
}, 100);
});

Finally, in your stylesheet at the bottom, add

.dropzones
{
background: #FFFFFF;
background-position: center;
width: 100%;
height: 190px;
text-align: center;
font-weight: bold;
font-size: 150%;
border: 3px dashed #AACCFF;
cursor: pointer;
}

#dropzone.in
{
width: 100%;
height: 190px;
line-height: 200px;
font-size: larger;
}
#dropzone.hover
{
background: #EEEEEE;
background-position: center;
}
#dropzone.fade
{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 1;
}

Change the colors and other details on .dropzones above as you desire to fit your theme.

That's all. Check any page where you upload files and you'll now see a dropzone box which you can drag files to, or which you can click anywhere inside to get a file chooser.