added simple drag-and-drop file upload in the file home view

This commit is contained in:
hyung-hwan 2018-08-22 07:55:26 +00:00
parent c7a6ca1d12
commit 78048847a5
2 changed files with 46 additions and 9 deletions

View File

@ -58,7 +58,7 @@ var import_in_progress = false;
var populated_file_obj = []; var populated_file_obj = [];
var populated_file_max = 0; var populated_file_max = 0;
function populate_selected_files () function populate_selected_files_with (files)
{ {
var file_desc = {}; var file_desc = {};
for (var n = 0; n < populated_file_max; n++) for (var n = 0; n < populated_file_max; n++)
@ -71,26 +71,26 @@ function populate_selected_files ()
} }
} }
$('#file_home_new_file_table').empty(); var new_file_table = $('#file_home_new_file_table');
new_file_table.empty();
populated_file_obj = []; populated_file_obj = [];
var f = $('#file_home_new_files').get(0);
var f_no = 0; var f_no = 0;
for (var n = 0; n < f.files.length; n++) for (var n = 0; n < files.length; n++)
{ {
if (f.files[n] != null) if (files[n] != null)
{ {
var desc = file_desc[f.files[n].name]; var desc = file_desc[files[n].name];
if (desc == null) desc = ''; if (desc == null) desc = '';
$('#file_home_new_file_table').append ( new_file_table.append (
codepot_sprintf ( codepot_sprintf (
'<tr id="file_home_new_file_row_%d"><td><a href="#" id="file_home_new_file_cancel_%d" onClick="cancel_out_new_file(%d); return false;"><i class="fa fa-trash"></i></a></td><td>%s</td><td><input type="text" id="file_home_new_file_desc_%d" size="40" value="%s" /></td></tr>', '<tr id="file_home_new_file_row_%d"><td><a href="#" id="file_home_new_file_cancel_%d" onClick="cancel_out_new_file(%d); return false;"><i class="fa fa-trash"></i></a></td><td>%s</td><td><input type="text" id="file_home_new_file_desc_%d" size="40" value="%s" /></td></tr>',
f_no, f_no, f_no, codepot_htmlspecialchars(f.files[n].name), f_no, codepot_addslashes(desc) f_no, f_no, f_no, codepot_htmlspecialchars(files[n].name), f_no, codepot_addslashes(desc)
) )
); );
populated_file_obj[f_no] = f.files[n]; populated_file_obj[f_no] = files[n];
f_no++; f_no++;
} }
} }
@ -98,6 +98,11 @@ function populate_selected_files ()
populated_file_max = f_no; populated_file_max = f_no;
} }
function populate_selected_files ()
{
return populate_selected_files_with ($('#file_home_new_files').get(0).files);
}
function cancel_out_new_file (no) function cancel_out_new_file (no)
{ {
$('#file_home_new_file_row_' + no).remove (); $('#file_home_new_file_row_' + no).remove ();
@ -219,6 +224,32 @@ $(function () {
return false; // prevent the default behavior return false; // prevent the default behavior
} }
); );
var file_drag_event_handler = function(e) { return false; };
var file_drop_event_handler = function(e)
{
var aff = $('#file_home_new_form_div');
aff.dialog('close');
populate_selected_files_with(e.originalEvent.dataTransfer.files);
aff.dialog('open');
return false;
};
var tmp = $('#file_home_content');
tmp.bind('dragstart', file_drag_event_handler);
tmp.bind('dragenter', file_drag_event_handler);
tmp.bind('dragleave', file_drag_event_handler);
tmp.bind('dragover', file_drag_event_handler);
tmp.bind('dragend', file_drop_event_handler);
tmp.bind('drop', file_drop_event_handler);
var tmp = $('#file_home_new_form_div').dialog();
tmp.bind('dragstart', file_drag_event_handler);
tmp.bind('dragenter', file_drag_event_handler);
tmp.bind('dragleave', file_drag_event_handler);
tmp.bind('dragover', file_drag_event_handler);
tmp.bind('dragend', file_drop_event_handler);
tmp.bind('drop', file_drop_event_handler);
<?php endif; ?> <?php endif; ?>
}); });

View File

@ -570,11 +570,17 @@ $(function () {
}; };
var tmp = $('#file_show_content'); var tmp = $('#file_show_content');
tmp.bind('dragstart', file_drag_event_handler);
tmp.bind('dragenter', file_drag_event_handler);
tmp.bind('dragleave', file_drag_event_handler);
tmp.bind('dragover', file_drag_event_handler); tmp.bind('dragover', file_drag_event_handler);
tmp.bind('dragend', file_drop_event_handler); tmp.bind('dragend', file_drop_event_handler);
tmp.bind('drop', file_drop_event_handler); tmp.bind('drop', file_drop_event_handler);
var tmp = $('#file_show_add_file_form').dialog(); var tmp = $('#file_show_add_file_form').dialog();
tmp.bind('dragstart', file_drag_event_handler);
tmp.bind('dragenter', file_drag_event_handler);
tmp.bind('dragleave', file_drag_event_handler);
tmp.bind('dragover', file_drag_event_handler); tmp.bind('dragover', file_drag_event_handler);
tmp.bind('dragend', file_drop_event_handler); tmp.bind('dragend', file_drop_event_handler);
tmp.bind('drop', file_drop_event_handler); tmp.bind('drop', file_drop_event_handler);