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,76 @@ 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')) {
+                const blob = await item.getType('image/png');
+                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.png');
+
+                // Automatically fill in the hidden file input with the FormData
+                const fileInput = document.getElementById('hiddenFileInput');
+                const file = new File([blob], 'pasted-image.png', { type: 'image/png' });
+                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('uploadButton2');
+                uploadButton.style.display = 'inline';
+                uploadButton.innerText = 'Use this image';
+
+                // Update the paste button text
+                document.getElementById('pasteButton').innerText = 'Change Image';
+
+                return formData;
+            } else {
+                throw new Error('Clipboard does not contain PNG image data.');
+            }
+        }
+    } catch (error) {
+
+    }
+}
+
+export function initPasteForm(formData) {
+    document.getElementById('uploadButton2').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();
+
+            // Hide the loading indicator after a delay to simulate form submission time
+            setTimeout(() => {
+                if (loadingIndicator) {
+                    loadingIndicator.classList.add('hidden');
+                    formDivs.forEach(div => div.classList.remove('hidden'));
+                }
+                initCoversSaved(); // Trigger the initCoversSaved function
+            }, 3000); // Delay Added
+        } else {
+            alert('No image data to upload.');
+        }
+    });
+}

openlibrary/plugins/openlibrary/js/index.js

@@ -296,6 +296,19 @@ jQuery(function () {
             });
     }
 
+    const coverForm = document.querySelector('.ol-cover-form--clipboard');
+    if (coverForm) {
+        import(/* webpackChunkName: "covers" */ './covers')
+            .then(module => {
+                if (coverForm) {
+                    document.getElementById('pasteButton').addEventListener('click', async () => {
+                        const formData = await module.pasteImage();
+                        module.initPasteForm(formData);
+                    });
+                }
+            });
+    }
+
     if (document.getElementById('addbook')) {
         import(/* webpackChunkName: "add-book" */ './add-book')
             .then(module => module.initAddBookImport());

openlibrary/templates/covers/add.html

@@ -50,10 +50,26 @@
     </div>
     <div class="input">
         <input type="file" name="file" id="coverFile" value="" accept=".jpg, .jpeg, .gif, .png" required/>
-        <button type="submit" class="cta-btn cta-btn--vanilla">$_("Upload")</button>
+        <button id='uploadButton1' type="submit" class="cta-btn cta-btn--vanilla">$_("Upload")</button>
     </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 class="input">
+        <button type="button" onclick="pasteImage()" class="cta-btn cta-btn--vanilla" id="pasteButton">$_("No Image Pasted")</button>
+    </div>
+    <!-- Hidden file input that will be populated with the pasted image -->
+    <input type="file" name="file" id="hiddenFileInput" style="display: none;" />
+    <button id="uploadButton2" type="submit" class="cta-btn cta-btn--vanilla" style="display: none;">$_("Upload")</button>
+</form>
+
+<div id="imageContainer" style="text-align: center; margin-top: 20px;">
+    <img id="image" style="max-width: 100%; max-height: 400px; display: none; margin: 0 auto;" />
+</div>
+$: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>