From 4c96232bf3083cd5e4398021f35c23d16df72c69 Mon Sep 17 00:00:00 2001 From: Vidit Date: Sat, 4 May 2019 21:22:25 +0530 Subject: [PATCH] fixed image drag and drop bug (#5657) --- app/assets/javascripts/dragdrop.js | 201 +++++++++++++++++++++-------- app/views/comments/_form.html.erb | 15 ++- 2 files changed, 157 insertions(+), 59 deletions(-) diff --git a/app/assets/javascripts/dragdrop.js b/app/assets/javascripts/dragdrop.js index e300c3b2bb2..0cff723f4e6 100644 --- a/app/assets/javascripts/dragdrop.js +++ b/app/assets/javascripts/dragdrop.js @@ -24,6 +24,7 @@ jQuery(document).ready(function() { $('#side-dropzone').removeClass('hover'); }); $('.dropzone').bind('drop',function(e) { + $D.selected = $(e.target.closest('div.comment-form-wrapper')).eq(0); e.preventDefault(); $E.initialize({}); }); @@ -31,70 +32,158 @@ jQuery(document).ready(function() { e.preventDefault(); }); - $('.dropzone').fileupload({ - url: "/images", - paramName: "image[photo]", - dropZone: $('.dropzone'), - dataType: 'json', - formData: { - 'uid':$D.uid, - 'nid':$D.nid - }, - start: function(e) { + $('.dropzone').each(function () { + $(this).fileupload({ + url: "/images", + paramName: "image[photo]", + dropZone: $(this), + dataType: 'json', + formData: { + 'uid':$D.uid, + 'nid':$D.nid + }, + start: function(e) { + elem = $(this).closest('div.comment-form-wrapper').eq(0); + elem.find('#create_progress').eq(0).show(); + elem.find('#create_uploading').eq(0).show(); + elem.find('#create_prompt').eq(0).hide(); + elem.find('.dropzone').eq(0).removeClass('hover'); + }, + done: function (e, data) { + elem = $(e.target.closest('div.comment-form-wrapper')).eq(0); + // $D.selected = elem; + elem.find('#create_progress').hide(); + elem.find('#create_uploading').hide(); + elem.find('#create_prompt').show(); + var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1] + var file_url = data.result.url.split('?')[0] - ($D.selected).find('#create_progress').eq(0).show(); - ($D.selected).find('#create_uploading').eq(0).show(); - ($D.selected).find('#create_prompt').eq(0).hide(); - ($D.selected).find('.dropzone').eq(0).removeClass('hover'); - }, - done: function (e, data) { - ($D.selected).find('#create_progress').hide(); - ($D.selected).find('#create_uploading').hide(); - ($D.selected).find('#create_prompt').show(); - var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1] - var file_url = data.result.url.split('?')[0] + var file_type + if (['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'png', 'PNG'].includes(extension)) + file_type = 'image' + else if (['csv', 'CSV'].includes(extension)) + file_type = 'csv' - var file_type - if (['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'png', 'PNG'].includes(extension)) - file_type = 'image' - else if (['csv', 'CSV'].includes(extension)) - file_type = 'csv' + switch (file_type) { + case 'image': + orig_image_url = file_url + '?s=o' // size = original + $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', {'newline': true, 'fallback': data.result['filename']}) // on its own line; see /app/assets/js/editor.js + break + case 'csv': + $E.wrap('[graph:' + file_url + ']', {'newline': true, 'fallback': data.result['filename']}) + break + default: + $E.wrap(' ','', {'newline': true, 'fallback': data.result['filename'].replace(/[()]/g , "-")}) // on its own line; see /app/assets/js/editor.js + } - switch (file_type) { - case 'image': - orig_image_url = file_url + '?s=o' // size = original - $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', {'newline': true, 'fallback': data.result['filename']}) // on its own line; see /app/assets/js/editor.js - break - case 'csv': - $E.wrap('[graph:' + file_url + ']', {'newline': true, 'fallback': data.result['filename']}) - break - default: - $E.wrap(' ','', {'newline': true, 'fallback': data.result['filename'].replace(/[()]/g , "-")}) // on its own line; see /app/assets/js/editor.js - } + // here append the image id to the wiki edit form: + if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(',')) + else $('#node_images').val(data.result.id) - // here append the image id to the wiki edit form: - if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(',')) - else $('#node_images').val(data.result.id) + // eventual handling of multiple files; must add "multiple" to file input and handle on server side: + //$.each(data.result.files, function (index, file) { + // $('

').text(file.name).appendTo(document.body); + //}); + }, - // eventual handling of multiple files; must add "multiple" to file input and handle on server side: - //$.each(data.result.files, function (index, file) { - // $('

').text(file.name).appendTo(document.body); - //}); - }, + // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options + fileuploadfail: function(e,data) { - // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options - fileuploadfail: function(e,data) { - - }, - progressall: function (e, data) { - var progress = parseInt(data.loaded / data.total * 100, 10); - $('#create_progress-bar').css( - 'width', - progress + '%' - ); - } + }, + progressall: function (e, data) { + var progress = parseInt(data.loaded / data.total * 100, 10); + $('#create_progress-bar').css( + 'width', + progress + '%' + ); + } + }); }); + // $('.dropzone').off('drop').on('drop', function (e) { + // e.preventDefault(); + // elem = $(e.target.closest('div.comment-form-wrapper')).find('.dropzone').eq(0); + // $D.selected = $(e.target.closest('div.comment-form-wrapper')); + // uploadImage(elem); + // }); + // + // $('input[type="file"]').off().on('change', function (e) { + // e.preventDefault(); + // elem = $(e.target.closest('div.comment-form-wrapper')).find('.dropzone').eq(0); + // uploadImage(elem); + // }); + // + // + // function uploadImage(elem) { + // elem.fileupload({ + // url: "/images", + // paramName: "image[photo]", + // dropZone: $('.dropzone'), + // dataType: 'json', + // formData: { + // 'uid':$D.uid, + // 'nid':$D.nid + // }, + // start: function(e) { + // if($D.selected) { + // ($D.selected).find('#create_progress').eq(0).show(); + // ($D.selected).find('#create_uploading').eq(0).show(); + // ($D.selected).find('#create_prompt').eq(0).hide(); + // ($D.selected).find('.dropzone').eq(0).removeClass('hover'); + // } + // }, + // done: function (e, data) { + // if($D.selected) { + // ($D.selected).find('#create_progress').hide(); + // ($D.selected).find('#create_uploading').hide(); + // ($D.selected).find('#create_prompt').show(); + // } + // var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1] + // var file_url = data.result.url.split('?')[0] + // + // var file_type + // if (['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'png', 'PNG'].includes(extension)) + // file_type = 'image' + // else if (['csv', 'CSV'].includes(extension)) + // file_type = 'csv' + // + // switch (file_type) { + // case 'image': + // orig_image_url = file_url + '?s=o' // size = original + // $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', {'newline': true, 'fallback': data.result['filename']}) // on its own line; see /app/assets/js/editor.js + // break + // case 'csv': + // $E.wrap('[graph:' + file_url + ']', {'newline': true, 'fallback': data.result['filename']}) + // break + // default: + // $E.wrap(' ','', {'newline': true, 'fallback': data.result['filename'].replace(/[()]/g , "-")}) // on its own line; see /app/assets/js/editor.js + // } + // + // // here append the image id to the wiki edit form: + // if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(',')) + // else $('#node_images').val(data.result.id) + // + // // eventual handling of multiple files; must add "multiple" to file input and handle on server side: + // //$.each(data.result.files, function (index, file) { + // // $('

').text(file.name).appendTo(document.body); + // //}); + // }, + // + // // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options + // fileuploadfail: function(e,data) { + // + // }, + // progressall: function (e, data) { + // var progress = parseInt(data.loaded / data.total * 100, 10); + // $('#create_progress-bar').css( + // 'width', + // progress + '%' + // ); + // } + // }); + // } + + $('#side-dropzone').fileupload({ url: "/images", paramName: "image[photo]", diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 2cfbb231e07..b4778823d34 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -52,7 +52,9 @@ <%= t('comments._form.upload_image') %> -

+ + +

@@ -66,8 +68,15 @@ $D = { uid: <%= current_user.uid if current_user %>, type: 'comment' + }; + + function handleClick() { + $D.selected = $(event.target.closest('div.comment-form-wrapper')); + console.log($D.selected); + $E.refresh(); } - $('#input_label').click(function(e){ + + $('#input_label').click(function(e){ $E.initialize({}); }); @@ -88,7 +97,7 @@ <%= t('comments._form.cancel') %> <% else %> - <%= t('comments._form.preview') %> + <%= t('comments._form.preview') %> <% end %>