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 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>

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

@ -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>