Q: Filepond with multiple instances on one page: only the last instance uploads correctly 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!

A: 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/',
});
});


