chaas/debshots
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Allow Ctrl-V uploads from details and upload view

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

67
app/assets/javascripts/application.js
View file

@ -54,3 +54,70 @@ upload_form_files_selected = function() {
$('#file-form').submit(); // start upload $('#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>')
}

10
app/views/packages/details.slim
View file

@ -70,3 +70,13 @@
/ Right column contains metadata about the package. / Right column contains metadata about the package.
/ #metadata is the anchor for this sticky container. / #metadata is the anchor for this sticky container.
= render(partial: 'details_rightbox', locals: {pkg: @package}) = 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)}}';

67
app/views/packages/upload.slim
View file

@ -68,67 +68,10 @@ javascript:
$(document).ready(upload_form_init); $(document).ready(upload_form_init);
// Handle Ctrl-V to paste an image directly // Handle Ctrl-V to paste an image directly
document.onpaste = function (event) document.onpaste = upload_paste_handler;
{
console.log("paste!");
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
// /*Make Sure Only One File is Copied*/ // Where to send POST requests for uploads
// if (items.length != 1) { var ajax_upload_url = '#{{upload_receive_path(format: :json)}}';
// return;
// }
for (var i = 0 ; i < items.length ; i++) // Where to go to after a successful image upload
{ var after_upload_url = '#{{package_path(@package)}}';
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>')
}