frontend: image file pickers
This commit is contained in:
parent
41be12050d
commit
792006c7f1
4 changed files with 42 additions and 26 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue