Filepond with multiple instances on one page: only the last instance uploads correctly

Question

I am using Filepond, an otherwise amazing plugin, but when I try to place multiple instances on the same page, only the last instance uploads correctly. All the other ones display correctly, but only upload to the "tmp" folder: the files never making it to the "uploads" folder.

The code I'm using is the following, that was actually found in a previous SO question (the only difference is my "define server location" at the end): How do I set up multiple FilePond file input elements on the same page?

Here it is:

<input type="file" class="filepond">
<input type="file" class="filepond">
<input type="file" class="filepond">

<script>
// get a collection of elements with class filepond
const inputElements = document.querySelectorAll('input.filepond');

// loop over input elements
Array.from(inputElements).forEach(inputElement => {

// create a FilePond instance at the input element location
FilePond.create(inputElement);

// define the server location
FilePond.setOptions({
server: 'http://localhost:8080/wp12-fidusalaire/wp-content/plugins/one-shot-form/',
});


})
</script>

Thank you dearly!

Answer 1

Sorry that this answer is coming late. Just do it like this below

const inputElements = document.querySelectorAll('input.filepond');

// loop over input elements
Array.from(inputElements).forEach(inputElement => {

const pond = FilePond.create(inputElement, options);

// define the server location
pond.setOptions({
server: 'http://localhost:8080/wp12-fidusalaire/wp-content/plugins/one-shot-form/',
});
});