This commit is contained in:
8chan 2015-03-19 20:24:25 -07:00
commit 3e648e617f
2 changed files with 18 additions and 17 deletions

View File

@ -26,7 +26,7 @@ $(document).ready(function () {
}); });
// disabled by user, or incompatible browser. // disabled by user, or incompatible browser.
if (localStorage.file_dragdrop == 'false' || !(window.FileReader && window.File)) if (localStorage.file_dragdrop == 'false' || !(window.URL.createObjectURL && window.File))
return; return;
// multipost not enabled // multipost not enabled
@ -59,9 +59,9 @@ function addThumb(file) {
var fileName = (file.name.length < 24) ? file.name : file.name.substr(0, 22) + '…'; var fileName = (file.name.length < 24) ? file.name : file.name.substr(0, 22) + '…';
var fileType = file.type.split('/')[0]; var fileType = file.type.split('/')[0];
var fileExt = file.type.split('/')[1]; var fileExt = file.type.split('/')[1];
var $fileThumb; var $container = $('<div>');
$('.file-thumbs').append($('<div>') $container
.addClass('tmb-container') .addClass('tmb-container')
.data('file-ref', file) .data('file-ref', file)
.append( .append(
@ -69,21 +69,14 @@ function addThumb(file) {
$('<div>').addClass('file-tmb'), $('<div>').addClass('file-tmb'),
$('<div>').addClass('tmb-filename').html(fileName) $('<div>').addClass('tmb-filename').html(fileName)
) )
); .appendTo($('.file-thumbs'));
var $fileThumb = $container.find('.file-tmb');
if (fileType == 'image') { if (fileType == 'image') {
// if image file, generate thumbnail // if image file, generate thumbnail
var reader = new FileReader(); var objURL = window.URL.createObjectURL(file);
$fileThumb.css('background-image', 'url('+ objURL +')');
reader.onloadend = function () {
var dataURL = reader.result;
var $fileThumb = getThumbElement(file).find('.file-tmb');
$fileThumb.css('background-image', 'url('+ dataURL +')');
};
reader.readAsDataURL(file);
} else { } else {
$fileThumb = getThumbElement(file).find('.file-tmb');
$fileThumb.html('<span>' + fileExt.toUpperCase() + '</span>'); $fileThumb.html('<span>' + fileExt.toUpperCase() + '</span>');
} }
} }
@ -142,13 +135,21 @@ var dropHandlers = {
$(document).on(dropHandlers, '.dropzone'); $(document).on(dropHandlers, '.dropzone');
$(document).on('click', '.dropzone .remove-btn', function (e) { $(document).on('click', '.dropzone .remove-btn', function (e) {
e.stopPropagation();
var file = $(e.target).parent().data('file-ref'); var file = $(e.target).parent().data('file-ref');
getThumbElement(file).remove();
removeFile(file); removeFile(file);
$(e.target).parent().remove();
}); });
$(document).on('click', '.dropzone .file-hint', function (e) { $(document).on('keypress click', '.dropzone, .dropzone .file-hint', function (e) {
e.stopPropagation();
// accept mosue click or Enter
if (e.which != 1 || e.which != 13)
return;
var $fileSelector = $('<input type="file" multiple>'); var $fileSelector = $('<input type="file" multiple>');
$fileSelector.on('change', function (e) { $fileSelector.on('change', function (e) {

View File

@ -92,7 +92,7 @@
<td> <td>
<input type="file" name="file" id="upload_file"> <input type="file" name="file" id="upload_file">
<div class="dropzone-wrap" style="display: none;"> <div class="dropzone-wrap" style="display: none;">
<div class="dropzone"> <div class="dropzone" tabindex="0">
<div class="file-hint">Select/drop/paste files here</div> <div class="file-hint">Select/drop/paste files here</div>
<div class="file-thumbs"></div> <div class="file-thumbs"></div>
</div> </div>