/* * 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'; */ function init_file_selector(max_images) { $(document).ready(function () { // add options panel item 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 (typeof 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. if (localStorage.file_dragdrop == 'false' || !(window.URL.createObjectURL && window.File)) return; // multipost not enabled if (typeof max_images == 'undefined') { var max_images = 1; } $('<div class="dropzone-wrap" style="display: none;">'+ '<div class="dropzone" tabindex="0">'+ '<div class="file-hint">'+_('Select/drop/paste files here')+'</div>'+ '<div class="file-thumbs"></div>'+ '</div>'+ '</div>'+ '</div>').prependTo('#upload td'); var files = []; $('#upload_file').remove(); // remove the original file selector $('.dropzone-wrap').css('user-select', 'none').show(); // let jquery add browser specific prefix 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 $container = $('<div>') .addClass('tmb-container') .data('file-ref', file) .append( $('<div>').addClass('remove-btn').html('✖'), $('<div>').addClass('file-tmb'), $('<div>').addClass('tmb-filename').html(fileName) ) .appendTo('.file-thumbs'); var $fileThumb = $container.find('.file-tmb'); if (fileType == 'image') { // if image file, generate thumbnail var objURL = window.URL.createObjectURL(file); $fileThumb.css('background-image', 'url('+ objURL +')'); } else { $fileThumb.html('<span>' + fileExt.toUpperCase() + '</span>'); } } $(document).on('ajax_before_post', function (e, formData) { for (var i=0; i<max_images; i++) { var key = 'file'; if (i > 0) key += i + 1; if (typeof files[i] === 'undefined') break; formData.append(key, files[i]); } }); // clear file queue and UI on success $(document).on('ajax_after_post', function () { files = []; $('.file-thumbs').empty(); }); var dragCounter = 0; var dropHandlers = { dragenter: function (e) { e.stopPropagation(); e.preventDefault(); if (dragCounter === 0) $('.dropzone').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) $('.dropzone').removeClass('dragover'); }, drop: function (e) { e.stopPropagation(); e.preventDefault(); $('.dropzone').removeClass('dragover'); dragCounter = 0; var fileList = e.originalEvent.dataTransfer.files; for (var i=0; i<fileList.length; i++) { addFile(fileList[i]); } } }; // attach handlers $(document).on(dropHandlers); $(document).on('click', '.dropzone .remove-btn', function (e) { e.stopPropagation(); var file = $(e.target).parent().data('file-ref'); getThumbElement(file).remove(); removeFile(file); }); $(document).on('keypress click', '.dropzone', function (e) { e.stopPropagation(); // accept mouse click or Enter if ((e.which != 1 || e.target.className != 'file-hint') && e.which != 13) return; 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); } } }); }