frontend: image file pickers

This commit is contained in:
OleSTEEP 2025-10-16 22:51:37 +03:00
parent 41be12050d
commit 792006c7f1
4 changed files with 42 additions and 26 deletions

View file

@ -1,24 +1,29 @@
<script lang="ts">
let { handler = () => {}, type = "button", files = $bindable() } = $props();
let file_list: FileList = $state([]);
let file_list = $state();
$effect(() => {
// FileList -> Array[File]
let f_list: Array<File> = [];
for (let file of file_list)
f_list.push(file);
files = f_list;
if (file_list) {
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={file_list} type="file"/>
<label class="plus round" style="height: 48px; display: inline-block;">+
<input accept="image/png, image/jpeg" style="display: none" bind:files={file_list} type="file"/>
</label>
{:else}
<label for="file-upload" class="file-plus rounded">Загрузить файл</label>
<input id="file-upload" style="display: none" bind:files={file_list} multiple type="file"/>
<label class="file-plus rounded">Загрузить файл
<input style="display: none" bind:files={file_list} multiple type="file"/>
</label>
{/if}
<style>