Filestack Demo - Multiple Drop Panes

Create multiple drop panes in the same page

HTML

<section class="container">
  <div id="droppane1"></div>
  <div id="droppane2"></div>
  <div id="droppane3"></div>
  <div id="droppane4"></div>
</section>
<script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>

CSS

.container {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
}

.container>div {
    flex: 1 1 300px;
    height: 200px;
    padding: 20px;
}

JavaScript

window.addEventListener('DOMContentLoaded', function () {
  const apikey = 'YOUR_APIKEY';
  const client = filestack.init(apikey);

  const makeDropPane = (container, opts) => {
    const options = {
      container, // can be CSS selector string or DOM node
      displayMode: 'dropPane',
      dropPane: {
        overlay: false, // if this is true then overlays will conflict between instances
        onSuccess: function (res) { console.log(res) },
      },
    };
    client.picker(options).open();
  };

  [ 'droppane1',
    'droppane2',
    'droppane3',
    'droppane4',
  ].forEach(function (id) {
    makeDropPane(id);
  });
});