Compose: Bild aus Zwischenablage per Strg+V einfügen

paste-Listener am Formular übernimmt ein Clipboard-Bild in den File-Input
(via DataTransfer), benennt es zu zwischenablage.<ext> und zeigt einen
grauen Hinweis über dem Datei-Input. Kein Bild -> normaler Text-Paste.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-16 14:22:14 +02:00
parent e7a7ef8d20
commit def6a13782
2 changed files with 30 additions and 0 deletions
+1
View File
@@ -46,6 +46,7 @@
<section id="compose" hidden>
<form id="entry-form">
<textarea name="content" rows="4" maxlength="1000" placeholder="Was gibt's Neues?"></textarea>
<p class="muted" id="paste-msg"></p>
<input name="file" type="file" accept="image/*">
<button type="submit">Posten</button>
</form>
+29
View File
@@ -88,6 +88,7 @@ document.getElementById("entry-form").addEventListener("submit", async (e) => {
const msg = document.getElementById("entry-msg");
if (res.ok) {
msg.textContent = "";
document.getElementById("paste-msg").textContent = "";
e.target.reset();
feed.reset();
} else {
@@ -95,6 +96,34 @@ document.getElementById("entry-form").addEventListener("submit", async (e) => {
}
});
// --- Bild aus der Zwischenablage einfügen ---
// Strg+V im Textfeld: liegt ein Bild in der Zwischenablage, übernehmen wir es in
// den File-Input (über DataTransfer, weil sich .files nicht direkt setzen lässt).
// Liegt kein Bild vor (Text o. Ä.), tun wir nichts und lassen den normalen Paste
// durchlaufen -> preventDefault nur, wenn wir wirklich ein Bild gegriffen haben.
document.getElementById("entry-form").addEventListener("paste", (e) => {
const item = [...(e.clipboardData?.items ?? [])].find(
(it) => it.kind === "file" && it.type.startsWith("image/")
);
if (!item) return;
const original = item.getAsFile();
if (!original) return;
e.preventDefault();
// Browser benennt Clipboard-Bilder uneinheitlich ("grafik.png" o. Ä.) -> neu
// verpacken mit sprechendem Namen. Endung aus dem MIME-Typ, sonst png.
const ext = (original.type.split("/")[1] || "png").toLowerCase();
const file = new File([original], `zwischenablage.${ext}`, { type: original.type });
const input = document.querySelector("#entry-form input[name='file']");
const dt = new DataTransfer();
dt.items.add(file);
input.files = dt.files;
document.getElementById("paste-msg").textContent = "Bild aus Zwischenablage übernommen.";
});
// --- Statuszeile unter dem Titel ---
// Tage ohne Datenverlust (fester Startpunkt, Kontinuität seit der alten
// Version) plus aktuelle Kennzahlen aus /stats.