Something went wrong. Try again.
Coves frontend - a photon fork
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<script lang="ts"> import { Button, Label } from '$lib/ui/kit' import { generateID } from './helper'
interface Props { accept?: string id?: string files?: FileList | null multiple?: boolean preview?: boolean label?: string | undefined class?: string customLabel?: import('svelte').Snippet button?: import('svelte').Snippet choose?: import('svelte').Snippet }
let { accept = '*', id = generateID(), files = $bindable(), multiple = false, preview = true, label = undefined, class: clazz = '', customLabel, button, choose, }: Props = $props()
let previewURLs = $derived( preview && files ? Array.from(files).map(URL.createObjectURL) : undefined, )</script>
<div class="flex flex-col gap-1 {clazz}"> {#if customLabel || label} <Label for={id} text={label}> {@render customLabel?.()} </Label> {/if} <label class="w-max relative cursor-pointer space-x-2 flex flex-row items-center" > {#if button}{@render button()}{:else} <Button>Browse</Button> {/if} {#if previewURLs} <div class="flex flex-row items-center -space-x-1 hover:space-x-1 z-20 h-8" > {#each previewURLs as file (file)} <img src={file} onload={() => URL.revokeObjectURL(file)} alt="" class="w-8 h-8 object-cover rounded-full hover:w-16 hover:h-16 transition-all border border-slate-200 ring-1 ring-slate-50 dark:ring-zinc-950 bg-white dark:bg-zinc-950" /> {/each} </div> {/if} <span class="flex flex-row items-center text-slate-600 dark:text-zinc-400"> {#if choose}{@render choose()}{:else if (files ?? []).length == 0} No file selected. {:else} {(files ?? []).length} files selected {/if} </span> <input type="file" bind:files {accept} {multiple} class="w-full h-full inset-0 opacity-0 absolute cursor-pointer" /> </label></div>