fyp/webpage/src/lib/FileUpload.svelte

<script lang="ts">
    let { replace_slot, accept, file, notExpand } = $props<{
        replace_slot?: boolean,
        accept?: string,
        file?: File,
        notExpand?: boolean
    }>();

    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 && !notExpand} 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>