Allow Ctrl-V uploads from details and upload view
This commit is contained in:
parent
44a7f31bd4
commit
0f20a53554
3 changed files with 82 additions and 62 deletions
|
|
@ -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>')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}}';
|
||||
|
|
|
|||
|
|
@ -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)}}';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue