Adds image button to wiki Editor

[cypherean]

Fixes #8241, fixes #8259

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• PR is descriptively titled 📑 and links the original issue above 🔗
• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with rake test
• code is in uniquely-named feature branch and has no merge conflicts 📁
• screenshots/GIFs are attached 📎 in case of UI updation
• ask @publiclab/reviewers for help, in a comment below

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

[gitpod-io]

[welcome]

Thanks for opening this pull request! This space is protected by our Code of Conduct - and we're here to help.
Dangerbot will test out your code and reply in a bit with some pointers and requests.
Also please refer here for installation help 💿
There may be some errors, but don't worry! We'll work through them with you! 👍🎉😄
It would be great if you can tell us your Twitter handle so we can thank you properly?

[codecov]

Codecov Report

Merging #8252 into main will increase coverage by 0.71%.
The diff coverage is 91.02%.

@@            Coverage Diff             @@
##             main    #8252      +/-   ##
==========================================
+ Coverage   81.27%   81.98%   +0.71%     
==========================================
  Files         101      101              
  Lines        5859     5902      +43     
==========================================
+ Hits         4762     4839      +77     
+ Misses       1097     1063      -34     

Impacted Files	Coverage Δ
app/controllers/tag_controller.rb	81.45% <83.33%> (+0.05%)	⬆️
app/controllers/spam2_controller.rb	71.84% <84.61%> (+10.30%)	⬆️
app/controllers/notes_controller.rb	83.46% <85.71%> (+0.06%)	⬆️
app/controllers/wiki_controller.rb	85.40% <87.50%> (+0.06%)	⬆️
app/controllers/admin_controller.rb	80.24% <100.00%> (ø)
app/controllers/batch_controller.rb	90.19% <100.00%> (+22.23%)	⬆️
app/controllers/comment_controller.rb	86.95% <100.00%> (ø)
app/controllers/home_controller.rb	98.38% <100.00%> (ø)
app/controllers/like_controller.rb	72.22% <100.00%> (ø)
app/controllers/users_controller.rb	81.11% <100.00%> (ø)
... and 7 more

[jywarren]

Exciting! Actually i wonder if we could do something a little simpler, i left a comment here! #8241 (comment)

Thank you so much @shreyaa-sharmaa !!

[jywarren]

I'm thinking it could be related to @NitinBhasneria's work here! #8240

[cypherean]

@jywarren its done. 🎉

[cypherean]

I've also made a small changes to the toolbar so we can combine it with #8259.
Before:

Now:

[sagarpreet-chadha]

We can restrict the format of files uploaded using https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept . We donot want users to upload pdf,docs,etc., right?

Also after uploading multiple images, how does the user knows which image will be rendered where? Can you attach a screenshot of this case?
Thanks 🎉

[cypherean]

@sagarpreet-chadha I've added the condition for file upload. Should I change it to accept="image/*" instead? Right now it is accept=" .jpg, .jpeg, .png"

We can upload one file at a time (similar to how we did it before) and thus the selected picture would come one after the other based on order of addition.

[jywarren]

This sounds like a great plan, @shreyaa-sharmaa ! Let's do it!

[sagarpreet-chadha]

Yes @shreyaa-sharmaa , let's support all the images format. Then this PR is good to go 🎉

[cypherean]

This is not ready to be merger yet.

[jywarren]

OK, no rush, just tell us when you'd like to get this added in! Much appreciated!!

[jywarren]

Hi @shreyaa-sharmaa -- actually, we'd like to keep the image upload bar as well, so we have both. Will that be possible? Thank you! I'm sorry i missed this.

[cypherean]

Will do that.

[cypherean]

Yeah, I misunderstood how adding an image in the post worked. But I've figured it out now. Sorry it's taking so long. I'll try to get it done asap.

[cypherean]

This is almost done. I just need to ask about the placement of the progress bar. Should we have a progress bar below the textarea or to the right of it (same as that of main image)?
cc: @jywarren @sagarpreet-chadha

[sagarpreet-chadha]

Let me ask UX experts @jywarren @ebarry for this, thanks 💯 Great work so far 😄

[jywarren]

Hi! I believe we do it this way in the comment boxes... is it easy to just use the code that drives this?

Thank you!!!

[ebarry]

The progress bar as @jywarren advises looks good!
For reference, here's what the progress bar looks like on /post :

[jywarren]

I believe this is for inline image additions, not for the lead image, though, which is what @ebarry is highlighting. Thanks though, it's good context!

[cypherean]

The original code for progress-bar for inline images doesn't work. I tried to use one similar to the comment boxes (noting here that the same function triggers progress bar in both these cases) but that didn't work as well. Right now I'm tracking it down. I'll hopefully get it done by tomorrow. Anyone here has any idea why the original one doesn't work? 😕

[jywarren]

Hmm, i'm sorry you're having trouble! The original code presumably works in a couple other contexts still, like the comment box. I think it was complicated because it was intended to be re-used code for various contexts. Where is it failing? Could it be due to css selectors not being specific enough?

[cypherean]

It's working now. Sorry it took so long. 😅
GIF of changes:

Please test it in gitpod and let me know if any changes are required.

[cypherean]

I believe this is complete now. Please have a look @jywarren @sagarpreet-chadha

[jywarren]

This looks fantastic. Thank you so much, @shreyaa-sharmaa for bringing this to the finish line!!! 👍 🎉

[jywarren]

! Nice!!!