As <file-pond> is a custom element we can use jQuery like we would with other HTML elements.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<form action="/upload" method="POST">
<file-pond>
<label for="my-file">Drop files here, or <u>browse</u></label>
<input id="my-file" type="file" name="files" required />
</file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
// filepond imports
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
// defines <file-pond> element
defineFilePond({
locale,
});
// listen for changes
$('file-pond').on('change', function (event) {
console.log(event.target.entries);
});
</script>
We can create a FilePond element like we can any other element.
// create a file pond element
const $element = $('<file-pond>', {
on: {
change: function (event) {
console.log(event);
},
},
});
// add it to the body
$element.appendTo('form');