1

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

Klemz Junior
  • 23
  • 1
  • 5
  • The minimum requirements at Stack Overflow are, that you'd post *the code relevant to the issue* in the question itself, and *describe the problem in details.* What you want your code to do, and what it does instead. – Niklas E. Jun 28 '20 at 14:34

1 Answers1

5

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>
Rik
  • 3,328
  • 1
  • 20
  • 23
  • 1
    Great, perfect. I didn't find this anywhere in the filepond docs. – Ben Viatte Sep 07 '20 at 05:36
  • 1
    Your code worked to make all the Filepond instances appear correctly. However I came into a bug later one: for all the instances except for the last one, the file upload doesn't work. It is only uploaded to the "tmp" folder, but never the the "uploads" folder after submit. It looks like only the instance is being considered by the php server... – Ben Viatte Sep 08 '20 at 13:44
  • Ben Viatte, have you solved your problem? I am facing the same issue I believe: I can style my 2 filepond on the same form but when submitted, the images are not copied in tmp, I have another page with only 1 filepond that works well so it seems having 2 filepond on the same form is not working well. – ceyquem Dec 10 '20 at 03:19
  • if I read the config.php file correctly, there can be only 1 filepond field per form and it has to be called "filepond": // where to get files from const ENTRY_FIELD = array('filepond'); – ceyquem Dec 10 '20 at 12:35
  • Is it possible to avoid selecting duplicate files with same name while selecting the files? – Developer Jun 30 '22 at 15:01