From 7d2d05291b8ef536f50a1ecf05bc5fdc949acf45 Mon Sep 17 00:00:00 2001
From: rachel-mp4 <rachel@moth11.net>
Date: Thu, 16 Oct 2025 22:28:51 -0400
Subject: [PATCH] file input button prototype

---
 src/lib/components/AutoGrowTextArea.svelte | 34 ++++++++++++++++++++--
 src/lib/components/Transmitter.svelte      |  1 +
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AutoGrowTextArea.svelte b/src/lib/components/AutoGrowTextArea.svelte
index 4a0d12f..20454cc 100644
--- a/src/lib/components/AutoGrowTextArea.svelte
+++ b/src/lib/components/AutoGrowTextArea.svelte
@@ -193,7 +193,7 @@
     };
 </script>
 
-<div class="autogrowwrapper">
+<div class="autogrowwrapper" style:--fs={fs ?? "1rem"}>
     <textarea
         rows="1"
         bind:value
@@ -205,9 +205,27 @@
         onbeforeinput={bi}
         style:font-weight={bold ? "700" : "inherit"}
         style:--theme={color}
-        style:font-size={fs ?? "1rem"}
+        style:font-size="var(--fs)"
         {placeholder}
     ></textarea>
+    {#if value === ""}
+        <label class="media-upload-button" for="media-upload"
+            >...or upload an image</label
+        >
+        <input
+            onchange={(event) => {
+                if (
+                    event.currentTarget.files &&
+                    event.currentTarget.files.length > 0
+                ) {
+                    imageHandler?.(event.currentTarget.files[0]);
+                }
+            }}
+            id="media-upload"
+            type="file"
+            accept="image/*"
+        />
+    {/if}
     {#if curemojiresults !== null && curemojinumber !== null}
         <div bind:this={emojilist} class="emoji-selector">
             {#each curemojiresults[0] as result, idx}
@@ -226,6 +244,18 @@
 </div>
 
 <style>
+    #media-upload {
+        display: none;
+    }
+    .media-upload-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0;
+        font-size: var(--fs);
+        border: none;
+    }
+
     .emoji-selector {
         width: 100%;
         position: absolute;
diff --git a/src/lib/components/Transmitter.svelte b/src/lib/components/Transmitter.svelte
index 5a1cf0a..f887849 100644
--- a/src/lib/components/Transmitter.svelte
+++ b/src/lib/components/Transmitter.svelte
@@ -86,6 +86,7 @@
         }
     };
     const convertFileToImageItem = (blob: File) => {
+        cancelimagepost();
         const blobUrl = URL.createObjectURL(blob);
         ctx.initImage(blob);
         imageURL = blobUrl;
-- 
2.51.2