Merge pull request #510 from vivganes/patch-502

add ability to paste image from clipboard

packages/app/src/Element/NoteCreator.tsx

@@ -27,6 +27,8 @@ import type { RootState } from "State/Store";
 import { LNURL } from "LNURL";
 
 import messages from "./messages";
+import { ClipboardEventHandler, useState } from "react";
+import Spinner from "Icons/Spinner";
 
 interface NotePreviewProps {
   note: TaggedRawEvent;
@@ -58,6 +60,7 @@ export function NoteCreator() {
   const zapForward = useSelector((s: RootState) => s.noteCreator.zapForward);
   const sensitive = useSelector((s: RootState) => s.noteCreator.sensitive);
   const pollOptions = useSelector((s: RootState) => s.noteCreator.pollOptions);
+  const [uploadInProgress, setUploadInProgress] = useState(false);
   const dispatch = useDispatch();
 
   async function sendNote() {
@@ -99,6 +102,19 @@ export function NoteCreator() {
   async function attachFile() {
     try {
       const file = await openFile();
+      if (file) {
+        uploadFile(file);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        dispatch(setError(error?.message));
+      }
+    }
+  }
+
+  async function uploadFile(file: File | Blob) {
+    setUploadInProgress(true);
+    try {
       if (file) {
         const rx = await uploader.upload(file, file.name);
         if (rx.url) {
@@ -111,6 +127,8 @@ export function NoteCreator() {
       if (error instanceof Error) {
         dispatch(setError(error?.message));
       }
+    } finally {
+      setUploadInProgress(false);
     }
   }
 
@@ -205,6 +223,25 @@ export function NoteCreator() {
     }
   }
 
+  const handlePaste: ClipboardEventHandler<HTMLDivElement> = evt => {
+    if (evt.clipboardData) {
+      const clipboardItems = evt.clipboardData.items;
+      const items: DataTransferItem[] = Array.from(clipboardItems).filter(function (item: DataTransferItem) {
+        // Filter the image items only
+        return /^image\//.test(item.type);
+      });
+      if (items.length === 0) {
+        return;
+      }
+
+      const item = items[0];
+      const blob = item.getAsFile();
+      if (blob) {
+        uploadFile(blob);
+      }
+    }
+  };
+
   return (
     <>
       {show && (
@@ -212,7 +249,9 @@ export function NoteCreator() {
           {replyTo && <NotePreview note={replyTo} />}
           {preview && getPreviewNote()}
           {!preview && (
-            <div className={`flex note-creator${replyTo ? " note-reply" : ""}${pollOptions ? " poll" : ""}`}>
+            <div
+              onPaste={handlePaste}
+              className={`flex note-creator${replyTo ? " note-reply" : ""}${pollOptions ? " poll" : ""}`}>
               <div className="flex f-col f-grow">
                 <Textarea
                   autoFocus
@@ -242,6 +281,7 @@ export function NoteCreator() {
             </div>
           )}
           <div className="note-creator-actions">
+            {uploadInProgress && <Spinner />}
             <button className="secondary" type="button" onClick={() => dispatch(setShowAdvanced(!showAdvanced))}>
               <FormattedMessage defaultMessage="Advanced" />
             </button>

packages/app/src/translations/ar_SA.json

@@ -338,4 +338,4 @@
   "zjJZBd": "انت جاهز!",
   "zonsdq": "فشل تحميل خدمة LNURL",
   "zvCDao": "تظهر تلقائيا أحدث الملاحظات"
-}
+}

packages/app/src/translations/da_DK.json

@@ -338,4 +338,4 @@
   "zjJZBd": "You're ready!",
   "zonsdq": "Failed to load LNURL service",
   "zvCDao": "Automatically show latest notes"
-}
+}

packages/app/src/translations/de_DE.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Sie sind bereit!",
   "zonsdq": "Fehler beim Laden des LNURL-Dienstes",
   "zvCDao": "Neueste Beiträge automatisch anzeigen"
-}
+}

packages/app/src/translations/en.json

@@ -343,4 +343,4 @@
   "zjJZBd": "You're ready!",
   "zonsdq": "Failed to load LNURL service",
   "zvCDao": "Automatically show latest notes"
-}
+}

packages/app/src/translations/es_ES.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Estás listo!",
   "zonsdq": "Error al contactar con el servicio LNURL",
   "zvCDao": "Mostrar notas nuevas automáticamente"
-}
+}

packages/app/src/translations/fr_FR.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Tu es prêt!",
   "zonsdq": "Échec du chargement du service LNURL",
   "zvCDao": "Afficher automatiquement les dernières notes"
-}
+}

packages/app/src/translations/hr_HR.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Spremni ste!",
   "zonsdq": "Neuspješno učitavanje LNURL usluge",
   "zvCDao": "Automatski prikaži najnovije bilješke"
-}
+}

packages/app/src/translations/hu_HU.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Készen vagy!",
   "zonsdq": "Az LNURL szolgáltatás betöltése nem sikerült",
   "zvCDao": "Automatikusan a legfrissebb bejegyzéseket mutassa"
-}
+}

packages/app/src/translations/id_ID.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Anda siap!",
   "zonsdq": "Gagal memuat layanan LNURL",
   "zvCDao": "Tampilkan catatan terbaru secara otomatis"
-}
+}

packages/app/src/translations/it_IT.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Sei pronto!",
   "zonsdq": "Caricamento del servizio LNURL fallito",
   "zvCDao": "Visualizza automaticamente le ultime note"
-}
+}

packages/app/src/translations/ja_JP.json

@@ -338,4 +338,4 @@
   "zjJZBd": "準備完了！",
   "zonsdq": "LNURLサービスの読み込みに失敗しました",
   "zvCDao": "最新の記事を自動で表示する"
-}
+}

packages/app/src/translations/ko_KR.json

@@ -338,4 +338,4 @@
   "zjJZBd": "You're ready!",
   "zonsdq": "Failed to load LNURL service",
   "zvCDao": "Automatically show latest notes"
-}
+}

packages/app/src/translations/nl_NL.json

@@ -338,4 +338,4 @@
   "zjJZBd": "You're ready!",
   "zonsdq": "Failed to load LNURL service",
   "zvCDao": "Automatically show latest notes"
-}
+}

packages/app/src/translations/ru_RU.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Готово!",
   "zonsdq": "Не удалось загрузить службу LNURL",
   "zvCDao": "Автоматически показывать новые заметки"
-}
+}

packages/app/src/translations/sv_SE.json

@@ -338,4 +338,4 @@
   "zjJZBd": "Du är redo!",
   "zonsdq": "Det gick inte att ladda LNURL-tjänsten",
   "zvCDao": "Visa automatiskt de senaste anteckningarna"
-}
+}

packages/app/src/translations/zh_CN.json

@@ -338,4 +338,4 @@
   "zjJZBd": "你已准备就绪！",
   "zonsdq": "加载 LNURL 服务失败",
   "zvCDao": "自动显示最新便条"
-}
+}

packages/app/src/translations/zh_TW.json

@@ -338,4 +338,4 @@
   "zjJZBd": "你已經準備就緒！",
   "zonsdq": "加載 LNURL 服務失敗",
   "zvCDao": "自動顯示最新便條"
-}
+}