FWIW, MusicBrainz/Cover Art Archive (another IA project) has a long-standing ticket for URL uploading: https://tickets.metabrainz.org/browse/MBS-4641

And there’s a community developed userscript to achieve this functionality: https://github.com/ROpdebee/mb-userscripts/tree/main?tab=readme-ov-file#mb-enhanced-cover-art-uploads (Ray asked me elsewhere to show a demonstration of the userscript in action, but due to the attack(s) on IA, cover art uploading and editing is currently disabled on MB.)

See: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ for an example of how this can be done with vanilla js

For designs, let's go with something simple like this:

When an image is pasted, it should then display the image with an "Use this image" button underneath, matching the ui of the IA section.

I think this UX could be simplified/DRYed, but let's do that in a future issue, since I believe getting the JS to work well for the copy/paste use case will be meaty enough to warrant its own issue.

@Freso @RayBB @cdrini @mekarpeles I am willing to work on this issue and have prior experience in vanilla JS. I have went through the link provided by earlier.

Additionally, if I may suggest, is it possible for us to add a built-in Object Character Recognition (OCR) to check if the text in the cover image matches the title/author of the book? I found tesseract.js to be relevant for this use-case. It is an OCR tool that works within the browser (hence client side, no additional load to our servers), in vanilla JS and has support for 100+ languages. This way we can verify if the cover is relevant before it is even uploaded to our servers. At the very least, it can be used to add metadata to the image cover automatically.

@Spaarsh I've assigned you to the issue.
I recommend opening a PR that addresses this issue with image pasting because it's fairly important to get working soon.

Once that is done (or while you're working on it) I'd recommend coming to the weekly call to share your idea for tesseract or write a nice separate feature request ticket. That way you can really explain the benefits and costs and discuss with the community :)

@RayBB @mekarpeles @Freso This is what I have came up with:

I was unable to execute the LoadingIndicator(_("Uploading...")) macro from the script tag itself. Hence the makeshift "Uploading..." appears on the screen.

It also must be noted that the JS script first checks if there is any /image item in the user's clipboard and only then allows pasting. Hence, it can be assured that only images can be pasted.

The only changes made have been in the add.html file - adding a new form, its button and the JavaScript for handling the copy and pasting of the image file. Both the forms are submitted that the same URL /upload2 as earlier. So there are no backend changes required.

If there are any other suggestions, please let me know! If this is alright, I'll open a PR.

@Spaarsh I'm not the lead but as far as I'm concerned this is certainly on the right track.
The JS and CSS will have to go in their respective files (not just the add.html) but you can learn more about the frontend here
https://github.com/internetarchive/openlibrary/wiki/Frontend-Guide

I'd say, you should be good to open a PR while you wait to hear back from drini about the UI.

@RayBB @mekarpeles @cdrini @Freso I have added the relevant JavaScript and HTML code to their respective locations according to the front-end guide. The code has been improved upon.

Here is the demo:

I will proceed to open a PR now.

Additionally, @RayBB I am yet to flesh out the tesseract.js proposal. However, I have submitted the Volunteers Form as a Software Engineer to join the slack channel. I haven't received any response yet. It was 3 days ago.

Slack invite sent 👍

Received. Thank you!

Sorry for off-topic, but please stop @’ing me on every comment. I have no specific stake in this issue. I already get e-mails for all new activity for issues I’m subscribed to. Thank you, and keep up the good work. ❤️