From 4e8f72fb874518789a13d9dabf715ffa494d7778 Mon Sep 17 00:00:00 2001 From: neobooru <50623835+neobooru@users.noreply.github.com> Date: Fri, 4 Jun 2021 20:06:40 +0200 Subject: [PATCH 1/5] client/upload: upload from clipboard Closes #320 --- client/js/controls/file_dropper_control.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/client/js/controls/file_dropper_control.js b/client/js/controls/file_dropper_control.js index 2dfb49229..931501484 100644 --- a/client/js/controls/file_dropper_control.js +++ b/client/js/controls/file_dropper_control.js @@ -19,7 +19,8 @@ class FileDropperControl extends events.EventTarget { lock: options.lock, id: "file-" + Math.random().toString(36).substring(7), urlPlaceholder: - options.urlPlaceholder || "Alternatively, paste an URL here.", + options.urlPlaceholder || + "Alternatively, paste an image or URL here.", }); this._dropperNode = source.querySelector(".file-dropper"); @@ -48,6 +49,9 @@ class FileDropperControl extends events.EventTarget { this._urlInputNode.addEventListener("keydown", (e) => this._evtUrlInputKeyDown(e) ); + this._urlInputNode.addEventListener("paste", (e) => + this._evtPaste(e) + ); } if (this._urlConfirmButtonNode) { this._urlConfirmButtonNode.addEventListener("click", (e) => @@ -129,6 +133,17 @@ class FileDropperControl extends events.EventTarget { this._emitFiles(e.dataTransfer.files); } + _evtPaste(e) { + const items = (e.clipboardData || e.originalEvent.clipboardData).items; + const fileList = Array.from(items).map((x) => x.getAsFile()); + + if (!this._options.allowMultiple && fileList.length > 1) { + window.alert("Cannot select multiple files."); + } else { + this._emitFiles(fileList); + } + } + _evtUrlInputKeyDown(e) { if (e.which !== KEY_RETURN) { return; From 9eb128bf05dbaf02c91c6a95f5ef99a80a7334ce Mon Sep 17 00:00:00 2001 From: neobooru <50623835+neobooru@users.noreply.github.com> Date: Fri, 4 Jun 2021 20:25:41 +0200 Subject: [PATCH 2/5] client/upload: don't call emitFiles when there are none --- client/js/controls/file_dropper_control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/js/controls/file_dropper_control.js b/client/js/controls/file_dropper_control.js index 931501484..6504f1b8d 100644 --- a/client/js/controls/file_dropper_control.js +++ b/client/js/controls/file_dropper_control.js @@ -139,7 +139,7 @@ class FileDropperControl extends events.EventTarget { if (!this._options.allowMultiple && fileList.length > 1) { window.alert("Cannot select multiple files."); - } else { + } else if (fileList.length > 0) { this._emitFiles(fileList); } } From 444e46c4ab59b5e435baede517df28c14b8bbd4f Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 17 May 2023 07:35:24 +0200 Subject: [PATCH 3/5] client/upload: allow pasting anywhere, fix error on images from browser DataTransferItem.getAsFile() can return null, e.g. when pasting an image copied from chrome. Filter the array to get rid of these. --- client/js/controls/file_dropper_control.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/client/js/controls/file_dropper_control.js b/client/js/controls/file_dropper_control.js index 6504f1b8d..3db395157 100644 --- a/client/js/controls/file_dropper_control.js +++ b/client/js/controls/file_dropper_control.js @@ -19,8 +19,7 @@ class FileDropperControl extends events.EventTarget { lock: options.lock, id: "file-" + Math.random().toString(36).substring(7), urlPlaceholder: - options.urlPlaceholder || - "Alternatively, paste an image or URL here.", + options.urlPlaceholder || "Alternatively, paste an URL here.", }); this._dropperNode = source.querySelector(".file-dropper"); @@ -49,9 +48,6 @@ class FileDropperControl extends events.EventTarget { this._urlInputNode.addEventListener("keydown", (e) => this._evtUrlInputKeyDown(e) ); - this._urlInputNode.addEventListener("paste", (e) => - this._evtPaste(e) - ); } if (this._urlConfirmButtonNode) { this._urlConfirmButtonNode.addEventListener("click", (e) => @@ -59,6 +55,11 @@ class FileDropperControl extends events.EventTarget { ); } + document.onpaste = (e) => { + if (!document.querySelector(".file-dropper")) return; + this._evtPaste(e) + } + this._originalHtml = this._dropperNode.innerHTML; views.replaceContent(target, source); } @@ -135,7 +136,7 @@ class FileDropperControl extends events.EventTarget { _evtPaste(e) { const items = (e.clipboardData || e.originalEvent.clipboardData).items; - const fileList = Array.from(items).map((x) => x.getAsFile()); + const fileList = Array.from(items).map((x) => x.getAsFile()).filter(f => f); if (!this._options.allowMultiple && fileList.length > 1) { window.alert("Cannot select multiple files."); From 6599023976d82e006e8301f460d8525714ed2c9e Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 19 May 2023 04:18:07 +0200 Subject: [PATCH 4/5] client/upload: better upload page check when pasting --- client/js/controls/file_dropper_control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/js/controls/file_dropper_control.js b/client/js/controls/file_dropper_control.js index 3db395157..41be3a425 100644 --- a/client/js/controls/file_dropper_control.js +++ b/client/js/controls/file_dropper_control.js @@ -56,7 +56,7 @@ class FileDropperControl extends events.EventTarget { } document.onpaste = (e) => { - if (!document.querySelector(".file-dropper")) return; + if (!document.getElementById("post-upload")) return; this._evtPaste(e) } From d51e59192d66fb142347416458418d7551345f7d Mon Sep 17 00:00:00 2001 From: neobooru <50623835+neobooru@users.noreply.github.com> Date: Wed, 1 May 2024 14:38:54 +0200 Subject: [PATCH 5/5] Allow images to be pasted on the edit post page --- client/js/controls/file_dropper_control.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/js/controls/file_dropper_control.js b/client/js/controls/file_dropper_control.js index 41be3a425..8d1fa1639 100644 --- a/client/js/controls/file_dropper_control.js +++ b/client/js/controls/file_dropper_control.js @@ -48,6 +48,12 @@ class FileDropperControl extends events.EventTarget { this._urlInputNode.addEventListener("keydown", (e) => this._evtUrlInputKeyDown(e) ); + this._urlInputNode.addEventListener("paste", (e) => { + // document.onpaste is used on the post-upload page. + // And this event is used on the post edit page. + if (document.getElementById("post-upload")) return; + this._evtPaste(e) + }); } if (this._urlConfirmButtonNode) { this._urlConfirmButtonNode.addEventListener("click", (e) =>