Comment image uploading not working #5229

jywarren · 2019-03-21T17:20:51Z

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 !!!

The text was updated successfully, but these errors were encountered:

ViditChitkara · 2019-03-22T04:19:43Z

I'll have a look!

GettyOrawo · 2019-03-25T20:23:15Z

I believe this is part of the error right? It does nothing on image upload.

I could try trace why that behaviour.

ViditChitkara · 2019-03-25T20:30:01Z

@GettyOrawo Yes!

jywarren · 2019-03-25T21:26:10Z

That's right!

Wondering if it's related to #4771 ?

ViditChitkara · 2019-03-28T19:45:16Z

@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?

jywarren · 2019-03-29T21:58:21Z

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:

plots2/app/assets/javascripts/dragdrop.js

Lines 45 to 47 in e7d1315

    
           $('#create_progress').show() 
        
           $('#create_uploading').show() 
        
           $('#create_prompt').hide()

...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:

plots2/app/views/comments/_form.html.erb

Lines 20 to 60 in e7d1315

    
           <div class="form-group dropzone"> 
        
             <% 
        
               body = body || params[:body] 
        
               # Look for comment templates 
        
               if params[:body].nil? && @node && @node.has_power_tag('comment-template') 
        
                 body = Node.find_by(slug: @node.power_tag('comment-template')).try(:body) 
        
               end 
        
             %> 
        
             <textarea style="border: 1px solid #bbb;border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;padding: 10px;" onFocus="editing=true" name="body" class="form-control" id="text-input" rows="6" cols="40" placeholder="<%= placeholder %>"><% if local_assigns[:is_new_answer].blank? %> <%= body %><% end %></textarea> 
        
             <div id="imagebar"> 
        
               <div id="create_progress" style="display:none;" class="progress progress-striped active pull-right"> 
        
                 <div id="create_progress-bar" class="progress-bar" style="width: 0%;"></div> 
        
               </div> 
        
               <p> 
        
                 <span id="create_uploading" class="uploading" style="display:none;"> 
        
                   <%= t('comments._form.uploading') %> 
        
                 </span> 
        
                 <span id="create_prompt" class="prompt"> 
        
                   <span style="padding-right:4px;float:left;" class="hidden-xs"> 
        
                     <%= raw t('comments._form.drag_and_drop') %> 
        
                   </span> 
        
                   <!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button --> 
        
                   <label id="input_label" class="" for="fileinput"> 
        
                     <input id="fileinput" type="file" name="image[photo]" style="display:none;" /> 
        
                     <a class="hidden-xs">choose one</a> 
        
                     <span class="visible-xs"> 
        
                       <i class="fa fa-upload"></i> 
        
                       <a><%= t('comments._form.upload_image') %></a> 
        
                     </span> 
        
                   </label> 
        
                 </span> 
        
               </p> 
        
             </div> 
        
           </div>

What do you think?

ViditChitkara · 2019-03-30T04:40:19Z

I'll give this a shot!! An interesting one!!

GettyOrawo · 2019-03-31T09:24:33Z

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. 🙂

jywarren · 2019-04-09T18:14:53Z

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)

jywarren · 2019-04-09T18:15:19Z

It's referring to this line in dragdrop.js:

        ($D.selected).find('#create_progress').eq(0).show();

jywarren · 2019-04-09T18:16:05Z

Also, shall we close these? #4617 #4771

ViditChitkara · 2019-04-09T18:33:15Z

Okay, will have a look!

ViditChitkara · 2019-04-09T18:35:36Z

I think we may close the issue after I fix this. Seems they are related to image uploading.

jywarren · 2019-04-24T03:30:54Z

Update- really want to fix this, i think it's related to this error:

Uncaught TypeError: Cannot read property 'find' of undefined

On:

plots2/app/assets/javascripts/dragdrop.js

Line 45 in 099a1ab

($D.selected).find('#create_progress').eq(0).show();

jywarren · 2019-04-24T03:32:23Z

Right now, only drag/drop seems broken. You can select an image to upload without drag/dropping it.

jywarren · 2019-04-24T03:34:04Z

For writing a system test for this, we could explore:

ViditChitkara · 2019-04-24T16:16:27Z

Will have a look

jywarren · 2019-05-01T22:26:03Z

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 · 2019-05-02T22:21:49Z

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

jywarren · 2019-05-03T14:23:16Z

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!

ViditChitkara · 2019-05-03T14:37:27Z

Yes, doing it today!

jywarren · 2019-05-03T14:48:17Z

awesome, thank you. I started a system test here but it can be kept separate: #5655 thank you!!!

…

On Fri, May 3, 2019 at 10:38 AM Vidit ***@***.***> 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 <#5229 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J6ZQGTHPI3G57XTFULPTRE2RANCNFSM4HAH3SMQ> .

ViditChitkara · 2019-05-03T14:49:14Z

Cool!

ViditChitkara · 2019-05-03T21:56:29Z

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: #5655 thank you!!! On Fri, May 3, 2019 at 10:38 AM Vidit ***@***.***> 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 > <#5229 (comment) >, > 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 <#5229 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFMRPUKJGVVP6QBGR7RS5D3PTRGDNANCNFSM4HAH3SMQ> .

jywarren · 2019-05-07T16:54:50Z

Confirmed this works on stable server!

jywarren added the bug the issue is regarding one of our programs which faces problems when a certain task is executed label Mar 21, 2019

jywarren mentioned this issue Mar 21, 2019

images not uploading in Answer #3535

Closed

jywarren added help wanted requires help by anyone willing to contribute JavaScript high-priority labels Mar 21, 2019

jywarren mentioned this issue Mar 21, 2019

Reply to Comment emoji placement - move them above responses? #5226

Open

jywarren mentioned this issue Mar 25, 2019

fix minor error while creating comments #5238

Merged

ViditChitkara mentioned this issue Mar 31, 2019

Fix image upload in comments as well as preview #5321

Merged

jywarren closed this as completed in #5321 Apr 1, 2019

jywarren reopened this Apr 9, 2019

jywarren mentioned this issue May 2, 2019

Dragging image into wiki pages is broken #5650

Closed

jywarren mentioned this issue May 3, 2019

System test for drag to upload image in comment form #5655

Closed

ViditChitkara mentioned this issue May 4, 2019

fixed image drag and drop bug #5657

Merged

jywarren closed this as completed in #5657 May 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comment image uploading not working #5229

Comment image uploading not working #5229

jywarren commented Mar 21, 2019

ViditChitkara commented Mar 22, 2019

GettyOrawo commented Mar 25, 2019

ViditChitkara commented Mar 25, 2019

jywarren commented Mar 25, 2019

ViditChitkara commented Mar 28, 2019

jywarren commented Mar 29, 2019

ViditChitkara commented Mar 30, 2019

GettyOrawo commented Mar 31, 2019

jywarren commented Apr 9, 2019

jywarren commented Apr 9, 2019

jywarren commented Apr 9, 2019

ViditChitkara commented Apr 9, 2019

ViditChitkara commented Apr 9, 2019

jywarren commented Apr 24, 2019

jywarren commented Apr 24, 2019

jywarren commented Apr 24, 2019

ViditChitkara commented Apr 24, 2019

jywarren commented May 1, 2019

jywarren commented May 2, 2019

jywarren commented May 3, 2019

ViditChitkara commented May 3, 2019

jywarren commented May 3, 2019 via email

ViditChitkara commented May 3, 2019

ViditChitkara commented May 3, 2019 via email

jywarren commented May 7, 2019

Comment image uploading not working #5229

Comment image uploading not working #5229

Comments

jywarren commented Mar 21, 2019

ViditChitkara commented Mar 22, 2019

GettyOrawo commented Mar 25, 2019

ViditChitkara commented Mar 25, 2019

jywarren commented Mar 25, 2019

ViditChitkara commented Mar 28, 2019

jywarren commented Mar 29, 2019

ViditChitkara commented Mar 30, 2019

GettyOrawo commented Mar 31, 2019

jywarren commented Apr 9, 2019

jywarren commented Apr 9, 2019

jywarren commented Apr 9, 2019

ViditChitkara commented Apr 9, 2019

ViditChitkara commented Apr 9, 2019

jywarren commented Apr 24, 2019

jywarren commented Apr 24, 2019

jywarren commented Apr 24, 2019

ViditChitkara commented Apr 24, 2019

jywarren commented May 1, 2019

jywarren commented May 2, 2019

jywarren commented May 3, 2019

ViditChitkara commented May 3, 2019

jywarren commented May 3, 2019 via email

ViditChitkara commented May 3, 2019

ViditChitkara commented May 3, 2019 via email

jywarren commented May 7, 2019