VienDesu/vnshed
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: bind images

Browse source
This commit is contained in:
OleSTEEP 2025-10-16 18:58:40 +03:00
parent b944b4566e
commit a3e78a43bc
2 changed files with 20 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/lib/components/containers/images.svelte
View file

@ -3,10 +3,19 @@
let { value = $bindable([]) } = $props(); let { value = $bindable([]) } = $props();
let images: Array<File> = $state([]);
$effect(() => {
console.log(images);
})
</script> </script>
<div class="img-conatiner rounded"> <div class="img-conatiner rounded">
<Image /> {#each images as image, index}
<Image bind:image={images[index]}/>
{/each}
<Image bind:image={images[images.length]}/>
</div> </div>
<style> <style>

18
frontend/src/lib/components/image.svelte
View file

@ -1,23 +1,25 @@
<script> <script>
import AddButton from "./add_button.svelte"; import AddButton from "./add_button.svelte";
let { direction = "horisontal", shape = "rounded" } = $props();
let images = $state(); let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
let image = $state(); let files = $state();
let img_node = $state();
$effect(() => { $effect(() => {
if (images.length > 0) { if (files.length > 0) {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener("load", function () { 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> </script>
<div class="{direction} input img-div {shape}"> <div class="{direction} input img-div {shape}">
<AddButton type="image" bind:files={images}/> <AddButton type="image" bind:files/>
<img bind:this={image} src="" alt=""> <img bind:this={img_node} src="" alt="">
</div> </div>
<style> <style>