Filepond and Meteor

help
1

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
2

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 ?

3

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.

4

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

5

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

6

Any progress with this @ppedrazzi?

7

Still no luck. I think it’s something with Meteor npm package mgmt. I ended up doing a more basic file upload for now just to keep moving.