From b2b52ef0785a60746b68dc222fea550985e8c6e7 Mon Sep 17 00:00:00 2001
From: wewewe-ok <combination.kyoukyou@gmail.com>
Date: Mon, 1 Jul 2024 11:54:59 +0900
Subject: [PATCH] =?UTF-8?q?add:=20=E7=94=BB=E5=83=8F=E3=83=97=E3=83=AC?=
 =?UTF-8?q?=E3=83=93=E3=83=A5=E3=83=BC=E3=81=AE=E4=B8=80=E9=83=A8=E3=82=92?=
 =?UTF-8?q?Signal=E3=81=A7=E6=9B=B8=E3=81=8D=E6=8F=9B=E3=81=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 islands/ImageForm.tsx | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/islands/ImageForm.tsx b/islands/ImageForm.tsx
index faa8553..b2f24c6 100644
--- a/islands/ImageForm.tsx
+++ b/islands/ImageForm.tsx
@@ -16,26 +16,30 @@ const createAsciiArt = async (image: File) => {
 
 const loadImageWhenUploadImage = (
   fileData: FileReader,
+  uploadedImage: Signal<string>,
+  imagePreviewOpen: Signal<boolean>,
 ) => (fileData.onload = () => {
   const asciiArtPreview = document.getElementById(
     "ascii-art",
   ) as HTMLImageElement;
 
   if (asciiArtPreview.src !== "") asciiArtPreview.src = "";
-  const preview = document.getElementById("preview") as HTMLImageElement;
-  preview.src = fileData.result as string;
+  uploadedImage.value = fileData.result as string;
+  imagePreviewOpen.value = true;
 });
 
 const loadImageWhencreateAsciiArt = (
   fileData: FileReader,
   blobUrl: string,
+  uploadedImage: Signal<string>,
+  imagePreviewOpen: Signal<boolean>,
 ) => (fileData.onload = () => {
   const asciiArtPreview = document.getElementById(
     "ascii-art",
   ) as HTMLImageElement;
   asciiArtPreview.src = blobUrl;
-  const preview = document.getElementById("preview") as HTMLImageElement;
-  preview.src = "";
+  uploadedImage.value = "";
+  imagePreviewOpen.value = false;
 });
 
 const downloadAsciiArt = (asciiArtFileType: Signal<string>) => {
@@ -58,12 +62,14 @@ export default function ImageForm() {
   const isAnnounsing = useSignal(false);
   const asciiArtFileType = useSignal("");
   const errorDialogOpen = useSignal(false);
+  const uploadedImage = useSignal("");
+  const imagePreviewOpen = useSignal(false);
 
   const uploadImage = (event: Event) => {
     isActiveFileUpLoderDisable.value = true;
 
     const fileData = new FileReader();
-    loadImageWhenUploadImage(fileData);
+    loadImageWhenUploadImage(fileData, uploadedImage, imagePreviewOpen);
 
     const inputElement = event.target as HTMLInputElement;
     if (inputElement.files) {
@@ -98,7 +104,12 @@ export default function ImageForm() {
     const asciiArtBlob = await createAsciiArt(image);
     const blobUrl = await window.URL.createObjectURL(asciiArtBlob);
     const fileData = new FileReader();
-    await loadImageWhencreateAsciiArt(fileData, blobUrl);
+    await loadImageWhencreateAsciiArt(
+      fileData,
+      blobUrl,
+      uploadedImage,
+      imagePreviewOpen,
+    );
     fileData.readAsDataURL(asciiArtBlob);
 
     isActiveFileUpLoderDisable.value = false;
@@ -136,7 +147,14 @@ export default function ImageForm() {
             </div>
           )
           : undefined}
-        <img id="preview" name="preview" class="max-w-xs max-h-56 " />
+        {imagePreviewOpen.value && (
+          <img
+            id="preview"
+            name="preview"
+            src={uploadedImage.value}
+            class="max-w-xs max-h-56 "
+          />
+        )}
         <img id="ascii-art" src="" class="max-w-xs max-h-56 content-center" />
         <button
           class="border border-black rounded-md border-green-300 bg-green-300"