setOptions is not a function

[dp1140a]

Describe the bug

I have tried to follow the docs at https://pqina.nl/filepond/docs/api/server/#process to set server options. According to he docs I should put the following in my svelte script:

FilePond.setOptions({
    server: {
        process: './process',
        fetch: null,
        revert: null,
    },
});

My svelte page looks like:

<script>
    import FilePond, { registerPlugin, supported } from 'svelte-filepond';

    // Import the Image EXIF Orientation and Image Preview plugins
    // Note: These need to be installed separately
    // `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
    import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

    // Register the plugins
    registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

    // a reference to the component, used to call FilePond methods
    let pond;

    // pond.getFiles() will return the active files

    // the name to use for the internal file input
    let name = 'filepond';

    // handle filepond events
    function handleInit() {
        console.log('FilePond has initialised');

    }

    function handleAddFile(err, fileItem) {
        console.log('A file has been added', fileItem);
    }
</script>

<div class="app">
    <FilePond
            bind:this={pond}
            {name}
            server="http://localhost:8081/v1/model"
            allowMultiple={true}
            oninit={handleInit}
            onaddfile={handleAddFile}
    />
</div>

When I do i get a 500 error and the browser console tells me:

proxy.js?v=a2ce5f93:19 TypeError: FilePond.setOptions is not a function
    at instance (+page.svelte:16:14)
    at init (index.mjs:2165:11)
    at new Page (+page.svelte:42:28)
    at createComponent (svelte-hooks.js?v=a2ce5f93:206:20)
    at targetCmp.$replace (svelte-hooks.js?v=a2ce5f93:269:15)
    at refreshComponent (proxy.js?v=a2ce5f93:171:15)
    at ProxyAdapterDom.rerender (proxy-adapter-dom.js?v=a2ce5f93:77:5)
    at proxy.js?v=a2ce5f93:408:9
    at Array.forEach (<anonymous>)
    at Object.reload (proxy.js?v=a2ce5f93:406:15)

I have also tried it as: page.setOptions(....)

This also does not work.

However when I do not try to setOptions and just use the doc as is, it does seem to work. At least according to my server.

To Reproduce Use this sveltekit page in a sveltekit app

Expected behavior If I follow the docs it should work

As a side question, how can I style the fileset div. Mine looks pretty bad:

[rikschennink]

When using a framework you can pass the options to the component directly.

    <FilePond
            bind:this={pond}
            {name}
            server={{
                   process: "http://localhost:8081/v1/model",
                   fetch: null,
                   revert: null,
            }}
            allowMultiple={true}
            oninit={handleInit}
            onaddfile={handleAddFile}
    />

[zadamg]

Were you ever able to figure out the styling? mine looks exactly the same.

[dp1140a]

I copied the styles from their home page. What is in the docs didnt seem to do anything.

[RemcoE33]

The problem is that i do not have the destory method available on the pond variable. This makes reactivity a bit hard to do.

[rikschennink]

@RemcoE33 when the <FilePond> component is removed it automatically calls the destroy logic.

[rikschennink]

Perhaps useful, an example project: https://stackblitz.com/github/pqina/pintura-example-filepond