File Dialog

Reactive File Dialog.

Usage

<script>
    import { fileDialog } from "@sveu/browser"

    const { files, accepted, rejected, open, reset, onChange } = fileDialog()
</script>
<script>
    import { fileDialog } from "@sveu/browser"

    const { files, accepted, rejected, open, reset, onChange } = fileDialog()
</script>
svelte

Example

<script>
    import { fileDialog } from "@sveu/browser" 

    const { files, open, reset } = fileDialog() 
</script>

{#if $files}
    {#each $files as file}
        <div>
            {file.name}
        </div>
    {/each}
{/if}

<button on:click="{() => open()}">Choose files</button>

<button type="button" disabled="{!files}" on:click="{() => reset()}">
    Reset
</button>
<script>
    import { fileDialog } from "@sveu/browser" 

    const { files, open, reset } = fileDialog() 
</script>

{#if $files}
    {#each $files as file}
        <div>
            {file.name}
        </div>
    {/each}
{/if}

<button on:click="{() => open()}">Choose files</button>

<button type="button" disabled="{!files}" on:click="{() => reset()}">
    Reset
</button>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Click fold/expand code

API

Options

Name Description Type Default
multiple Allowed multiple files selection boolean false
accept Allowed file types string *
capture Capture mode string undefined


Returns

Name Description Type
files List of selected files. Readable<FileList>
accepted List of accepted files. Readable<File[]>
rejected List of rejected files. Readable<File[]>
open Open the file dialog. (localOptions?) =>void
reset Reset file dialog. () => void
onChange The event when the files change. EventHookOn<any>
Last update at: Invalid Date