@agilemotion/oui-react-js 1.3.1 → 1.3.2

package/dist/components/dashboard/components/portal/Workspace.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./Workspace.css");
+
+var _Sidebar = _interopRequireDefault(require("./../../components/blackDashboard/sidebar/Sidebar"));
+
+var _ViewPort = _interopRequireDefault(require("../../../layout/ViewPort"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Workspace = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row workspace-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-* workspace-left"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      float: 'right'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Sidebar.default, _extends({}, props, {
+    routes: props.routes,
+    activeColor: "agility",
+    className: "sidebar sidebar-customizer",
+    secondaryThemeColor: props.secondaryColor,
+    activeRouteMenu: props.activeRouteMenu,
+    dashboardLauncher: () => {},
+    heading: props.heading,
+    closeSidebar: () => {}
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-* workspace-right"
+  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, {
+    settings: props.settings,
+    defaultView: "",
+    height: 'inherit'
+  }))));
+};
+
+var _default = Workspace;
+exports.default = _default;

package/dist/components/dashboard/components/portal/portal-dashboard.css

@@ -0,0 +1,25 @@
+
+/* Smartphones (landscape); */
+@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
+
+}
+
+/* Smartphones (portrait); */
+@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
+
+}
+
+/* iPads (portrait and landscape); */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+
+}
+
+/* iPad 3 */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+
+}
+
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
+
+}
+

package/dist/components/footer/Footer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Footer;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -23,10 +23,27 @@ var _CardAvatar = _interopRequireDefault(require("../card/CardAvatar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 const useStyles = (0, _styles.makeStyles)(_footerStyle.default);
 
-function Footer(props) {
+const Footer = props => {
   const classes = useStyles();
+
+  const _React$useState = _react.default.useState(props.width ? props.width : null),
+        _React$useState2 = _slicedToArray(_React$useState, 1),
+        width = _React$useState2[0];
+
   const fluid = props.fluid,
         white = props.white,
         rtlActive = props.rtlActive;
@@ -42,8 +59,16 @@ function Footer(props) {
     [classes.block]: true,
     [classes.whiteColor]: white
   });
-  return /*#__PURE__*/_react.default.createElement("footer", {
-    className: classes.footer
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.wrapper,
+    style: {
+      borderTop: '1px solid ' + props.splitterColor
+    }
+  }, /*#__PURE__*/_react.default.createElement("footer", {
+    className: classes.footer,
+    style: {
+      width: width
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: container,
     style: {
@@ -56,21 +81,29 @@ function Footer(props) {
   }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     className: classes.inlineBlock
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.right + " row "
+    className: classes.right + " row"
   }, "\xA9 ", 1900 + new Date().getYear(), " ", " ", /*#__PURE__*/_react.default.createElement("div", {
     style: {
       paddingLeft: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_CardAvatar.default, {
     plain: true
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: require("../../assets/img/flogo.png"),
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, props.logo ? /*#__PURE__*/_react.default.createElement("img", {
+    src: props.logo,
     alt: "..."
-  }))))));
-}
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, props.text ? /*#__PURE__*/_react.default.createElement("div", null, "\xA0\xA0", props.text) : null))))))));
+};
 
 Footer.propTypes = {
   fluid: _propTypes.default.bool,
   white: _propTypes.default.bool,
   rtlActive: _propTypes.default.bool
-};
+};
+var _default = Footer;
+exports.default = _default;

package/dist/components/form/BaseField.js

@@ -295,9 +295,18 @@ const BaseField = props => {
         setRequired(requiredNewVal);
       },
 
-      setFieldRequired(required) {
+      get required() {
+        return required;
+      },
+
+      setFieldRequired(newVal) {
         validateOnChange.current = true;
-        setRequired(required);
+        setRequired(newVal);
+      },
+
+      setFieldRequired(newVal, validate) {
+        validateOnChange.current = validate;
+        setRequired(newVal);
       },
 
       getChildren: () => {

package/dist/components/form/DatePicker.js

@@ -27,7 +27,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        minDate = _React$useState2[0],
+        setMinDate = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        maxDate = _React$useState4[0],
+        setMaxDate = _React$useState4[1];
+
   const base = props.base;
   const defaultDate = !_Utils.default.isNull(base.valueObject[base.valueProperty]) ? new Date(base.valueObject[base.valueProperty]) : null;
 
@@ -44,6 +66,43 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     base.setValue(defaultDate);
   }, [props.base.valueObject[props.base.valueProperty]]);
 
+  const formatNumber = n => {
+    return n < 10 ? '0' + n : n;
+  };
+
+  const getLimitDate = id => {
+    let dateAttr = _Utils.default.getComponentAttribute(props.config, id, null);
+
+    if (dateAttr) {
+      if (dateAttr.toString().includes('now')) {
+        let operator = dateAttr.toString().includes("-") ? '-' : '+';
+        let tokens = dateAttr.toString().split(operator);
+        let days = parseFloat(tokens[1].replace('d', '').trim());
+        let limit = new Date();
+
+        if ("-" === operator) {
+          limit.setDate(limit.getDate() - days);
+        } else {
+          limit.setDate(limit.getDate() + days);
+        }
+
+        return limit.getFullYear() + "-" + formatNumber(limit.getMonth() + 1) + "-" + formatNumber(limit.getDate());
+      }
+    }
+
+    return null;
+  };
+
+  _react.default.useEffect(() => {
+    if (minDate === null) {
+      setMinDate(getLimitDate("minDate"));
+    }
+
+    if (maxDate === null) {
+      setMaxDate(getLimitDate("maxDate"));
+    }
+  });
+
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
   const ThemedKeyboardDatePicker = (0, _styles.withStyles)({
     root: {
@@ -72,7 +131,7 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     required: base.required,
     format: "dd/MM/yyyy",
     label: props.config.attributes['label'],
-    value: base.value,
+    value: base.value ? base.value : null,
     className: props.className,
     error: base.hasError,
     margin: "dense",
@@ -88,6 +147,8 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       'aria-label': 'change date',
       'disabled': props.disabled
     },
+    minDate: minDate !== null ? minDate : null,
+    maxDate: maxDate !== null ? maxDate : null,
     readOnly: props.readOnly
   })));
 }));

package/dist/components/form/FieldSet.js

@@ -291,7 +291,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
 
   const api = () => {
     return {
-      getId: () => {
+      get id() {
         return props.config.id;
       },
 

package/dist/components/form/Form.js

@@ -412,14 +412,28 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
               let value = _DynamicJS.default.executeScript("".concat(props.config.id, "ValueEvaluator"), componentValue);
 
               if (!_Utils.default.isNull(value)) {
-                parseValues(transformDataObject(value));
-                setMasterValues(value);
+                let val = value;
+
+                if (binder === 'MAP_OBJECT' && _Utils.default.isNull(value.map)) {
+                  val = {};
+                  val.map = value;
+                }
+
+                parseValues(transformDataObject(val));
+                setMasterValues(val);
               }
             });
           }
         } else {
-          parseValues(transformDataObject(componentValue));
-          setMasterValues(componentValue);
+          let val = componentValue;
+
+          if (binder === 'MAP_OBJECT' && _Utils.default.isNull(componentValue.map)) {
+            val = {};
+            val.map = componentValue;
+          }
+
+          parseValues(transformDataObject(val));
+          setMasterValues(val);
         }
       } else {
         updateViewTitle();
@@ -864,7 +878,7 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       fieldParentErrors[field.parentId] = isParentInvalid;
     }
 
-    if (!_Utils.default.isNull(containerErrorCallback.current) && !_ApplicationContext.default.isFormMarkersEnabled()) {
+    if (!_Utils.default.isNull(containerErrorCallback.current) && _ApplicationContext.default.isFormMarkersEnabled()) {
       containerErrorCallback.current(fieldParentErrors);
     }
   }
@@ -935,7 +949,7 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
 
           if (!_Utils.default.isNull(validationGroup)) {
             if (field !== groupField && validationGroup === field.handle.api.getValidationGroup()) {
-              let groupFieldId = groupField.handle.api.getId();
+              let groupFieldId = groupField.handle.api.id;
 
               let gridFieldPath = _getValuePath(groupFieldId, null);
 
@@ -953,7 +967,13 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       }
     }
 
+    let isMarkersEnabled = _ApplicationContext.default.isFormMarkersEnabled();
+
+    _ApplicationContext.default.enableFormMarkers(false);
+
     _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
+
+    _ApplicationContext.default.enableFormMarkers(isMarkersEnabled);
   };
 
   const _setFieldError = (id, error) => {

package/dist/components/form/SelectItem.js

@@ -67,6 +67,12 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
         let data = result.data;
         let options = [];
 
+        if (_Utils.default.isNull(props.validator) || props.validator.nullable) {
+          options.push({
+            id: "_EMPTY_VALUE"
+          });
+        }
+
         for (let i = 0; i < data.records.length; i++) {
           let record = data.records[i];
           options.push(record.map.objectReference);
@@ -99,8 +105,7 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
         if (!loadFullOptionList) {
           setLoadFullOptionList(true);
         }
-      },
-      displayEmpty: props.allowEmptyValue || false
+      }
     },
     value: !_Utils.default.isNull(base.value) ? base.value.id : defaultValue,
     className: props.className,
@@ -112,7 +117,9 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     margin: "dense",
     size: "small",
     variant: "outlined"
-  }, base.selectOptions.map(option => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+  }, base.selectOptions.map(option => option.id === '_EMPTY_VALUE' ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    value: ""
+  }, /*#__PURE__*/_react.default.createElement("em", null, "\xA0")) : /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
     key: option.id,
     value: option.id
   }, _Utils.default.isNull(option.label) ? "" : option.label.trim())));

package/dist/components/form/UploadField.js

@@ -19,9 +19,11 @@ var _Utils = _interopRequireDefault(require("../../Utils"));
 
 var _ApplicationContext = _interopRequireDefault(require("./../../ApplicationContext"));
 
-var _withWidth = require("material-ui/utils/withWidth");
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
-var _TextField = _interopRequireDefault(require("./TextField"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _reactPromiseTracker = require("react-promise-tracker");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,6 +52,21 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
     color: 'red'
   }
 }));
+
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+
+const json = response => {
+  return response.text();
+};
+
 const location = window.location.protocol + "//" + window.location.hostname;
 
 const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
@@ -68,46 +85,55 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         files = _React$useState6[0],
         setFiles = _React$useState6[1];
 
-  const _React$useState7 = _react.default.useState(true),
+  const _React$useState7 = _react.default.useState(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null),
         _React$useState8 = _slicedToArray(_React$useState7, 2),
-        loading = _React$useState8[0],
-        setLoading = _React$useState8[1];
+        cacheId = _React$useState8[0],
+        setCacheId = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(true),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        loading = _React$useState10[0],
+        setLoading = _React$useState10[1];
 
-  const _React$useState9 = _react.default.useState(props.multiple === true),
-        _React$useState10 = _slicedToArray(_React$useState9, 1),
-        multiple = _React$useState10[0];
+  const _React$useState11 = _react.default.useState(_Utils.default.isNull(props.config.validator) || props.config.validator.nullable === true),
+        _React$useState12 = _slicedToArray(_React$useState11, 1),
+        nullable = _React$useState12[0];
 
-  const _React$useState11 = _react.default.useState(false),
-        _React$useState12 = _slicedToArray(_React$useState11, 2),
-        show = _React$useState12[0],
-        setShow = _React$useState12[1];
+  const _React$useState13 = _react.default.useState(props.multiple === true),
+        _React$useState14 = _slicedToArray(_React$useState13, 1),
+        multiple = _React$useState14[0];
+
+  const _React$useState15 = _react.default.useState(false),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        show = _React$useState16[0],
+        setShow = _React$useState16[1];
 
   const classes = useStyles();
 
-  const _React$useState13 = _react.default.useState(ref ? ref : /*#__PURE__*/_react.default.createRef()),
-        _React$useState14 = _slicedToArray(_React$useState13, 2),
-        reference = _React$useState14[0],
-        setReference = _React$useState14[1];
+  const _React$useState17 = _react.default.useState(ref ? ref : /*#__PURE__*/_react.default.createRef()),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        reference = _React$useState18[0],
+        setReference = _React$useState18[1];
 
-  const _React$useState15 = _react.default.useState(null),
-        _React$useState16 = _slicedToArray(_React$useState15, 2),
-        hasError = _React$useState16[0],
-        setHasError = _React$useState16[1];
+  const _React$useState19 = _react.default.useState(null),
+        _React$useState20 = _slicedToArray(_React$useState19, 2),
+        hasError = _React$useState20[0],
+        setHasError = _React$useState20[1];
 
   const width = _Utils.default.getComponentAttribute(props.config, 'width', '200px');
 
   const height = _Utils.default.getComponentAttribute(props.config, 'height', '200px');
 
-  const _React$useState17 = _react.default.useState(""),
-        _React$useState18 = _slicedToArray(_React$useState17, 2),
-        errorMessage = _React$useState18[0],
-        setErrorMessage = _React$useState18[1];
+  const _React$useState21 = _react.default.useState(""),
+        _React$useState22 = _slicedToArray(_React$useState21, 2),
+        errorMessage = _React$useState22[0],
+        setErrorMessage = _React$useState22[1];
 
   const base = props.base;
 
   _react.default.useEffect(() => {
-    setViewerFile(null);
-  }, [props.clearTrigger]);
+    setCacheId();
+  });
 
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.valueMode)) {
@@ -132,7 +158,7 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         let fileInfo = {
           name: file.name,
           type: file.type,
-          size: Math.round(file.size / 1000) + ' kB',
+          size: file.size,
           base64: reader.result,
           file: file
         };
@@ -156,6 +182,37 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         }
       };
 
+      const upload = (metadata, file, uploadUrl) => {
+        const accessToken = sessionStorage.getItem("accessToken");
+        const idToken = sessionStorage.getItem("idToken");
+        let data = new FormData();
+        metadata.correlationId = props.viewId + "." + props.config.id;
+        data.append("metadata", JSON.stringify(metadata));
+        data.append("file", file);
+        let fetchConfig = {
+          method: 'POST',
+          headers: {
+            'Accept': 'application/json',
+            'Authorization': 'Bearer ' + accessToken,
+            'idToken': idToken
+          },
+          body: data
+        };
+        let url = location + _ApplicationContext.default.getBaseApiUrl() + uploadUrl;
+        (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+          metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
+          metadata.documentRepositoryCacheId = data;
+          setCacheId(data);
+          base.handleValueChange(metadata);
+        }).catch(e => {
+          if (e.code === 401) {
+            _ApplicationContext.default.clear();
+
+            _ApplicationContext.default.getApplicationHistory().push('/login');
+          }
+        }));
+      };
+
       reader.onloadend = () => {
         if (!_Utils.default.isNull(props.form)) {
           let fileMetaData = {};
@@ -169,14 +226,17 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
           } else {
             fileMetaData.correlationId = props.config.id;
             fileMetaData.domain = props.viewId;
-            fileMetaData.cachedFile = true;
             let file = {};
             file.correlationId = fileMetaData.correlationId;
             file.content = allFiles[0].file;
 
-            _ApplicationContext.default.addFile(props.viewId, file);
+            let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
 
-            base.handleValueChange(fileMetaData);
+            if (uploadUrl === null) {
+              uploadUrl = "/docs/manager/upload/save";
+            }
+
+            upload(fileMetaData, allFiles[0].file, uploadUrl);
           }
         }
       };
@@ -223,7 +283,17 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   }, props.config.attributes['label'] ? props.config.attributes['label'] : "Upload File")), /*#__PURE__*/_react.default.createElement("label", null, !_Utils.default.isNull(base.value) ? _Utils.default.isNull(base.value.id) || _Utils.default.isNull(props.config.dataService) ? base.value.name : /*#__PURE__*/_react.default.createElement("a", {
     href: location + _ApplicationContext.default.getBaseApiUrl() + _ApplicationContext.default.getFilesApiPath() + '/get/file?fileId=' + base.value.id + '&fileService=' + props.config.dataService.serviceId + '&access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"),
     target: '_blank'
-  }, base.value.name) : null))), props.showViewer && !multiple || show ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
+  }, base.value.name) : null), nullable && base.value ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-controls": "menu-list-grow",
+    ref: ref,
+    "aria-haspopup": "true",
+    onClick: () => {
+      base.handleValueChange(null);
+      document.getElementById('contained-button-file').value = null;
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'DELETE'
+  })) : null)), props.showViewer && !multiple || show ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
     file: viewerFile,
     onDocumentLoadSuccess: handleViewerLoad
   }) : "", hasError ? /*#__PURE__*/_react.default.createElement("span", {
@@ -234,15 +304,15 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
 exports.DocumentUpload = DocumentUpload;
 
 const UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const _React$useState19 = _react.default.useState(null),
-        _React$useState20 = _slicedToArray(_React$useState19, 2),
-        file = _React$useState20[0],
-        setFile = _React$useState20[1];
+  const _React$useState23 = _react.default.useState(null),
+        _React$useState24 = _slicedToArray(_React$useState23, 2),
+        file = _React$useState24[0],
+        setFile = _React$useState24[1];
 
-  const _React$useState21 = _react.default.useState(false),
-        _React$useState22 = _slicedToArray(_React$useState21, 2),
-        clearTrigger = _React$useState22[0],
-        setClearTrigger = _React$useState22[1];
+  const _React$useState25 = _react.default.useState(false),
+        _React$useState26 = _slicedToArray(_React$useState25, 2),
+        clearTrigger = _React$useState26[0],
+        setClearTrigger = _React$useState26[1];
 
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
@@ -251,14 +321,22 @@ const UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
         setClearTrigger(!clearTrigger);
 
         if (!_Utils.default.isNull(value)) {
-          let objectReference = value;
+          let val = value;
+
+          if (value.map) {
+            val = value.map;
+          }
+
           let fileMetaData = {};
-          fileMetaData.name = objectReference.label;
-          fileMetaData.id = objectReference.id;
+          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
+          fileMetaData.type = val.type;
+          fileMetaData.size = val.size;
+          fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
+          fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
 
-          if (!_Utils.default.isNull(value.url)) {
+          if (!_Utils.default.isNull(val.url)) {
             let file = {};
-            file.base64 = value.url;
+            file.base64 = val.url;
             setFile(file);
           }