Allow Ctrl-V uploads from details and upload view

This commit is contained in:
Christoph Haas 2021-02-20 22:23:10 +01:00
parent 44a7f31bd4
commit 0f20a53554
3 changed files with 82 additions and 62 deletions

View file

@ -54,3 +54,70 @@ upload_form_files_selected = function() {
$('#file-form').submit(); // start upload
}
};
// Handle Ctrl-V to paste an image directly
function upload_paste_handler(event)
{
console.log("paste!");
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
// /*Make Sure Only One File is Copied*/
// if (items.length != 1) {
// return;
// }
for (var i = 0 ; i < items.length ; i++)
{
var item = items[i];
console.log(item);
console.log("item size="+item.size);
if (!item.type.startsWith('image/'))
{
console.log("Skipping file with type "+item.type);
continue
}
console.log(item.type);
var file = item.getAsFile();
console.log(file);
upload_file_with_ajax(file);
}
}
function upload_file_with_ajax(file)
{
if (file==null)
{
console.log("File was null. Strange.");
display_error('Maybe the image was too large.');
return;
}
var formData = new FormData();
formData.append('file', file);
$.ajax(ajax_upload_url,
{
type: 'POST',
contentType: false,
processData: false,
data: formData,
//dataType: 'json',
error: function(xhr, txt, err)
{
console.log("AJAX file upload returned error: "+txt+" / "+err);
display_error('Did you copy a proper image into your clipboard?');
},
success: function(res)
{
console.log("AJAX file upload was ok");
// Go back to details page to show the new upload
window.location.replace(after_upload_url);
}
});
}
function display_error(msg)
{
$('#messages').html(
'<div class="callout alert alert-callout-subtle radius">Sorry, pasting did not work.' + msg + '</div>')
}

View file

@ -70,3 +70,13 @@
/ Right column contains metadata about the package.
/ #metadata is the anchor for this sticky container.
= render(partial: 'details_rightbox', locals: {pkg: @package})
javascript:
// Handle Ctrl-V to paste an image directly
document.onpaste = upload_paste_handler;
// Where to send POST requests for uploads
var ajax_upload_url = '#{{upload_receive_path(format: :json)}}';
// Where to go to after a successful image upload
var after_upload_url = '#{{package_path(@package)}}';

View file

@ -68,67 +68,10 @@ javascript:
$(document).ready(upload_form_init);
// Handle Ctrl-V to paste an image directly
document.onpaste = function (event)
{
console.log("paste!");
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
document.onpaste = upload_paste_handler;
// /*Make Sure Only One File is Copied*/
// if (items.length != 1) {
// return;
// }
// Where to send POST requests for uploads
var ajax_upload_url = '#{{upload_receive_path(format: :json)}}';
for (var i = 0 ; i < items.length ; i++)
{
var item = items[i];
console.log(item);
console.log("item size="+item.size);
if (!item.type.startsWith('image/'))
{
console.log("Skipping file with type "+item.type);
continue
}
console.log(item.type);
var file = item.getAsFile();
console.log(file);
upload_file_with_ajax(file);
}
}
function upload_file_with_ajax(file)
{
if (file==null)
{
console.log("File was null. Strange.");
display_error('Maybe the image was too large.');
return;
}
var formData = new FormData();
formData.append('file', file);
$.ajax('#{{upload_receive_path(format: :json)}}' ,
{
type: 'POST',
contentType: false,
processData: false,
data: formData,
//dataType: 'json',
error: function(xhr, txt, err)
{
console.log("AJAX file upload returned error: "+txt+" / "+err);
display_error('Did you copy a proper image into your clipboard?');
},
success: function(res)
{
console.log("AJAX file upload was ok");
// Go back to details page to show the new upload
window.location.replace("#{{package_path(@package)}}");
}
});
}
function display_error(msg)
{
$('#messages').html(
'<div class="callout alert alert-callout-subtle radius">Sorry, pasting did not work.' + msg + '</div>')
}
// Where to go to after a successful image upload
var after_upload_url = '#{{package_path(@package)}}';