basisjs/basisjs

const Field = require('app.ui.common.field').Field;
const Preloader = require('app.ui.common.preloader');
const DomEvent = require('basis.dom.event');
const FileUploader = require('basis.net.upload').FileUploader;
const Config = require('app.config');
const STATE = require('basis.data.state');
const arrayFrom = basis.array.from;

const ImageUploader = Field.subclass({
  template: resource('./templates/imageUploader.tmpl'),
  init: function() {
    Field.prototype.init.call(this);

    this.fileUploader = new FileUploader({
      handler: {
        start: () => this.setState(STATE.PROCESSING),
        success: (self, request, response) => {
          this.setState(STATE.READY);
          this.setValue(response.data);
        }
      }
    });
  },
  uploadUrl: '',
  data: {
    hovered: false,
    uploading: false
  },
  binding: {
    objectId: node => node.basisObjectId,
    hovered: 'data:',
    preloader: 'satellite:'
  },
  satellite: {
    preloader: {
      instance: Preloader,
      events: 'stateChanged',
      existsIf: (owner) => owner.state == STATE.PROCESSING
    }
  },
  templateSync: function(){
    Field.prototype.templateSync.call(this);

    let dropZone = this.tmpl.dropZone;
    let fileInput = this.tmpl.fileInput;

    arrayFrom(['dragenter', 'dragover', 'dragleave', 'drop']).forEach((eventName) => {
      DomEvent.addHandler(dropZone, eventName, this.preventDefaults, this)
    });
    arrayFrom(['dragenter', 'dragover']).forEach((eventName) => {
      DomEvent.addHandler(dropZone, eventName, this.highlight, this)
    });
    arrayFrom(['dragleave', 'drop']).forEach((eventName) => {
      DomEvent.addHandler(dropZone, eventName, this.unhighlight, this)
    });
    DomEvent.addHandler(dropZone, 'drop', this.dropHandler, this);
    DomEvent.addHandler(fileInput, 'change', this.fileSelectionHandler, this);
  },
  highlight: function () {
    this.update({ hovered: true })
  },
  unhighlight: function () {
    this.update({ hovered: false })
  },
  preventDefaults: function(e) {
    e.preventDefault();
    e.stopPropagation();
  },
  dropHandler: function (e) {
    let dataTransfer = e.dataTransfer;
    let file = dataTransfer.files[0];

    this.processFile(file);
  },
  fileSelectionHandler: function () {
    let fileInput = this.tmpl.fileInput;
    let file = fileInput.files[0];

    this.processFile(file);
  },
  processFile: function (file) {
    let reader = new FileReader();

    reader.readAsDataURL(file);
    reader.onload = () => {
      this.setValue(reader.result);
      if(this.uploadUrl !== '')
        this.fileUploader.uploadFiles(Config.API_HOST + this.uploadUrl, [file], 'file');
      // else
      //   this.setValue(reader.result);
    };
    reader.onerror = (error) => {
      console.log('Error: ', error);
    };
  },
  action: {
    removeIcon: function (e) {
      e.preventDefault();

      let fileInput = this.tmpl.fileInput;

      fileInput.value = '';
      this.setValue('');
    }
  }
});

module.exports = ImageUploader;