helpers/upload-files.js

export const upload = function(superClass) {
  return class extends superClass {
    /**
     * Upload files to the backend
     *
     * @param {String} id An identifier send with the upload events to filter out the right upload if multiple onces are running.
     * @param {Array} files List of files to upload
     * @param {Object} opts Upload options
     * @returns Promise
     */
    uploadFiles(url, files, data = {}) {
      return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        const formData = new FormData();

        for (const key in data) {
          formData.append(key, data[key]);
        }

        request.open('POST', url, true);
        request.addEventListener('readystatechange', () => {
          if (request.readyState === 4) {
            resolve(request);
          }
        });

        request.addEventListener('loadstart', e => {
          this.dispatchEvent(new CustomEvent('upload-started', { detail: e, bubbles: true, composed: true }));
        });

        request.addEventListener('progress', e => {
          this.dispatchEvent(new CustomEvent('upload-progress', { detail: { percent: ((e.loaded / e.total) * 100).toFixed(2) }, bubbles: true, composed: true }));
        });

        request.addEventListener('error', e => {
          this.dispatchEvent(new CustomEvent('upload-error', { detail: e, bubbles: true, composed: true }));
        });

        request.addEventListener('error', e => {
          this.dispatchEvent(new CustomEvent('upload-error', { detail: e, bubbles: true, composed: true }));
        });

        request.addEventListener('load', () => {
          this.dispatchEvent(new CustomEvent('upload-finished', { detail: null, bubbles: true, composed: true }));
        });

        request.addEventListener('abort', () => {
          this.dispatchEvent(new CustomEvent('upload-aborted', { detail: null, bubbles: true, composed: true }));
        });

        for (let i = 0; i < files.length; i++) {
          formData.append(files[i].name, files[i]);
        }

        document.dispatchEvent(new CustomEvent('before-request', { detail: request, bubbles: true, composed: true }));

        request.send(formData);
      });
    }
  };
};