ffr-components/es/upload/Upload.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
// Import React Framework
import React, { Component } from 'react';
// Import Customized Components
import Button from '../button/index';
import "./style.css";
import "../theme/theme.css";

var Upload =
/*#__PURE__*/
function (_Component) {
  _inherits(Upload, _Component);

  function Upload(props) {
    var _this;

    _classCallCheck(this, Upload);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Upload).call(this, props));

    _this.upload = function () {
      _this.inputRef.current.click();
    };

    _this.fileChange = function (e) {
      var uploadStart = _this.props.uploadStart;
      var files = e.currentTarget.files;
      var currentFile = files[0];
      if (!currentFile) return;
      uploadStart && uploadStart();

      _this.fileUpload(null, currentFile);
    };

    _this.fileUpload = function (e, file) {
      var _this$props = _this.props,
          uploadUrl = _this$props.uploadUrl,
          dataKey = _this$props.dataKey;
      if (!uploadUrl) throw new Error('uploadUrl is required !');
      var formData = new FormData();
      var request = new XMLHttpRequest();
      var _file$name = file.name,
          fileName = _file$name === void 0 ? '' : _file$name;
      formData.append(dataKey, file);

      request.onreadystatechange = function () {
        return _this._readyStateChange(request, file);
      };

      request.addEventListener('error', _this._uploadFail, false);
      request.addEventListener('abort', _this._uploadAbort, false);
      request.upload && request.upload.addEventListener('progress', _this._upLoadProgress, false);
      request.open('POST', uploadUrl);
      request.setRequestHeader('FILENAME', encodeURIComponent(fileName));
      request.send(formData);
    };

    _this._upLoadProgress = function (e) {
      var upLoadProgress = _this.props.upLoadProgress;
      upLoadProgress && upLoadProgress(e);
    };

    _this._readyStateChange = function (request, file) {
      var _this$props2 = _this.props,
          uploadComplete = _this$props2.uploadComplete,
          uploadFail = _this$props2.uploadFail;

      if (~~request.readyState === 4) {
        var responseText = request.responseText;

        if (typeof responseText === 'string') {
          try {
            responseText = JSON.parse(responseText);
          } catch (e) {
            responseText = request.responseText;
            console.error(e);
          }
        }

        if (~~request.status === 200) {
          uploadComplete && uploadComplete(responseText, file);
        } else {
          uploadFail && uploadFail(responseText, file);
        }
      }
    };

    _this._uploadFail = function (e) {
      var uploadFail = _this.props.uploadFail;
      uploadFail && uploadFail(e);
    };

    _this._uploadAbort = function (e) {
      var uploadAbort = _this.props.uploadAbort;
      uploadAbort && uploadAbort(e);
    };

    _this.inputRef = React.createRef();
    return _this;
  }

  _createClass(Upload, [{
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          name = _this$props3.name,
          buttonProps = _this$props3.buttonProps;
      return React.createElement("div", {
        className: "Upload"
      }, React.createElement("input", {
        ref: this.inputRef,
        type: "file",
        name: "fileUpload",
        className: "hide",
        onChange: this.fileChange
      }), React.createElement(Button, _extends({}, buttonProps, {
        typeAttr: "button",
        onClick: this.upload
      }), name));
    }
  }]);

  return Upload;
}(Component);

Upload.defaultProps = {
  name: 'upload file',
  uploadUrl: null,
  dataKey: 'file',
  buttonProps: {}
};
export { Upload as default };