diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 60cb5a7b..2b6564aa 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -887,6 +887,10 @@ input::file-selector-button {
margin-bottom: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}
+
+i.active {
+ background: var(--accent-color);
+}
#system-info .value {
text-align: left;
}
diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index ab1b97cc..1a1c115d 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -396,16 +396,44 @@ const TASK_REQ_NO_EXPORT = [
"save_to_disk_path"
]
-// Adds a copy icon if the browser grants permission to write to clipboard.
+// Retrieve clipboard content and try to parse it
+async function pasteFromClipboard() {
+ //const text = await navigator.clipboard.readText()
+ let text = await navigator.clipboard.readText();
+ text=text.trim();
+ if (text.startsWith('{') && text.endsWith('}')) {
+ try {
+ const task = JSON.parse(text)
+ restoreTaskToUI(task)
+ } catch (e) {
+ console.warn(`Clipboard JSON couldn't be parsed.`, e)
+ }
+ return
+ }
+ // Normal txt file.
+ const task = parseTaskFromText(text)
+ if (task) {
+ restoreTaskToUI(task)
+ } else {
+ console.warn(`Clipboard content - File couldn't be parsed.`)
+ }
+}
+
+// Adds a copy and a paste icon if the browser grants permission to write to clipboard.
function checkWriteToClipboardPermission (result) {
if (result.state == "granted" || result.state == "prompt") {
const resetSettings = document.getElementById('reset-image-settings')
+
+ // COPY ICON
const copyIcon = document.createElement('i')
- // copyIcon.id = 'copy-image-settings'
copyIcon.className = 'fa-solid fa-clipboard section-button'
copyIcon.innerHTML = `Copy Image Settings`
copyIcon.addEventListener('click', (event) => {
event.stopPropagation()
+ // Add css class 'active'
+ copyIcon.classList.add('active')
+ // In 1000 ms remove the 'active' class
+ asyncDelay(1000).then(() => copyIcon.classList.remove('active'))
const uiState = readUI()
TASK_REQ_NO_EXPORT.forEach((key) => delete uiState.reqBody[key])
if (uiState.reqBody.init_image && !IMAGE_REGEX.test(uiState.reqBody.init_image)) {
@@ -415,8 +443,24 @@ function checkWriteToClipboardPermission (result) {
navigator.clipboard.writeText(JSON.stringify(uiState, undefined, 4))
})
resetSettings.parentNode.insertBefore(copyIcon, resetSettings)
+
+ // PASTE ICON
+ const pasteIcon = document.createElement('i')
+ pasteIcon.className = 'fa-solid fa-paste section-button'
+ pasteIcon.innerHTML = `Paste Image Settings`
+ pasteIcon.addEventListener('click', (event) => {
+ event.stopPropagation()
+ // Add css class 'active'
+ pasteIcon.classList.add('active')
+ // In 1000 ms remove the 'active' class
+ asyncDelay(1000).then(() => pasteIcon.classList.remove('active'))
+ pasteFromClipboard()
+ })
+ resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
}
}
+
+// Determine which access we have to the clipboard. Clipboard access is only available on localhost or via TLS.
navigator.permissions.query({ name: "clipboard-write" }).then(checkWriteToClipboardPermission, (e) => {
if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === 'function') {
// Fix for firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1560373