@agilemotion/oui-react-js 1.8.28 → 1.8.30

package/dist/components/facialRecognition/FacialVerification.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Utils = _interopRequireDefault(require("../../Utils"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
+var _FaceRecognitionComponent = _interopRequireDefault(require("./FaceRecognitionComponent"));
+var _ej2Base = require("@syncfusion/ej2-base");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 + ':' + window.location.port;
+const FacialVerification = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [visible, setVisible] = _react.default.useState(false);
+  const [value, setValue] = _react.default.useState(null);
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+    let event = new _Event.default(props.handle, props.viewId, null);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+    props.handle.api.refresh();
+    return () => {
+      _Observable.default.clearComponentEventListeners(props.handle);
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    let event = new _Event.default(props.handle, props.viewId, value);
+    _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
+  }, [value]);
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+      get value() {
+        return value;
+      },
+      loadData: (actionConfig, event) => {},
+      refresh() {
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+        if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(parsedConfig.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
+        } else {
+          setVisible(true);
+        }
+      },
+      getChildren: () => {
+        return [];
+      },
+      set visible(visible) {
+        setVisible(visible);
+      }
+    };
+  };
+  return visible && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({}, props.config)
+  }, /*#__PURE__*/_react.default.createElement(_FaceRecognitionComponent.default, {
+    mode: "verify",
+    onComplete: response => {
+      setValue(response);
+    },
+    processingPath: props.config.processingPath
+  }));
+}));
+var _default = exports.default = FacialVerification;

package/dist/components/facialRecognition/Modal.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Modal = _ref => {
+  let {
+    isOpen,
+    onClose,
+    mode
+  } = _ref;
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "bg-white p-6 rounded-xl shadow-lg max-w-sm w-full max-h-[90vh] overflow-y-auto"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: onClose,
+    className: "absolute top-2 right-2 text-gray-600"
+  }, "\xD7"), /*#__PURE__*/_react.default.createElement("h2", {
+    className: "text-2xl font-bold text-center mb-4"
+  }, mode === 'register' ? 'Register Your Face' : 'Verify Your Face'), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "mb-4"
+  }, mode === 'register' ? 'Please register your face to get started.' : 'Verify your face to log in.'), /*#__PURE__*/_react.default.createElement("button", {
+    className: "bg-blue-600 text-white px-6 py-2 rounded-xl hover:bg-blue-700 transition"
+  }, mode === 'register' ? 'Start Registration' : 'Start Verification'))));
+};
+var _default = exports.default = Modal;

package/dist/components/facialRecognition/service/faceApi.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.verifyFace = exports.registerFace = exports.location = void 0;
+var _ApplicationManager = _interopRequireDefault(require("../../../ApplicationManager"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const location = exports.location = window.location.protocol + '//' + window.location.hostname;
+const API_BASE = process.env.REACT_APP_API_BASE || location;
+const serializeDescriptor = descriptor => {
+  if (!descriptor || typeof descriptor.length !== 'number') {
+    throw new Error('Invalid face descriptor provided');
+  }
+  return JSON.stringify(Array.from(descriptor));
+};
+const postJSON = async (url, payload) => {
+  try {
+    const accessToken = sessionStorage.getItem('accessToken');
+    const idToken = sessionStorage.getItem('idToken');
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: JSON.stringify(payload)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      const message = errorText || response.statusText || 'Unknown error';
+      throw new Error(message);
+    }
+    return await response.json();
+  } catch (error) {
+    console.log(`❌ Request to ${url} failed:`, error);
+    const message = error || error.statusText || 'Unknown error';
+    throw new Error(message);
+    //return await response.json();
+  }
+};
+const registerFace = async (descriptor, faceImage, path) => {
+  return await postJSON(`${API_BASE}${_ApplicationManager.default.getContextRoot()}${path}`, {
+    descriptor: serializeDescriptor(descriptor),
+    faceImage
+  });
+};
+exports.registerFace = registerFace;
+const verifyFace = async (descriptor, path) => {
+  return await postJSON(`${API_BASE}${_ApplicationManager.default.getContextRoot()}${path}`, {
+    descriptor: serializeDescriptor(descriptor)
+  });
+};
+exports.verifyFace = verifyFace;

package/dist/components/form/BaseField.js

@@ -128,7 +128,7 @@ const BaseField = props => {
   }, [props.values, config]);
   _react.default.useEffect(() => {
     if (loadingRef.current === true && !_Utils.default.isNull(config)) {
-      let field = props.form().addField(config.dataBinding || config.id, props.handle, props.parentId, props.bindValueToForm);
+      let field = props.form().addField(config.id || config.dataBinding, props.handle, props.parentId, props.bindValueToForm);
       if (!_Utils.default.isNull(field) && !_Utils.default.isNull(field.error)) {
         if (field.error.length > 0) {
           setHasError(true);
@@ -195,9 +195,6 @@ const BaseField = props => {
   const api = () => {
     return {
       validate: (values, currentValue) => {
-        if (props.config.id === 'needAnalysisItems') {
-          console.log('\n\n\n==============Validate fireeee');
-        }
         return doValidation(values, currentValue);
       },
       parseValue: (value, inbound) => {

package/dist/components/form/FieldSet.js

@@ -35,6 +35,7 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _Switch = _interopRequireDefault(require("./Switch"));
 var _IconField = _interopRequireDefault(require("./IconField"));
 var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
+var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [fieldGrid] = _react.default.useState(_Utils.default.getFieldGrid(props.config.attributes, props.config.fields));
@@ -483,10 +484,11 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
         if (_Utils.default.isNull(field.attributes) || _Utils.default.isNull(field.attributes.colspan)) {
           colspan = 1;
         } else {
-          if (field.attributes.colspan > fieldGrid.maxColPerRow) {
+          let colspanVal = _Utils.default.getFieldColspan(field);
+          if (colspanVal > fieldGrid.maxColPerRow) {
             colspan = fieldGrid.maxColPerRow;
           } else {
-            colspan = field.attributes.colspan;
+            colspan = colspanVal;
           }
         }
         width = colspan / fieldGrid.maxColPerRow * 100;

package/dist/components/form/Form.js

@@ -138,6 +138,7 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
             }
             let fieldValid = field.handle.api.validate(values.current, null);
             if (fieldValid === false || _Utils.default.isNull(fieldValid)) {
+              console.log("Invalid form field [" + field.handle.api.id + "]");
               if (firstInvalidField == null) {
                 firstInvalidField = field;
               }

package/dist/components/form/GridField.js

@@ -44,12 +44,12 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   const [label, setLabel] = _react.default.useState();
   const [rows, setRows] = _react.default.useState([]);
   const [crudToolstripWidth, setCrudToolstripWidth] = _react.default.useState(null);
-  const [hasButtons] = _react.default.useState(_Utils.default.isNull(props.config.attributes) || _Utils.default.isNull(props.config.attributes.addDisabled) || props.config.attributes.addDisabled === false || _Utils.default.isNull(props.config.attributes.removeDisabled) || props.config.attributes.removeDisabled === false);
+  const [hasButtons] = _react.default.useState(_Utils.default.isNull(props.config.attributes) || _Utils.default.isNull(props.config.attributes.addDisabled) || _Utils.default.evaluateBooleanExpression(props.config.attributes.addDisabled, props.config.id) === false || _Utils.default.isNull(props.config.attributes.removeDisabled) || _Utils.default.evaluateBooleanExpression(props.config.attributes.removeDisabled, props.config.id) === false);
   const initialValueSet = _react.default.useRef(false);
   _react.default.useEffect(() => {
     let numCrudButtons = 0;
-    let addDisabled = props.config.attributes?.addDisabled;
-    let removeDisabled = props.config.attributes?.removeDisabled;
+    let addDisabled = _Utils.default.evaluateBooleanExpression(props.config.attributes?.addDisabled, props.config.id);
+    let removeDisabled = _Utils.default.evaluateBooleanExpression(props.config.attributes?.removeDisabled, props.config.id);
     if (!addDisabled) {
       numCrudButtons++;
     }
@@ -100,7 +100,7 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'row'
-  }, _Utils.default.isNull(props.config.attributes) || _Utils.default.isNull(props.config.attributes.addDisabled) || props.config.attributes.addDisabled === false ? /*#__PURE__*/_react.default.createElement("div", {
+  }, _Utils.default.isNull(props.config.attributes) || _Utils.default.isNull(props.config.attributes.addDisabled) || _Utils.default.evaluateBooleanExpression(props.config.attributes.addDisabled, props.config.id) === false ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",
@@ -112,7 +112,7 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'ADD'
-  }))) : null, _Utils.default.isNull(props.config.attributes) || _Utils.default.isNull(props.config.attributes.removeDisabled) || props.config.attributes.removeDisabled === false ? /*#__PURE__*/_react.default.createElement("div", {
+  }))) : null, _Utils.default.isNull(props.config.attributes) || _Utils.default.isNull(props.config.attributes.removeDisabled) || _Utils.default.evaluateBooleanExpression(props.config.attributes.removeDisabled, props.config.id) === false ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",

package/dist/components/form/ImageEditor.js

@@ -8,10 +8,14 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _BaseField = require("./BaseField");
 var _styles = require("@mui/styles");
+var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _reactPromiseTracker = require("react-promise-tracker");
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const useStyles = (0, _styles.makeStyles)(theme => ({
@@ -29,9 +33,10 @@ 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);
+    return Promise.reject({
+      code: response.status,
+      message: response.statusText
+    });
   }
 };
 const json = response => {
@@ -39,16 +44,38 @@ const json = response => {
 };
 const location = window.location.protocol + "//" + window.location.hostname;
 const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const [multiple] = _react.default.useState(props.multiple === true);
+  const [viewerFile, setViewerFile] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? props.initialFile : null);
   const [angle, setAngle] = _react.default.useState(0);
   const [zoomDepth, setZoomDepth] = _react.default.useState(null);
   const [originalImageWidth, setOriginalImageWidth] = _react.default.useState(null);
   const [originalImageHeight, setOriginalImageHeight] = _react.default.useState(null);
+  const [payloadStorageMode, setPayloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
+  const [files, setFiles] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? [props.initialFile] : null);
+  const [loading, setLoading] = _react.default.useState(true);
+  const [nullable] = _react.default.useState(_Utils.default.isNull(props.config.validator) || props.config.validator.nullable === true);
+  const [multiple] = _react.default.useState(props.multiple === true);
+  const [show, setShow] = _react.default.useState(false);
   const classes = useStyles();
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '320px');
-  const height = _Utils.default.getComponentAttribute(props.config, 'height', '320px');
+  const [reference, setReference] = _react.default.useState(ref ? ref : /*#__PURE__*/_react.default.createRef());
+  const [hasError, setHasError] = _react.default.useState(null);
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '200px');
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', '200px');
+  const [errorMessage, setErrorMessage] = _react.default.useState("");
+  const cacheId = _react.default.useRef(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
   const base = props.base;
-  _react.default.useEffect(() => {}, [props.initialFile]);
+  _react.default.useEffect(() => {
+    return () => {
+      if (cacheId.current) {
+        //remove().catch((e) => {});
+      }
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    setViewerFile(props.initialFile);
+  }, [props.initialFile]);
+  const handleViewerLoad = numPages => {
+    setLoading(false);
+  };
   function getFetchConfig(data) {
     const accessToken = sessionStorage.getItem("accessToken");
     const idToken = sessionStorage.getItem("idToken");
@@ -71,48 +98,154 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     }
     return rotateAngle;
   }
-  function process(callback, data, action) {
-    let fetchConfig = getFetchConfig(data);
-    let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
-    let rotateAngle = getRotateAngle(action);
-    if (rotateAngle) {
-      url += "?" + rotateAngle;
-    }
-    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
-      callback(data);
-    }).catch(e => {
-      if (e.code === 401) {
-        _ApplicationManager.default.clear();
-        _ApplicationManager.default.getApplicationHistory().push('/login');
-      }
-    }));
+  function base64ToFile(b64, originalFile) {
+    let mime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "image/png";
+    const clean = b64.startsWith("data:") ? b64.split(",")[1] : b64;
+    const bin = atob(clean);
+    const arr = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+    const ext = mime.split("/")[1] || "png";
+    const base = originalFile.name.replace(/\.[^.]+$/, "");
+    return new File([arr], `${base}-processed.${ext}`, {
+      type: mime,
+      lastModified: Date.now()
+    });
   }
+  const upload = (metadata, file, payload) => {
+    let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
+    if (uploadUrl === null) {
+      uploadUrl = _ApplicationManager.default.getContextRoot() + "/docs/api/v1/manager/upload/save";
+    }
+    let payloadStorageMode = props.config.payloadStorageMode;
+    if (payloadStorageMode === '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));
+      const processedFile = base64ToFile(payload, file, "image/png");
+      data.append("file", processedFile);
+      let fetchConfig = getFetchConfig(data);
+      let url = location + 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;
+        cacheId.current = data;
+        base.handleValueChange(metadata);
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        }
+        let message = {
+          messageType: 'ERROR',
+          message: 'An error has accurred while uploading file'
+        };
+        let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
+        _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+      }));
+    } else {
+      metadata.payload = payload;
+      base.handleValueChange(metadata);
+    }
+  };
+  const remove = () => {
+    return new Promise((resolve, reject) => {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let fetchConfig = {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
+        }
+      };
+      let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId.current;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(() => {
+        resolve();
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        } else {
+          reject(e);
+        }
+      }));
+    });
+  };
   const handleChange = () => event => {
     let files = event.target.files;
-    let file = files[0];
-    let reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-      if (!_Utils.default.isNull(file)) {
-        let fileMetaData = {};
-        fileMetaData.name = file.name;
-        fileMetaData.type = file.type;
-        fileMetaData.size = file.size;
-        if (base.value) {
-          fileMetaData.id = base.value.id;
+    var allFiles = [];
+    for (var i = 0; i < files.length; i++) {
+      let file = files[i];
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        let fileInfo = {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          base64: reader.result,
+          file: file
+        };
+        console.log("\n\n\n\nFILE : ", file);
+        allFiles.push(fileInfo);
+        if (allFiles.length === files.length) {
+          if (multiple === true) {
+            if (!_Utils.default.isNull(props.onUploadHandler)) {
+              props.onUploadHandler(allFiles);
+            }
+          } else {
+            if (!_Utils.default.isNull(props.onUploadHandler)) {
+              props.onUploadHandler(allFiles[0]);
+            }
+            setLoading(true);
+          }
+          setFiles(allFiles);
         }
-        if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
-          process(data => {
-            fileMetaData.url = data;
-            base.handleValueChange(fileMetaData);
-          }, reader.result, 'removeBackground');
-        } else {
-          fileMetaData.url = file.base64;
-          base.handleValueChange(fileMetaData);
+      };
+      reader.onloadend = () => {
+        if (!_Utils.default.isNull(props.form)) {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              allFiles[0].base64 = data;
+              setViewerFile(allFiles[0]);
+              handleloadEnded(allFiles, data);
+            }, allFiles[0].base64, 'removeBackground');
+          } else {
+            handleloadEnded(allFile, reader.payload);
+            setViewerFile(allFiles[0]);
+          }
         }
+      };
+    }
+  };
+  const handleloadEnded = (allFiles, payload) => {
+    let fileMetaData = {};
+    fileMetaData.name = allFiles[0].name;
+    fileMetaData.type = allFiles[0].type;
+    fileMetaData.size = allFiles[0].size;
+    if (base.value) {
+      fileMetaData.id = base.value.id;
+      fileMetaData.documentRepositoryId = base.value.documentRepositoryId;
+    }
+    if ('base64' === payloadStorageMode) {
+      fileMetaData.payload = allFiles[0].base64;
+      base.handleValueChange(fileMetaData);
+    } else {
+      fileMetaData.correlationId = props.config.id;
+      fileMetaData.domain = props.viewId;
+      if (cacheId.current) {
+        remove().then(() => {
+          cacheId.current = null;
+          upload(fileMetaData, allFiles[0].file, payload);
+        }).catch(e => {});
+      } else {
+        upload(fileMetaData, allFiles[0].file, payload);
       }
-    };
-    reader.onloadend = () => {};
+    }
   };
   _react.default.useEffect(() => {
     let container = document.getElementById("__image_container");
@@ -125,6 +258,22 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
       image.style.height = container.style.height;
     }
   }, [zoomDepth]);
+  function process(callback, data, action) {
+    let fetchConfig = getFetchConfig(data);
+    let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
+    let rotateAngle = getRotateAngle(action);
+    if (rotateAngle) {
+      url += "?angle=" + rotateAngle;
+    }
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      callback(data);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationManager.default.clear();
+        _ApplicationManager.default.getApplicationHistory().push('/login');
+      }
+    }));
+  }
   const zoom = direction => {
     if (originalImageWidth === null) {
       setOriginalImageWidth(document.getElementById("__image").width);
@@ -140,11 +289,13 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     let rotateMode = _Utils.default.getComponentAttribute(props.config, "rotateMode", null);
     if (rotateMode === null || rotateMode === 'SERVER') {
       process(data => {
-        base.handleValueChange({
-          ...base.value,
-          url: data
+        files[0].base64 = data;
+        setViewerFile({
+          ...files[0],
+          base64: data
         });
-      }, base.value.url, 'rotate' + direction);
+        handleloadEnded(files, data);
+      }, files[0].base64, 'rotate' + direction);
     } else {
       let rotateAngle = angle + getRotateAngle("rotate" + direction);
       document.getElementById("__image_container").style.transform = "rotate(" + rotateAngle + "deg)";
@@ -264,7 +415,7 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: 'ZOOM_IN'
     })
-  }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : null)), !_Utils.default.isNull(base.value) || !_Utils.default.isNull(viewerFile) ? /*#__PURE__*/_react.default.createElement("div", {
     className: "row",
     style: {
       padding: "8px 0",
@@ -300,7 +451,7 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     id: "__image_container"
   }, /*#__PURE__*/_react.default.createElement("img", {
     id: "__image",
-    src: base.value.url,
+    src: viewerFile?.base64 || base.value?.url,
     alt: '',
     style: {
       maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px'
@@ -313,41 +464,6 @@ const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo(/*#__
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
-      if (inbound) {
-        clearTrigger.current = !clearTrigger.current;
-        if (!_Utils.default.isNull(value)) {
-          let val = value;
-
-          // TODO : Support multiple file upload
-          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;
-          fileMetaData.url = val.url;
-          if (!_Utils.default.isNull(val.url)) {
-            let file = {};
-            file.base64 = val.url;
-            setFile(file);
-          }
-          return fileMetaData;
-        }
-      }
       return value;
     },
     valueChangeCallback: value => {

package/dist/components/form/RadioGroup.js

@@ -44,7 +44,7 @@ const RadioGroupWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.d
       borderRadius: '4px',
       padding: '8px 4px 4px 8px'
     } : {
-      padding: '8px 4px 4px 8px'
+      padding: 0
     },
     onChange: e => {
       base.handleValueChange(e.target.value);