Copy/Paste Option for adding Book Covers resolving #9993

openlibrary/i18n/messages.pot

@@ -4320,13 +4320,21 @@ msgid "Upload"
 msgstr ""
 
 #: covers/add.html
-msgid "Or, use the the cover from Internet Archive"
+msgid "Or, paste an image from your clipboard"
+msgstr ""
+
+#: covers/add.html
+msgid "No Image Pasted"
 msgstr ""
 
 #: covers/add.html
 msgid "Uploading..."
 msgstr ""
 
+#: covers/add.html
+msgid "Or, use the the cover from Internet Archive"
+msgstr ""
+
 #: covers/author_photo.html
 msgid "Pull up a larger author photo"
 msgstr ""

openlibrary/plugins/openlibrary/js/covers.js

@@ -112,3 +112,68 @@ export function initCoversSaved() {
         parent.$(cover_selector).attr('src', cover_url);
     }
 }
+
+// This function will be triggered when the user clicks the "Paste" button
+export async function pasteImage() {
+    let formData = null;
+    try {
+        const clipboardItems = await navigator.clipboard.read();
+        for (const item of clipboardItems) {
+            if (!item.types.includes('image/png') && !item.types.includes('image/jpeg') && !item.types.includes('image/jpg')) {
+                continue;
+            }
+
+            const mimeType = item.types.includes('image/png') ? 'image/png' : (item.types.includes('image/jpeg') ? 'image/jpeg' : 'image/jpg');
+            const fileExtension = mimeType === 'image/png' ? 'png' : (mimeType === 'image/jpeg' ? 'jpeg' : 'jpg');
+            const blob = await item.getType(mimeType);
+            const image = document.getElementById('image');
+            image.src = URL.createObjectURL(blob);
+            image.style.display = 'block';
+
+            // Update the global formData with the new image blob
+            formData = new FormData();
+            formData.append('file', blob, `pasted-image.${fileExtension}`);
+
+            // Automatically fill in the hidden file input with the FormData
+            const fileInput = document.getElementById('hiddenFileInput');
+            const file = new File([blob], `pasted-image.${fileExtension}`, { type: mimeType });
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            fileInput.files = dataTransfer.files; // This sets the file input with the image
+
+            // Show the upload button and update its text
+            const uploadButton = document.getElementById('uploadButtonPaste');
+            uploadButton.style.display = 'inline';
+            uploadButton.innerText = 'Use this image';
+
+            // Update the paste button text
+            document.getElementById('pasteButton').innerText = 'Change Image';
+
+            return formData;
+        }
+        alert('No image found in clipboard');
+    } catch (error) {
+
+    }
+}
+
+export function initPasteForm(formData) {
+    document.getElementById('uploadButtonPaste').addEventListener('click', function(event) {
+        event.preventDefault(); // Prevent the default form submission
+
+        const form = document.getElementById('clipboardForm');
+        if (formData) {
+            // Show the loading indicator
+            const loadingIndicator = document.querySelector('.loadingIndicator');
+            const formDivs = document.querySelectorAll('.ol-cover-form, .imageIntro');
+
+            if (loadingIndicator) {
+                loadingIndicator.classList.remove('hidden');
+                formDivs.forEach(div => div.classList.add('hidden'));
+            }
+
+            // Submit the form
+            form.submit();
+        }
+    });
+}

openlibrary/plugins/openlibrary/js/index.js

@@ -280,8 +280,9 @@ jQuery(function () {
     const manageCoversElement = document.getElementsByClassName('manageCovers').length;
     const addCoversElement = document.getElementsByClassName('imageIntro').length;
     const saveCoversElement = document.getElementsByClassName('imageSaved').length;
+    const coverForm = document.querySelector('.ol-cover-form--clipboard');
 
-    if (addCoversElement || manageCoversElement || saveCoversElement) {
+    if (addCoversElement || manageCoversElement || saveCoversElement || coverForm) {
         import(/* webpackChunkName: "covers" */ './covers')
             .then((module) => {
                 if (manageCoversElement) {
@@ -293,6 +294,12 @@ jQuery(function () {
                 if (saveCoversElement) {
                     module.initCoversSaved();
                 }
+                if (coverForm) {
+                    document.getElementById('pasteButton').addEventListener('click', async () => {
+                        const formData = await module.pasteImage();
+                        module.initPasteForm(formData);
+                    });
+                }
             });
     }
 

openlibrary/templates/covers/add.html

@@ -54,6 +54,24 @@
     </div>
 </form>
 
+<form id="clipboardForm" class="ol-cover-form ol-cover-form--clipboard" method="post" enctype="multipart/form-data" action="$action">
+    <div class="label">
+        <label for="coverClipboard">$_("Or, paste an image from your clipboard")</label>
+    </div>
+
+    <div id="imageContainer" style="margin-top: 20px;">
+        <img id="image" style="max-width: 100%; max-height: 400px; display: none;" />
+    </div>
+
+    <!-- Hidden file input that will be populated with the pasted image -->
+    <input type="file" name="file" id="hiddenFileInput" style="display: none;" />
+
+    <div class="button-container" style="margin-top: 10px;">
+        <button id="uploadButtonPaste" type="submit" class="cta-btn cta-btn--vanilla" style="display: none; width: auto;">$_("Upload")</button>
+        <button type="button" id="pasteButton" class="cta-btn cta-btn--vanilla" style="width: auto;">$_("No Image Pasted")</button>
+    </div>
+</form>
+$:macros.LoadingIndicator(_("Uploading..."))
 $#<form class="ol-cover-form ol-cover-form--url" method="post" enctype="multipart/form-data" action="$action">
 $#    <div class="label">
 $#        <label id="imageWeb" for="imageUrl">$_("Or, paste in the image URL if it's on the web")</label>
@@ -78,4 +96,4 @@
         </div>
     </form>
 
-$:macros.LoadingIndicator(_("Uploading..."))
+$:macros.LoadingIndicator(_("Uploading..."))