title: Filepond Image Uploader - setOptions on multiple instances
body: <p>Using the Filepond plugin, I want to have separate <code>setOptions</code> for each instance of <code>Filepond</code>. The problem is that I don't know how to get <code>setOptions</code> to work for each instance and not universally.</p>
  <p>How do I set up the plugin to recognize each <code>.filepond</code> input as it's own instance, but allow for different <code>setOptions</code> on each?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
  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) =&gt; {
    // create a FilePond instance at the input element location
    FilePond.create(inputElement);
  });
  
  FilePond.setOptions({
    labelIdle: 'Drag &amp; Drop your file or &lt;span class="filepond--label-action"&gt; Browse &lt;/span&gt;'
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://unpkg.com/filepond/dist/filepond.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"&gt;&lt;/script&gt;
  
  &lt;!--
  The classic file input element we'll enhance to a file pond
  --&gt;
  &lt;input type="file" class="filepond filepond--first" name="filepond" multiple data-max-file-size="3MB" data-max-files="5" /&gt;
  
  &lt;input type="file" class="filepond filepond--second" name="filepond" multiple data-max-file-size="3MB" data-max-files="1" /&gt;
  
  &lt;!-- file upload itself is disabled in this pen --&gt;</code></pre>
  </div>
  </div>
  </p>