@agilemotion/oui-react-js 1.3.1 → 1.3.3

package/dist/components/form/Section.js

@@ -17,6 +17,8 @@ var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 
+var _HtmlPanel = _interopRequireDefault(require("../HtmlPanel"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -100,7 +102,17 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
       viewId: props.viewId,
       values: props.values,
       key: componentKey++
-    }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported form section component type " + component.type);
+    }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      key: componentKey++,
+      values: props.values,
+      loadCompleteHandler: props.loadCompleteHandler
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      key: componentKey++
+    }, "Unsupported form section component type " + component.type);
   }
 
   const api = () => {
@@ -122,18 +134,20 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
             let componentHandle = componentHandles[property];
             children.push(componentHandle);
 
-            var _iterator2 = _createForOfIteratorHelper(componentHandle.api.getChildren()),
-                _step2;
-
-            try {
-              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                const child = _step2.value;
-                children.push(child);
+            if (componentHandle.api) {
+              var _iterator2 = _createForOfIteratorHelper(componentHandle.api.getChildren()),
+                  _step2;
+
+              try {
+                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                  const child = _step2.value;
+                  children.push(child);
+                }
+              } catch (err) {
+                _iterator2.e(err);
+              } finally {
+                _iterator2.f();
               }
-            } catch (err) {
-              _iterator2.e(err);
-            } finally {
-              _iterator2.f();
             }
           }
         } catch (err) {
@@ -143,7 +157,30 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
         }
 
         return children;
+      },
+
+      refresh() {
+        let properties = Object.getOwnPropertyNames(componentHandles);
+
+        var _iterator3 = _createForOfIteratorHelper(properties),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const property = _step3.value;
+            let componentHandle = componentHandles[property];
+
+            if (componentHandle.api && componentHandle.api.refresh) {
+              componentHandle.api.refresh();
+            }
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
       }
+
     };
   };
 
@@ -152,21 +189,23 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
   };
 
   function render(section) {
-    let margin = !_Utils.default.isNull(section.attributes) && !_Utils.default.isNull(section.attributes['margin']) ? section.attributes['margin'] : null;
     let counter = 0;
-    return _Utils.default.isNull(section.components) || section.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A form section must have components") : /*#__PURE__*/_react.default.createElement("div", null, fieldGrid.rows.map(row => {
+    return _Utils.default.isNull(section.components) || section.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A form section must have components") : /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        overflow: 'hidden'
+      }
+    }, fieldGrid.rows.map(row => {
       return /*#__PURE__*/_react.default.createElement(_Grid.default, {
         container: true,
-        spacing: 2,
-        style: {
-          margin: margin,
+        style: _Utils.default.mergeStyles({
+          margin: '0',
           textAlign: 'left',
           width: '100%'
-        },
+        }, section),
         key: componentKey++
       }, row.fields.map(field => {
         if (_Utils.default.isNull(field.id)) {
-          field.id = counter + "-" + field.type + '-section-component';
+          field.id = counter++ + "-" + field.type + '-section-component';
         }
 
         return renderComponent(field);

package/dist/components/form/SelectItem.js

@@ -63,10 +63,17 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
 
   _react.default.useEffect(() => {
     if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
-      (0, _RestUtils.invokeRpc)(props.config.dataService, props.handle, props.viewId, result => {
-        let data = result.data;
+      let method = props.config.dataService.type === 'remoteObjectProxy' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
+      method(props.config.dataService, props.handle, props.viewId, result => {
+        let data = props.config.dataService.type === 'remoteObjectProxy' ? result.data : result;
         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 +106,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 +118,10 @@ 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: "",
+    key: option.id
+  }, /*#__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/SignatureTemplateDesignerField.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BaseField = require("./BaseField");
+
+var _SignatureTemplateDesigner = _interopRequireDefault(require("../signatures/SignatureTemplateDesigner"));
+
+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 SignatureTemplateDesignerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+
+  const designerHandler = _react.default.useState({});
+
+  return /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
+    config: props.config.designer,
+    handle: designerHandler,
+    ref: /*#__PURE__*/_react.default.createRef(),
+    viewId: props.viewId,
+    loadCompleteHandler: () => {},
+    showToolbar: false,
+    valueChangeHandler: value => {
+      base.handleValueChange(value);
+    }
+  });
+}));
+
+const SignatureTemplateDesignerField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle
+  }), base => /*#__PURE__*/_react.default.createElement(SignatureTemplateDesignerComponent, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = SignatureTemplateDesignerField;
+exports.default = _default;

package/dist/components/form/TextField.js

@@ -40,11 +40,7 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
         _React$useState2 = _slicedToArray(_React$useState, 1),
         multiline = _React$useState2[0];
 
-  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
-
-  const height = _Utils.default.getComponentAttribute(props.config, 'height', multiline ? '200px' : null);
+  const height = _Utils.default.getComponentStyleAttribute(props.config, 'height', multiline ? '200px' : null);
 
   const rows = height === null ? 4 : height.replace('px', '') / 20 - 1;
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
@@ -81,12 +77,12 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     rows: rows,
     disabled: base.disabled,
     size: "small",
-    style: {
-      minWidth: minWidth,
-      width: width,
+    style: _Utils.default.mergeStyles({
+      minWidth: '240px',
+      width: '100%',
       height: height,
       color: 'secondary'
-    },
+    }, props.config),
     variant: "outlined"
   });
 }));

package/dist/components/form/TransferList.js

@@ -132,9 +132,9 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     try {
       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
         const item = _step2.value;
-        let objectRef = {};
-        objectRef.id = item.id;
-        objectRefs.push(objectRef);
+        //let objectRef = {};
+        //objectRef.id = item.id;
+        objectRefs.push(item);
       }
     } catch (err) {
       _iterator2.e(err);
@@ -184,7 +184,6 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     error: base.hasError
   }, label) : null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
-    spacing: 2,
     alignItems: "stretch",
     className: classes.root,
     style: {
@@ -196,7 +195,7 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     item: true,
     style: {
       border: "1px solid ".concat(base.hasError ? '#f44336' : '#e1e1e1'),
-      width: '45%',
+      width: '40%',
       borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
@@ -212,7 +211,8 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
   })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
     item: true,
     style: {
-      margin: 'auto'
+      margin: 'auto',
+      width: '20%'
     }
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
@@ -237,7 +237,7 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     item: true,
     style: {
       border: "1px solid ".concat(base.hasError ? '#f44336' : '#e1e1e1'),
-      width: '45%',
+      width: '40%',
       borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {

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,59 @@ 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(() => {
+    setViewerFile(props.initialFile);
+  }, [props.initialFile]);
 
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.valueMode)) {
@@ -132,7 +162,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 +186,44 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         }
       };
 
+      const upload = (metadata, file, uploadUrl) => {
+        let uploadMode = _Utils.default.getComponentAttribute(props.config, "uploadMode", "POST");
+
+        if (uploadMode === 'POST') {
+          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');
+            }
+          }));
+        } else {
+          metadata.payloadBase64 = reader.result;
+          base.handleValueChange(metadata);
+        }
+      };
+
       reader.onloadend = () => {
         if (!_Utils.default.isNull(props.form)) {
           let fileMetaData = {};
@@ -163,20 +231,27 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
           fileMetaData.type = allFiles[0].type;
           fileMetaData.size = allFiles[0].size;
 
+          if (base.value) {
+            fileMetaData.id = base.value.id;
+          }
+
           if ('base64' === valueMode) {
             fileMetaData.url = allFiles[0].base64;
             base.handleValueChange(fileMetaData);
           } 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);
           }
         }
       };
@@ -192,15 +267,15 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
     accept: props.style === 'IMAGE' ? "image/jpeg,image/gif,image/png,image/x-eps" : "image/jpeg,image/gif,image/png,application/pdf,image/x-eps",
     className: classes.input,
-    id: "contained-button-file",
+    id: "contained-button-file-".concat(props.config.id),
     disabled: base.disabled,
     required: base.required,
     multiple: multiple,
     onChange: handleChange(),
     type: "file"
   }), props.style === 'IMAGE' ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "contained-button-file"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    htmlFor: "contained-button-file-".concat(props.config.id)
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     className: classes.button,
@@ -211,19 +286,45 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       backgroundRepeat: 'no-repeat',
       backgroundSize: 'cover',
       backgroundColor: 'transparent',
-      backgroundImage: !_Utils.default.isNull(viewerFile) ? "url(".concat(viewerFile.base64, ")") : !_Utils.default.isNull(props.config.dataService) ? "url(".concat(location + _ApplicationContext.default.getBaseApiUrl() + _ApplicationContext.default.getFilesApiPath() + '/get/file?fileId=' + (!_Utils.default.isNull(base.value) ? base.value.id : '-1') + '&fileService=' + props.config.dataService.serviceId + (!_Utils.default.isNull(defaultImage) ? '&defaultImage=' + defaultImage : '') + '&access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"), ")") : "url(".concat(require('./default-avatar.png'), ")")
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null,
+      backgroundImage: !_Utils.default.isNull(viewerFile) ? "url(".concat(viewerFile.base64, ")") : !_Utils.default.isNull(base.value) ? "url(".concat(location + _ApplicationContext.default.getBaseApiUrl() + '/docs/manager/download/' + base.value.documentRepositoryId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"), ")") : "url(".concat(require('./' + _Utils.default.getComponentAttribute(props.config, 'defaultImage', 'default-avatar.png')), ")")
+    }
+  })), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "0 8px"
     }
-  }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "contained-button-file"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, base.errorMessage)) : null)) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "contained-button-file-".concat(props.config.id)
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     disabled: base.disabled,
-    className: classes.button
-  }, 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"),
+    className: classes.button,
+    style: {
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null
+    }
+  }, props.config.attributes['label'] ? props.config.attributes['label'] : "Upload File")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "0 8px"
+    }
+  }, base.errorMessage)) : null), /*#__PURE__*/_react.default.createElement("label", null, !_Utils.default.isNull(base.value) ? _Utils.default.isNull(base.value.id) ? base.value.name : /*#__PURE__*/_react.default.createElement("a", {
+    href: location + _ApplicationContext.default.getBaseApiUrl() + '/docs/manager/download/' + base.value.documentRepositoryId + '?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), !base.disabled && 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-".concat(props.config.id)).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 +335,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,19 +352,47 @@ const UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
         setClearTrigger(!clearTrigger);
 
         if (!_Utils.default.isNull(value)) {
-          let objectReference = value;
-          let fileMetaData = {};
-          fileMetaData.name = objectReference.label;
-          fileMetaData.id = objectReference.id;
+          let val = value; // TODO : Support multiple file upload
 
-          if (!_Utils.default.isNull(value.url)) {
+          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+            if (typeof value.length !== 'undefined' && value.length > 0) {
+              val = value[0];
+            } else {
+              if (value.documentRepositoryId) {
+                return value;
+              }
+
+              return null;
+            }
+          }
+
+          if (val.map) {
+            val = val.map;
+          }
+
+          let fileMetaData = {};
+          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
+          fileMetaData.id = val.id;
+          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(val.url)) {
             let file = {};
-            file.base64 = value.url;
+            file.base64 = val.url;
             setFile(file);
           }
 
           return fileMetaData;
         }
+      } else {
+        // TODO : Support multiple file upload
+        if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+          let valArray = [];
+          valArray.push(value);
+          return valArray;
+        }
       }
 
       return value;