Filepond and Meteor

Anyone use filepond with Meteor? It looks amazing for image uploads.

I’m using the boilerplate (Svelte), but no luck. I just get a file upload unstyled button and when I pick a file, the name of the file shows on the screen, but nothing else happens. In the console, I see the component initialized, but the upload isn’t recognized.

Wondering if it’s a Meteor thing that I’m missing?

<style global>
@import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
</style>

<script>
import FilePond, { registerPlugin, supported } from "svelte-filepond";
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="{name}"
    server="/api"
    allowMultiple="{true}"
    oninit="{handleInit}"
    onaddfile="{handleAddFile}" />
</div>
1 Like

I guess the style issue could be solved by adding the missing css import:

import 'filepond/dist/filepond.min.css';

Furthermore, did you add a webapp handler to deal with the uploads at /api ?

Hey Peter - thanks for the help. The CSS doesn’t seem to be the issue. I tried adding the import you note, but no change. I think the css is coming in fine. Something else is off.

And no, no webapp handler as of yet.

Well if all you see is an unstyled button, then there must be some sort of CSS issue too, maybe among other problems.

Good point. I’ll dig in a bit more there. Thanks again for your thoughts.

Any progress with this @ppedrazzi?