svelte-filepond
svelte-filepond copied to clipboard
setOptions is not a function
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:
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}
/>
Were you ever able to figure out the styling? mine looks exactly the same.
I copied the styles from their home page. What is in the docs didnt seem to do anything.