Skip to content

Commit

Permalink
fixed image drag and drop bug (publiclab#5657)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ViditChitkara @digitaldina
ViditChitkara authored and digitaldina committed May 12, 2019
1 parent 73a9233 commit 4c96232
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 59 deletions.
201 changes: 145 additions & 56 deletions app/assets/javascripts/dragdrop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,77 +24,166 @@ 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({});
});
$('#side-dropzone').bind('drop',function(e) {
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('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'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('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'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) {
// $('<p/>').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) {
// $('<p/>').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('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'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) {
// // $('<p/>').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]",
Expand Down
15 changes: 12 additions & 3 deletions app/views/comments/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@
<i class="fa fa-upload"></i>
<a><%= t('comments._form.upload_image') %></a>
</span>
</p>
</label>
</span>
</p>

</div>
</div>
Expand All @@ -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({});
});
</script>
Expand All @@ -88,7 +97,7 @@
</a>
<a class="btn btn-outline-secondary" onClick="$('#c<%= comment.cid %>show').toggle();$('#c<%= comment.cid %>edit').toggle()"><%= t('comments._form.cancel') %></a>
<% else %>
<a class="btn btn-outline-secondary preview-btn>" id="post_comment" data-previewing-text="Hide Preview" onClick="$E.toggle_preview('post_comment')"><%= t('comments._form.preview') %></a>
<a class="btn btn-outline-secondary preview-btn>" id="post_comment" data-previewing-text="Hide Preview" onClick="handleClick();$E.toggle_preview()"><%= t('comments._form.preview') %></a>
<% end %>

<span style="color:#888;"> &nbsp;
Expand Down

0 comments on commit 4c96232

Please sign in to comment.