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
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>
Thank you very much for your feedback. It working fine now
Great, perfect. I didn't find this anywhere in the filepond docs.
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...