svelte-filepond icon indicating copy to clipboard operation
svelte-filepond copied to clipboard

setOptions is not a function

Open dp1140a opened this issue 1 year ago • 6 comments

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: svelte

dp1140a avatar Jul 14 '23 01:07 dp1140a

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}
    />

rikschennink avatar Jul 14 '23 13:07 rikschennink

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

zadamg avatar Jul 20 '23 03:07 zadamg

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

dp1140a avatar Jul 20 '23 17:07 dp1140a