Filestack Demo - multiupload File

Upload files using client

HTML

<html>
  <head></head>
  <body>
    <input type="file" />
    <div class="controls">
      <button id="cancel">Cancel</button>
      <button id="pause">Pause</button>
      <button id="resume">Resume</button>
    </div>
    <div>Progress: <span id="progress"></span></div>
    <script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
  </body>
</html>

JavaScript

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

  const onProgress = (evt) => {
    document.getElementById('progress').innerHTML = `${evt.totalPercent}%`;
  };

  document.querySelector('input').addEventListener('change', (event) => {
    const files = event.target.files[0];
    const token = {};
    const cancel = document.getElementById('cancel');
    const pause = document.getElementById('pause');
    const resume = document.getElementById('resume');

    [cancel, resume, pause].forEach((btn) => {
      const id = btn.id;
      btn.addEventListener('click', () => {
        token[id]();
      });
    });

    client.upload(files, { onProgress }, {}, token)
      .then(res => {
        console.log('success: ', res)
      })
      .catch(err => {
        console.log(err)
      });
  });
});