initial commit file-selector.js
This commit is contained in:
marktaiwan
czaks
parent
0f1d506586
commit
48cd7438a1
187
js/file-selector.js
Normal file
187
js/file-selector.js
Normal file
@ -0,0 +1,187 @@
|
||||
/*
|
||||
* file-selector.js - Add support for drag and drop file selection, and paste from clipbboard on supported browsers.
|
||||
*
|
||||
* Usage:
|
||||
* $config['additional_javascript'][] = 'js/jquery.min.js';
|
||||
* $config['additional_javascript'][] = 'js/file-selector.js';
|
||||
*/
|
||||
|
||||
onready(function () {
|
||||
|
||||
// add options panel item
|
||||
$(document).ready(function () {
|
||||
if (window.Options && Options.get_tab('general')) {
|
||||
Options.extend_tab('general', '<label id="file-drag-drop"><input type="checkbox">' + _('Drag and drop file selection') + '</label>');
|
||||
|
||||
$('#file-drag-drop>input').on('click', function() {
|
||||
if ($('#file-drag-drop>input').is(':checked')) {
|
||||
localStorage.file_dragdrop = 'true';
|
||||
} else {
|
||||
localStorage.file_dragdrop = 'false';
|
||||
}
|
||||
});
|
||||
|
||||
if (localStorage.file_dragdrop === 'undefined') localStorage.file_dragdrop = 'true';
|
||||
if (localStorage.file_dragdrop === 'true') $('#file-drag-drop>input').prop('checked', true);
|
||||
}
|
||||
});
|
||||
|
||||
// disabled by user, or incompatible browser.
|
||||
// fallback to old
|
||||
if (localStorage.file_dragdrop == 'false' || !(window.FileReader || window.File)) {
|
||||
$('.dropzone-wrap').remove();
|
||||
$('#upload_file').show();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// multipost not enabled
|
||||
if (typeof max_images == 'undefined') {
|
||||
var max_images = 1;
|
||||
}
|
||||
|
||||
var files = [];
|
||||
|
||||
function addFile(file) {
|
||||
if (files.length == max_images)
|
||||
return;
|
||||
|
||||
files.push(file);
|
||||
addThumb(file);
|
||||
}
|
||||
|
||||
function removeFile(file) {
|
||||
files.splice(files.indexOf(file), 1);
|
||||
}
|
||||
|
||||
function getThumbElement(file) {
|
||||
return $('.tmb-container').filter(function(){return($(this).data('file-ref')==file);});
|
||||
}
|
||||
|
||||
function addThumb(file) {
|
||||
|
||||
var fileName = (file.name.length < 24) ? file.name : file.name.substr(0, 22) + '…';
|
||||
var fileType = file.type.split('/')[0];
|
||||
var fileExt = file.type.split('/')[1];
|
||||
var $fileThumb;
|
||||
|
||||
$('.file-thumbs').append($('<div>')
|
||||
.addClass('tmb-container')
|
||||
.data('file-ref', file)
|
||||
.append(
|
||||
$('<div>').addClass('remove-btn').html('✖'),
|
||||
$('<div>').addClass('file-tmb'),
|
||||
$('<div>').addClass('tmb-filename').html(fileName)
|
||||
)
|
||||
);
|
||||
|
||||
if (fileType == 'image') {
|
||||
// if image file, generate thumbnail
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onloadend = function () {
|
||||
var dataURL = reader.result;
|
||||
var $fileThumb = getThumbElement(file).find('.file-tmb');
|
||||
$fileThumb.css('background-image', 'url('+ dataURL +')');
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
$fileThumb = getThumbElement(file).find('.file-tmb');
|
||||
$fileThumb.html('<span>' + fileExt.toUpperCase() + '</span>');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('ajax_before_post', function (e, formData) {
|
||||
var i;
|
||||
|
||||
for (i=0; i<max_images; i++) {
|
||||
var key = 'file';
|
||||
if (i > 0) key += i + 1;
|
||||
formData.append(key, files[i]);
|
||||
}
|
||||
|
||||
// clear file queue and UI
|
||||
files = [];
|
||||
$('.file-thumbs').empty();
|
||||
});
|
||||
|
||||
var dragCounter = 0;
|
||||
var dropHandlers = {
|
||||
dragenter: function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (dragCounter === 0) $(this).addClass('dragover');
|
||||
dragCounter++;
|
||||
},
|
||||
dragover: function (e) {
|
||||
// needed for webkit to work
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
dragleave: function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
dragCounter--;
|
||||
if (dragCounter === 0) $(this).removeClass('dragover');
|
||||
},
|
||||
drop: function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
$(this).removeClass('dragover');
|
||||
dragCounter = 0;
|
||||
|
||||
var fileList = e.originalEvent.dataTransfer.files;
|
||||
for (var i=0; i<fileList.length; i++) {
|
||||
addFile(fileList[i]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$('.dropzone').css('user-select', 'none') // let jquery add browser specific prefix
|
||||
|
||||
// attach handlers
|
||||
$(document).on(dropHandlers, '.dropzone');
|
||||
|
||||
$(document).on('click', '.dropzone .remove-btn', function (e) {
|
||||
var file = $(e.target).parent().data('file-ref');
|
||||
|
||||
removeFile(file);
|
||||
$(e.target).parent().remove();
|
||||
});
|
||||
|
||||
$(document).on('click', '.dropzone .file-hint', function (e) {
|
||||
var $fileSelector = $('<input type="file" multiple>');
|
||||
|
||||
$fileSelector.on('change', function (e) {
|
||||
if (this.files.length > 0) {
|
||||
for (var i=0; i<this.files.length; i++) {
|
||||
addFile(this.files[i]);
|
||||
}
|
||||
}
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
$fileSelector.click();
|
||||
});
|
||||
|
||||
$(document).on('paste', function (e) {
|
||||
var clipboard = e.originalEvent.clipboardData;
|
||||
if (typeof clipboard.items != 'undefined' && clipboard.items.length != 0) {
|
||||
|
||||
//Webkit
|
||||
for (var i=0; i<clipboard.items.length; i++) {
|
||||
if (clipboard.items[i].kind != 'file')
|
||||
continue;
|
||||
|
||||
//convert blob to file
|
||||
var file = new File([clipboard.items[i].getAsFile()], 'ClipboardImage.png', {type: 'image/png'});
|
||||
addFile(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user