[Bug] Progress Bars Don't Show for Edit Comment CLICK-to-Upload Image

[noi5e]

Steps to Reproduce:

1. Open up an edit comment form.
2. Upload an image by clicking on the button in the toolbar.
3. The rich-text image link does appear in the correct form.
4. However, even though the upload proceeds correctly, the progress bars don't show.

Edit.Comment.Image.Upload.Progress.Bars.Bug.Before.Fix.mov

This bug occurs because the toolbar button in edit comment forms call on a fileupload method in dragdrop.js. The CSS selectors in this method refer to elements that exist in reply and main comment forms, but that DON'T exist in edit comment forms:

plots2/app/assets/javascripts/dragdrop.js

Lines 78 to 82 in a3c8796

	elem = $($D.selected).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');

Here's how they are in edit comment forms:

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

Lines 17 to 28 in a3c8796

	<div id="imagebar">
	<div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-striped active pull-right">
	<div id="c<%= comment.id%>progress-bar" class="progress-bar" style="width: 0%;"></div>
	</div>
	<p>
	<span id="c<%= comment.id%>uploading" class="uploading" style="display:none;">
	<%= translation('comments._edit.uploading') %>
	</span>
	<span id="c<%= comment.id%>prompt" class="prompt">
	<span style="padding-right:4px;float:left;" class="hidden-xs">
	<%= raw translation('comments._edit.drag_and_drop') %>
	</span>

As opposed to reply and main comment forms:

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

Lines 64 to 75 in a3c8796

	<div id="imagebar">
	<div id="create_progress" style="display:none;" class="progress float-right">
	<div id="create_progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
	</div>
	<p>
	<span id="create_uploading" class="uploading" style="display:none;">
	<%= translation('comments._form.uploading') %>
	</span>
	<span id="create_prompt" class="prompt">
	<span style="padding-right:4px;float:left;" class="d-none d-md-inline">
	<%= raw translation('comments._form.drag_and_drop') %>
	</span>

Going to take care of this bug in stages:

• Write system tests.
• Add unique IDs and common classes to progress bar elements.
• Change scripts to refer to the common class, ie. .progress instead of #create_upload.

I think this bugfix will pave the way for combining the scripts for edit comment forms with scripts for reply/main comment forms... They're so similar, it would really be helpful if they were just consolidated.

---

(This issue is part of the larger Comment Editor Overhaul Project with Outreachy. Refer to Planning Issue #9069 for more context)