48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
var App = App || {};
|
|
App.Controls = App.Controls || {};
|
|
|
|
App.Controls.FileDropper = function(
|
|
$fileInput,
|
|
allowMultiple,
|
|
onChange,
|
|
jQuery) {
|
|
|
|
var $dropDiv = jQuery('<div class="file-handler"></div>');
|
|
$dropDiv.html((allowMultiple ? 'Drop files here!' : 'Drop file here!') + '<br/>Or just click on this box.');
|
|
$dropDiv.insertBefore($fileInput);
|
|
$fileInput.attr('multiple', allowMultiple);
|
|
$fileInput.hide();
|
|
|
|
$fileInput.change(function(e) {
|
|
addFiles(this.files);
|
|
});
|
|
|
|
$dropDiv.on('dragenter', function(e) {
|
|
$dropDiv.addClass('active');
|
|
}).on('dragleave', function(e) {
|
|
$dropDiv.removeClass('active');
|
|
}).on('dragover', function(e) {
|
|
e.preventDefault();
|
|
}).on('drop', function(e) {
|
|
e.preventDefault();
|
|
addFiles(e.originalEvent.dataTransfer.files);
|
|
}).on('click', function(e) {
|
|
$fileInput.show().focus().trigger('click').hide();
|
|
$dropDiv.addClass('active');
|
|
});
|
|
|
|
function getFiles() {
|
|
return files;
|
|
}
|
|
|
|
function addFiles(files) {
|
|
$dropDiv.removeClass('active');
|
|
if (!allowMultiple && files.length > 1) {
|
|
alert('Cannot select multiple files.');
|
|
return;
|
|
}
|
|
onChange(files);
|
|
}
|
|
}
|
|
|
|
App.DI.register('fileDropper', App.Controls.FileDropper);
|