44 lines
1.2 KiB
Svelte
44 lines
1.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
let { replace_slot, accept, file } = $props<{
|
||
|
|
replace_slot?: boolean,
|
||
|
|
accept?: string,
|
||
|
|
file?: File,
|
||
|
|
}>();
|
||
|
|
|
||
|
|
let fileInput: HTMLInputElement;
|
||
|
|
|
||
|
|
let fileData: string | undefined = $state(undefined);
|
||
|
|
|
||
|
|
function onChange(e: Event & {currentTarget: HTMLInputElement}) {
|
||
|
|
if (!e.currentTarget.files) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
file = e.currentTarget.files[0];
|
||
|
|
|
||
|
|
const fileReader = new FileReader();
|
||
|
|
fileReader.onloadend = () => {
|
||
|
|
fileData = String(fileReader.result);
|
||
|
|
//elm.classList.add("adapt");
|
||
|
|
}
|
||
|
|
fileReader.readAsDataURL(file)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="icon-holder">
|
||
|
|
<button class="icon" class:adapt={replace_slot && file} on:click={() => fileInput.click()}>
|
||
|
|
{#if replace_slot && file}
|
||
|
|
<slot name="replaced" file={file}>
|
||
|
|
<img src={fileData} alt="" />
|
||
|
|
<slot name="replaced-name">
|
||
|
|
Image Uploaded
|
||
|
|
</slot>
|
||
|
|
</slot>
|
||
|
|
{:else}
|
||
|
|
<slot></slot>
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
<input id="file" name="file" type="file" required accept={accept} bind:this={fileInput} on:change={onChange} />
|
||
|
|
</div>
|