Plots2: Comment image uploading not working
I think this may be related to the new reply-to-comment feature -- @ViditChitkara could you take a look at this one? I don't see any error message but I did see this warning:
Found 35 elements with non-unique id #comment-form: (More info: https://goo.gl/9p2vKq)
Related? I was testing both dragging an image into the comment field (not a reply) and also clicking "choose an image" in the bottom bar of the comment field, and neither triggered any reaction. Thank you !!!
jywarren
All 25 comments
I'll have a look!
ViditChitkara
on 22 Mar 2019
I believe this is part of the error right? It does nothing on image upload.
I could try trace why that behaviour.
GettyOrawo
on 25 Mar 2019
@GettyOrawo Yes!
ViditChitkara
on 25 Mar 2019
That's right!
Wondering if it's related to #4771 ?
jywarren
on 25 Mar 2019
@jywarren the problem here is that there are multiple comment boxes on a single page. Editor.js and dragdrop js are written assuming a single text area.
I think we need to decide the best possible way to rewrite the editor and dragdrop code which will cater for multiple comment boxes.
Any suggestions on this?
ViditChitkara
on 28 Mar 2019
I think we could issue each comment box a unique ID and ensure that this is passed through dragdrop -- often you can use the this keyword to target a specific element within a jQuery queried element:
https://github.com/publiclab/plots2/blob/master/app/assets/javascripts/dragdrop.js
So, instead of the hard-coded regions we're updating in there on these lines:
...we could use:
$(this).find('.create_progress'); // searching inside the given `dropzone` element
This should work because all the progress bar and other relevant elements are inside the dropzone element:
What do you think?
jywarren
on 29 Mar 2019
I'll give this a shot!! An interesting one!!
ViditChitkara
on 30 Mar 2019
Hello guys. Sorry I've been relatively passive on this issue. Was wondering what could be causing this. Thanks @jywarren and @ViditChitkara would love to see the PR for this and how you solve it or maybe work with you and learn from it. :slightly_smiling_face:
GettyOrawo
on 31 Mar 2019
Hmm, @ViditChitkara I still can't seem to drag an image into a comment form - i just tried here: https://publiclab.org/notes/vibhordelgupta/04-09-2019/soc-proposal-image-sequencer-broadening-avenues
Would you be able to take a look and see what's going on?
I see this error;
Uncaught TypeError: Cannot read property 'find' of undefined
at HTMLDivElement.start (dragdrop-3093ac31fa5b1856b1a4ee669fa42254025330e04a7280d52baf98a2d0f34447.js:45)
at $.(anonymous function).(anonymous function)._trigger (https://publiclab.org/assets/application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:14170:13)
at $.(anonymous function).(anonymous function)._beforeSend (https://publiclab.org/assets/application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:14945:22)
at $.(anonymous function).(anonymous function)._beforeSend (https://publiclab.org/assets/application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:13786:25)
at $.(anonymous function).(anonymous function)._onSend (https://publiclab.org/assets/application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:15056:18)
at $.(anonymous function).(anonymous function)._onSend (https://publiclab.org/assets/application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:13786:25)
at Object.data.submit (application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:14800)
at $.(anonymous function).(anonymous function).<anonymous> (https://publiclab.org/assets/application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:14373:30)
at fire (application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:3233)
at Object.add [as done] (application-f7dff6c9332f860098e629b658f6713cfd16a4dedda6132019e35496c592bac1.js:3292)
It's referring to this line in dragdrop.js:
($D.selected).find('#create_progress').eq(0).show();
Also, shall we close these? https://github.com/publiclab/plots2/issues/4617 https://github.com/publiclab/plots2/issues/4771
jywarren
on 9 Apr 2019
Okay, will have a look!
ViditChitkara
on 9 Apr 2019
I think we may close the issue after I fix this. Seems they are related to image uploading.
ViditChitkara
on 9 Apr 2019
Update- really want to fix this, i think it's related to this error:
Uncaught TypeError: Cannot read property 'find' of undefined
On:
jywarren
on 24 Apr 2019
Right now, only drag/drop seems broken. You can select an image to upload without drag/dropping it.
jywarren
on 24 Apr 2019
For writing a system test for this, we could explore:
- https://stackoverflow.com/questions/32880524/how-do-you-test-uploading-a-file-with-capybara-and-dropzone-js
- https://web.archive.org/web/20170730200309/http://blog.paulrugelhiatt.com/rails/testing/capybara/dropzonejs/2014/12/29/test-dropzonejs-file-uploads-with-capybara.html
jywarren
on 24 Apr 2019
Will have a look
ViditChitkara
on 24 Apr 2019
System test is going well for selecting a file, but we would have to add one for dragging in a file. Selecting is working on the production site right now, just not dragging.
jywarren
on 2 May 2019
A system test could look like:
test "uploading by dragging" do
# log in
visit Node.last.path
drop_in_dropzone 'public/images/pl.png'
click_button 'Publish'
expect(page.find('#comments .comment image')['src']).to match('test.png')
end
def drop_in_dropzone(file_path)
# Generate a fake input selector
page.execute_script <<-JS
fakeFileInput = window.$('<input/>').attr(
{id: 'fakeFileInput', type:'file'}
).appendTo('body');
JS
# Attach the file to the fake input selector with Capybara
attach_file("fakeFileInput", file_path)
# Add the file to a fileList array
page.execute_script("var fileList = [fakeFileInput.get(0).files[0]]")
# Trigger the fake drop event
page.execute_script <<-JS
var e = jQuery.Event('drop', { dataTransfer : { files : fileList } });
$('.dropzone')[0].dropzone.listeners[0].events.drop(e);
JS
end
Hi @ViditChitkara -- we really need some help with the ($D.selected).find('#create_progress').eq(0).show(); error; are you able to put some time into this to resolve issues related to the new reply-to-comment code? Thank you!
jywarren
on 3 May 2019
Yes, doing it today!
ViditChitkara
on 3 May 2019
awesome, thank you. I started a system test here but it can be kept
separate: https://github.com/publiclab/plots2/pull/5655 thank you!!!
On Fri, May 3, 2019 at 10:38 AM Vidit notifications@github.com wrote:
Yes, doing it today!
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5229#issuecomment-489117826,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAF6J6ZQGTHPI3G57XTFULPTRE2RANCNFSM4HAH3SMQ
.
jywarren
on 3 May 2019
Cool!
ViditChitkara
on 3 May 2019
I think I found a solution. Need to do some testing though. Will be pushing
it soon.
Thanks
On Fri, May 3, 2019, 8:18 PM Jeffrey Warren notifications@github.com
wrote:
awesome, thank you. I started a system test here but it can be kept
separate: https://github.com/publiclab/plots2/pull/5655 thank you!!!On Fri, May 3, 2019 at 10:38 AM Vidit notifications@github.com wrote:
Yes, doing it today!
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
<https://github.com/publiclab/plots2/issues/5229#issuecomment-489117826
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AAAF6J6ZQGTHPI3G57XTFULPTRE2RANCNFSM4HAH3SMQ.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5229#issuecomment-489121577,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFMRPUKJGVVP6QBGR7RS5D3PTRGDNANCNFSM4HAH3SMQ
.
ViditChitkara
on 3 May 2019
Confirmed this works on stable server!
jywarren
on 7 May 2019
Related issues
milaaraujo
·
3Comments
keshavsethi
·
3Comments
RuthNjeri
·
3Comments
grvsachdeva
·
3Comments
divyabaid16
·
3Comments
Most helpful comment
Okay, will have a look!