Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setOptions is not a function #21

Open
dp1140a opened this issue Jul 14, 2023 · 3 comments
Open

setOptions is not a function #21

dp1140a opened this issue Jul 14, 2023 · 3 comments

Comments

@dp1140a
Copy link

dp1140a commented Jul 14, 2023

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

@rikschennink
Copy link
Collaborator

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
Copy link

zadamg commented Jul 20, 2023

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

@dp1140a
Copy link
Author

dp1140a commented Jul 20, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants