Programmatically call a modal inside a function

[Gildedter]

How do I call a modal programmatically? I have a custom FileInput component, that when clicked opens the the environment native file select, I want to open up a table nested inside a modal after selecting a file (I'm parsing the file contents inside a function)

[shinokada]

Any code what you are trying to do?

The modal button export the openFn function. Can you use it?

[Gildedter]

What I currently have (Custom) FileInput.svelte, I'm using sheetjs for file parsing

<script lang="ts">
    import { read, utils } from 'xlsx';

    export let id: string = 'id';
    export let name: string = 'name';

    let files: FileList = null;
    function handleDropAsync() {
        if (files && files[0]) {
            const file = files[0];
            const reader = new FileReader();

            reader.onload = async () => {
                const data = await file.arrayBuffer();
                const workBook = read(data);

                let rows;
                workBook.SheetNames.forEach((sheetName, sheetIndex) => {
                    const json = utils.sheet_to_json<any>(
                        workBook.Sheets[sheetName],
                        { defval: null }
                    );

                    rows = json.map((e) => e); // read file contents here
                });

                alert(rows); // call modal here
            };
            reader.readAsArrayBuffer(file);
        }
    }
</script>

<label
    for={id}
    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-base px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
    >{name}</label
><input
    type="file"
    {id}
    class="opacity-0 w-[0.1px] h-[0.1px] absolute"
    on:change={handleDropAsync}
/>

[shinokada]

Can you do like this REPL?