From a3e78a43bc27bfa2d9090c7ea0fd6cfd99e17199 Mon Sep 17 00:00:00 2001
From: OleSTEEP <krinkinoleg@gmail.com>
Date: Thu, 16 Oct 2025 18:58:40 +0300
Subject: [PATCH] frontend: bind images

---
 .../lib/components/containers/images.svelte    | 11 ++++++++++-
 frontend/src/lib/components/image.svelte       | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/containers/images.svelte b/frontend/src/lib/components/containers/images.svelte
index 17b1ed1..51309ec 100644
--- a/frontend/src/lib/components/containers/images.svelte
+++ b/frontend/src/lib/components/containers/images.svelte
@@ -3,10 +3,19 @@
 
     let { value = $bindable([]) } = $props();
 
+    let images: Array<File> = $state([]);
+
+    $effect(() => {
+        console.log(images);
+    })
+
 </script>
 
 <div class="img-conatiner rounded">
-    <Image />
+    {#each images as image, index}
+        <Image bind:image={images[index]}/>
+    {/each}
+    <Image bind:image={images[images.length]}/>
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/image.svelte b/frontend/src/lib/components/image.svelte
index 436f2bf..43c2eb5 100644
--- a/frontend/src/lib/components/image.svelte
+++ b/frontend/src/lib/components/image.svelte
@@ -1,23 +1,25 @@
 <script>
     import AddButton from "./add_button.svelte";
-    let { direction = "horisontal", shape = "rounded" } = $props();
-    let images = $state();
-    let image = $state();
+
+    let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
+    let files = $state();
+    let img_node = $state();
 
     $effect(() => {
-        if (images.length > 0) {
+        if (files.length > 0) {
             const reader = new FileReader();
             reader.addEventListener("load", function () {
-                image.setAttribute("src", reader.result);
+                img_node.setAttribute("src", reader.result);
             });
-            reader.readAsDataURL(images[0]);
+            reader.readAsDataURL(files[0]);
+            image = files[0];
         }
 	});
 </script>
 
 <div class="{direction} input img-div {shape}">
-    <AddButton type="image" bind:files={images}/>
-    <img bind:this={image} src="" alt="">
+    <AddButton type="image" bind:files/>
+    <img bind:this={img_node} src="" alt="">
 </div>
 
 <style>