//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