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

frontend: implement dynamic file list

Browse source
This commit is contained in:
OleSTEEP 2025-10-14 00:06:25 +03:00
parent 09c0f12692
commit 5535ffd048
6 changed files with 63 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/lib/components/add_button.svelte
View file

@ -1,14 +1,24 @@
<script lang="ts">
let { handler = () => {}, type = "button", files = $bindable() } = $props();
let file_list: FileList = $state([]);
$effect(() => {
// FileList -> Array[File]
let f_list: Array<File> = [];
for (let file of file_list)
f_list.push(file);
files = f_list;
});
</script>
{#if type == "button"}
<button class="plus round" style="height: 32px;" onclick={handler}>+</button>
{:else if type == "image"}
<label for="img-upload" class="plus round" style="height: 48px; display: inline-block;">+</label>
<input id="img-upload" accept="image/png, image/jpeg" style="display: none" bind:files type="file"/>
<input id="img-upload" accept="image/png, image/jpeg" style="display: none" bind:files={file_list} type="file"/>
{:else}
<button class="file-plus rounded" onclick={handler}>Загрузить файл</button>
<label for="file-upload" class="file-plus rounded">Загрузить файл</label>
<input id="file-upload" style="display: none" bind:files={file_list} multiple type="file"/>
{/if}
<style>
@ -23,15 +33,14 @@
}
.file-plus {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
font-size: larger;
cursor: pointer;
text-align: center;
align-content: center;
width: 100%;
margin: 0;
height: 3rem;
border: 0.15rem dashed;
display: block;
}
@media (prefers-color-scheme: light) {