Bind working i daresay

src/lib/components/editor/imageTarget.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    let avatar: string
+    let { image = $bindable('') } = $props()
+    
     let fileinput: HTMLInputElement
     
     const onFileSelected =(e)=>{
@@ -7,7 +8,7 @@
         let reader = new FileReader();
         reader.readAsDataURL(image);
         reader.onload = e => {
-            avatar = e.target.result as string
+            image = e.target.result as string
         };
     }
     
@@ -15,17 +16,16 @@
 
 <div>
     
-    {#if avatar}
+    {#if image}
-        <button class="h-30 w-full rounded-2xl hover:text-white/30" on:click={()=>{fileinput.click();}}>
+        <button class="h-30 w-full rounded-2xl hover:text-white/30" onclick={()=>{fileinput.click();}}>
-            <img class="avatar rounded-2xl hover:brightness-50 transition-opacity" src="{avatar}" alt="d" />
+            <img class="avatar rounded-2xl hover:brightness-50 transition-opacity" src="{image}" alt="d" />
         </button> 
     {:else}
-        <button class="text-center bg-white/30 h-30 w-full rounded-2xl" on:click={()=>{fileinput.click();}}>
+        <button class="text-center bg-white/30 h-30 w-full rounded-2xl" onclick={()=>{fileinput.click();}}>
             Select Image
         </button> 
     {/if}
-    
 
-    <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e)=>onFileSelected(e)} bind:this={fileinput} >
+    <input style="display:none" type="file" accept=".jpg, .jpeg, .png" onchange={(e)=>onFileSelected(e)} bind:this={fileinput} >
 
 </div>

src/lib/components/editor/index.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
     import ImageTarget from "./imageTarget.svelte"
+    
+    let image = $state('')
 </script>
 
-<ImageTarget />
+<ImageTarget  bind:image />