From 0f20a5355400f8be479c51f04ee65d790fc06b5b Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Sat, 20 Feb 2021 22:23:10 +0100 Subject: [PATCH] Allow Ctrl-V uploads from details and upload view --- app/assets/javascripts/application.js | 67 +++++++++++++++++++++++++++ app/views/packages/details.slim | 10 ++++ app/views/packages/upload.slim | 67 ++------------------------- 3 files changed, 82 insertions(+), 62 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 1a4a0b7..e06d12f 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -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( + '
Sorry, pasting did not work.' + msg + '
') +} diff --git a/app/views/packages/details.slim b/app/views/packages/details.slim index b4e99cb..e0996be 100644 --- a/app/views/packages/details.slim +++ b/app/views/packages/details.slim @@ -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)}}'; diff --git a/app/views/packages/upload.slim b/app/views/packages/upload.slim index bc1a82a..db94a2b 100644 --- a/app/views/packages/upload.slim +++ b/app/views/packages/upload.slim @@ -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( - '
Sorry, pasting did not work.' + msg + '
') - } \ No newline at end of file + // Where to go to after a successful image upload + var after_upload_url = '#{{package_path(@package)}}';