How do I set up multiple FilePond file input elements on the same page?

Question

Whenever I try to create multiple Filepond inputs on the same webpage, only the first input get styled and works perfectly as the example on the FilePond website the others doesn't work. Please help as I have tried my best and still not getting it. ScreenShot of what I mean

Answer 1

It looks like the fields in the screenshot are not initialised, you need to target each field you want to turn into a FilePond instance.

See example code here for a single instance. https://pqina.nl/filepond/docs/patterns/api/filepond-object/#creating-a-filepond-instance

For multiple instances it should be something like:

<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);

})
</script>