FileDrop

file-drop.js

export class FileDrop {

  dragoverListener = undefined;
  dropListener = undefined;
  el = undefined;

  constructor(el) {
    this.el = el;
  }

  init() {
    return new Promise((resolve, reject) => {
      try {
        this.dragoverListener = this.el.addEventListener('dragover', (event) => {
          event.stopPropagation();
          event.preventDefault();
          event.dataTransfer.dropEffect = 'copy';
        }, false);
        this.dropListener = this.el.addEventListener('drop', (event) => {
          event.stopPropagation();
          event.preventDefault();
          this.dispose();
          resolve(event.dataTransfer.files);
        }, false);
      } catch (err) {
        this.dispose();
        reject(err);
      }
    });
  }

  dispose() {
    if (this.dragoverListener) {
      this.el.removeEventListener('dragover', this.dragoverListener, false);
    }
    if (this.dropListener) {
      this.el.removeEventListener('drop', this.dropListener, false);
    }
  }

}

in a view...

(snip)

  initFileDrop = () => {
    this.fileDrop = new FileDrop(this.$parent.chatDiv);
    this.fileDrop.init().then((files) => {
      if (files[0]) {
        this.fu.addFiles(files[0]);
      }
      this.initFileDrop();
    }).catch((err) => {
      this.logError(err);
      this.sendStackTrace('error', 'browser:::init_file_drop:catch', err, {
        reason: err.message
      });
      this.initFileDrop();
    });
  };
  
(snip)