meraproject/lib/js/bws/react/ui/dropper.js

//types:
// image
var Dropper, FileUploadBar;
export default window.Dropper = Dropper = class Dropper extends React.Component {
  constructor(props) {
    var ref, ref1;
    super(props);
    this.state = {
      files: [],
      uploads: []
    };
    this.buttonTitle = (ref = props.buttonTitle) != null ? ref : 'Загрузить';
    this.file = null;
    this.type = (ref1 = props.type) != null ? ref1 : 'image';
    this.sendFiles = this.sendFiles.bind(this);
    this.sendFile = this.sendFile.bind(this);
    this.changeFiles = this.changeFiles.bind(this);
    this.url = '';

    switch (this.type) {
      case 'image':
        this.url = '/api/common.image/upload/';
        break;

      case 'dsek_file':
        this.url = '/api/themes.dsek.file/upload/';
        break;

      case 'kptracking_file':
        this.url = '/api/themes.kptracking.file/upload/';
    }
  }

  changeFiles() {
    return this.sendFiles();
  }

  clickChooseFile() {
    console.log('click clack', this.file);
    return $(this.file).click();
  }

  sendFiles() {
    var f, file, files, ref, ref1, ref2, ref3, ref4, results;
    files = this.file.files;
    results = [];

    for (file in files) {
      f = files[file];

      if (f !== void 0 && f.type !== void 0 && ((f != null ? (ref = f.type) != null ? ref.match(/image.*/) : void 0 : void 0) || (f != null ? (ref1 = f.type) != null ? ref1.match(/audio.*/) : void 0 : void 0) || (f != null ? (ref2 = f.type) != null ? ref2.match(/text.*/) : void 0 : void 0) || (f != null ? (ref3 = f.type) != null ? ref3.match(/application.*/) : void 0 : void 0) || (f != null ? (ref4 = f.type) != null ? ref4.match(/video.*/) : void 0 : void 0))) {
        results.push(this.sendFile(f));
      } else {
        results.push(void 0);
      }
    }

    return results;
  }

  sendFile(f) {
    var uploads;
    ({
      uploads
    } = this.state);
    uploads.push( /*#__PURE__*/React.createElement(FileUploadBar, {
      file: f,
      url: this.url,
      callback: this.props.callback,
      data: this.props.data
    }));
    return this.setState({
      uploads
    });
  }

  render() {
    var _this = this;

    var uploads;
    uploads = this.state.uploads;
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "uploads"
    }, uploads), /*#__PURE__*/React.createElement("input", {
      type: "file",
      ref: function (i) {
        return _this.file = i;
      },
      onChange: this.changeFiles,
      className: "dn"
    }), /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "btn blue small ml-0",
      onClick: this.clickChooseFile.bind(this)
    }, this.buttonTitle));
  }

};
FileUploadBar = class FileUploadBar extends React.Component {
  constructor(props) {
    var ref, ref1;
    super(props);
    this.file = props.file;
    this.reader = null;
    this.url = props.url;
    this.data = (ref = props.data) != null ? ref : [];
    this.callback = (ref1 = props.callback) != null ? ref1 : null;
    this.state = {
      percent: 0,
      uploaded: false
    };
    this.createRequestObject = this.createRequestObject.bind(this);
    this.onLoadEnd = this.onLoadEnd.bind(this);
    this.onProgress = this.onProgress.bind(this);
    this.onReadyStateChange = this.onReadyStateChange.bind(this);
  }

  createRequestObject() {
    if (typeof XMLHttpRequest === 'undefined') {
      try {
        return new ActiveXObject("Msxml2.XMLHTTP.6.0");
      } catch (error) {}

      try {
        return new ActiveXObject("Msxml2.XMLHTTP.3.0");
      } catch (error) {}

      try {
        return new ActiveXObject("Msxml2.XMLHTTP");
      } catch (error) {}

      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (error) {}

      throw new Error("This browser does not support XMLHttpRequest.");
    }

    return new XMLHttpRequest();
  }

  onLoadEnd(e) {
    var body, boundary, d, data, f, xhr;
    f = this.file;
    data = this.data;
    console.log('upload_to', this.url, data);
    xhr = this.createRequestObject();
    xhr.upload.addEventListener("progress", this.onProgress, false);
    xhr.onreadystatechange = this.onReadyStateChange;
    xhr.open("POST", this.url);
    boundary = "xxxxxxxxx";
    xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
    xhr.setRequestHeader("Cache-Control", "no-cache");
    body = "--" + boundary + "\r\n";
    body += "Content-Disposition: form-data; name='myFile'; filename='" + f.name + "'\r\n";
    body += 'Content-Type: ' + f.type + '\r\n\r\n';
    body += this.reader.result + "\r\n";
    body += "--" + boundary + "\r\n";

    for (d in data) {
      body += 'Content-Disposition: form-data; name="' + d + '"' + "\r\n\r\n";
      body += data[d] + "\r\n";
      body += "--" + boundary + "\r\n";
    } //console.log('send',body)


    if (xhr.sendAsBinary) {
      // только для firefox
      return xhr.sendAsBinary(body);
    } else {
      // chrome (так гласит спецификация W3C)
      return xhr.send(body);
    }
  }

  onReadyStateChange(e) {
    var res, t; //console.log 'onReadyStateChange',e

    t = e.target;

    if (t.readyState === 4) {
      if (t.status === 200) {
        if (this.callback != null) {
          res = t.responseText;

          try {
            res = JSON.parse(res);
          } catch (error) {
            res = t.responseText;
          } //console.log t.responseText


          this.callback(res);
          return this.setState({
            uploaded: true
          });
        }
      }
    }
  }

  onProgress(e) {
    var pro;
    pro = 0;

    if (e.lengthComputable) {
      pro = e.loaded * 100 / e.total;
    }

    return this.setState({
      percent: pro
    });
  } //console.log 'onProgress',pro


  componentDidMount() {
    return this.sendFile();
  }

  sendFile() {
    this.reader = new FileReader();
    this.reader.onloadend = this.onLoadEnd;
    return this.reader.readAsDataURL(this.file);
  }

  render() {
    var percent, uploaded;
    ({
      percent,
      uploaded
    } = this.state);

    if (uploaded) {
      return null;
    }

    return /*#__PURE__*/React.createElement("div", null, percent, "%");
  }

};
//# sourceMappingURL=dropper.js.map