Filepond Image Uploader - setOptions on multiple instances

Question

Using the Filepond plugin, I want to have separate setOptions for each instance of Filepond. The problem is that I don't know how to get setOptions to work for each instance and not universally.

How do I set up the plugin to recognize each .filepond input as it's own instance, but allow for different setOptions on each?

/*
We want to preview images, so we need to register the Image Preview plugin
*/
FilePond.registerPlugin(
  // encodes the file as base64 data
  FilePondPluginFileEncode,

  // validates the size of the file
  FilePondPluginFileValidateSize,

  // corrects mobile image orientation
  FilePondPluginImageExifOrientation,

  // previews dropped images
  FilePondPluginImagePreview
);
// get a collection of elements with class filepond
const inputElements = document.querySelectorAll(".filepond");

// loop over input elements
Array.from(inputElements).forEach((inputElement) => {
  // create a FilePond instance at the input element location
  FilePond.create(inputElement);
});

FilePond.setOptions({
  labelIdle: 'Drag & Drop your file or <span class="filepond--label-action"> Browse </span>'
});

.filepond--item {
  height: 90px !important;
  width: 90px;
  overflow: hidden;
}


/**
 * FilePond Custom Styles
 */

.filepond--drop-label {
  color: #4c4e53;
}

.filepond--label-action {
  text-decoration-color: #babdc0;
}

.filepond--panel-root {
  border-radius: 2em;
  background-color: #edf0f4;
  height: 1em;
}

.filepond--item-panel {
  background-color: #595e68;
}

.filepond--drip-blob {
  background-color: #7f8a9a;
}

<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>

<!--
The classic file input element we'll enhance to a file pond
-->
<input type="file" class="filepond filepond--first" name="filepond" multiple data-max-file-size="3MB" data-max-files="5" />

<input type="file" class="filepond filepond--second" name="filepond" multiple data-max-file-size="3MB" data-max-files="1" />

<!-- file upload itself is disabled in this pen -->

Answer 1

FilePond.setOptions will assign options to all instances.

Calling FilePond.create will return the created instance and this instance will have a setOptions method as well. So you can call myInstance.setOptions if you want to set options for a specific instance.