Fix Sync mode for FileUpload component

shesha-reactjs/src/components/configurableForm/index.tsx

@@ -54,7 +54,7 @@ export const ConfigurableForm: FC<IConfigurableFormProps> = props => {
     const showFormInfo = Boolean(persistedFormProps) && formInfoBlockVisible && formStatusInfo;
 
     return (
-      <FormMarkupConverter markup={providedMarkup}>
+      <FormMarkupConverter markup={providedMarkup} formSettings={formSettings}>
         {flatComponents => (
           <FormProvider
             name="Form"

shesha-reactjs/src/components/formDesigner/components/subForm/subForm.tsx

@@ -42,7 +42,7 @@ const SubForm: FC<ISubFormProps> = ({ readOnly }) => {
   }, [loading]);
 
   const updatedComponents = useMemo(() => {
-    return upgradeComponentsTree(designerComponents, components);
+    return upgradeComponentsTree(designerComponents, formSettings, components);
   }, [components]);
 
   const persistedFormProps: IPersistedFormProps = { id, module, versionNo, description, versionStatus, name };

shesha-reactjs/src/components/formDesigner/formDesigner.tsx

@@ -25,7 +25,7 @@ export const FormDesigner: FC<IFormDesignerProps> = ({ formId }) => {
 
           if (formStore.loaded && formStore.markup)
             return (
-              <FormMarkupConverter markup={formStore.markup}>
+              <FormMarkupConverter markup={formStore.markup} formSettings={formStore.formSettings}>
                 {flatComponents => (
                   <FormDesignerProvider
                     flatComponents={flatComponents}

shesha-reactjs/src/designer-components/fileUpload/index.tsx

@@ -20,6 +20,7 @@ export interface IFileUploadProps extends IConfigurableFormComponent, IFormItem
   allowUpload?: boolean;
   allowReplace?: boolean;
   allowDelete?: boolean;
+  useSync?: boolean;
 }
 
 const settingsForm = settingsFormJson as FormMarkup;
@@ -51,7 +52,7 @@ const FileUploadComponent: IToolboxComponent<IFileUploadProps> = {
           ownerId={Boolean(ownerId) ? ownerId : (Boolean(data?.id) ? data?.id : '')}
           ownerType={Boolean(model.ownerType) ? model.ownerType : (Boolean(formSettings?.modelType) ? formSettings?.modelType : '')}
           propertyName={Boolean(model.propertyName) ? model.propertyName : model.name}
-          uploadMode={'async'}
+          uploadMode={model.useSync ? 'sync' : 'async'}
         >
           <FileUpload
             isStub={formMode === 'designer'}
@@ -63,18 +64,23 @@ const FileUploadComponent: IToolboxComponent<IFileUploadProps> = {
       </ConfigurableFormItem>
     );
   },
-  initModel: model => {
-    const customModel: IFileUploadProps = {
-      ...model,
+  migrator: m => m.add<IFileUploadProps>(0, prev => {
+    return {
+      ...prev,
       allowReplace: true,
       allowDelete: true,
       allowUpload: true,
       ownerId: '',
       ownerType: '',
       propertyName: '',
     };
-    return customModel;
-  },
+  })
+  .add<IFileUploadProps>(1, (prev, context) => {
+    return {
+      ...prev,
+      useSync: !Boolean(context.formSettings?.modelType)
+    };
+  }),
   settingsFormMarkup: settingsForm,
   validateSettings: model => validateConfigurableComponentSettings(settingsForm, model),
 };

shesha-reactjs/src/designer-components/fileUpload/settingsForm.json

@@ -167,6 +167,13 @@
       "parentId": "root",
       "label": "Files"
     },
+    {
+      "id": "af3d9a3f-f47e-48ae-b4c3-f5cc36e534d9",
+      "type": "checkbox",
+      "name": "useSync",
+      "parentId": "root",
+      "label": "Synchronous upload"
+    },
     {
       "id": "417ee22e-a49d-44f2-a1c7-fef32ec87503",
       "type": "textField",

shesha-reactjs/src/interfaces/formDesigner.ts

@@ -4,6 +4,7 @@ import {
   IFormComponentContainer,
   FormMarkup,
   IFlatComponentsStructure,
+  IFormSettings,
 } from '../providers/form/models';
 import { FormInstance } from 'antd';
 import { InternalNamePath } from 'rc-field-form/lib/interface';
@@ -98,6 +99,7 @@ export interface IToolboxComponent<T extends IConfigurableFormComponent = any> {
 }
 
 export interface SettingsMigrationContext {
+  formSettings?: IFormSettings;
   flatStructure: IFlatComponentsStructure;
   componentId: string;
 }

shesha-reactjs/src/pages/dynamic/index.stories.tsx

@@ -155,7 +155,7 @@ export const PersonEdit = addStory(Template, {
 
 export const OrganisationEdit = addStory(Template, {
   formId: { name: 'organisation-edit', module: 'Test Module' },
-  id: '9A6C74F5-0EA0-432B-90BE-79F72CC71778',
+  //id: '9A6C74F5-0EA0-432B-90BE-79F72CC71778',
   mode: 'edit',
 });
 

shesha-reactjs/src/providers/form/utils.ts

@@ -114,40 +114,46 @@ export const componentsTreeToFlatStructure = (
   return result;
 };
 
-export const upgradeComponents = (toolboxComponents: IToolboxComponents, flatStructure: IFlatComponentsStructure) => {
+export const upgradeComponents = (
+  toolboxComponents: IToolboxComponents,
+  formSettings: IFormSettings,
+  flatStructure: IFlatComponentsStructure
+) => {
   const { allComponents } = flatStructure;
   for (const key in allComponents) {
     if (allComponents.hasOwnProperty(key)) {
       const component = allComponents[key] as IConfigurableFormComponent;
 
       const componentDefinition = toolboxComponents[component.type];
       if (componentDefinition) {
-        allComponents[key] = upgradeComponent(component, componentDefinition, flatStructure);
+        allComponents[key] = upgradeComponent(component, componentDefinition, formSettings, flatStructure);
       }
     }
   }
 };
 
 export const upgradeComponentsTree = (
   toolboxComponents: IToolboxComponents,
+  formSettings: IFormSettings,
   components: IConfigurableFormComponent[]
 ): IConfigurableFormComponent[] => {
   const flatStructure = componentsTreeToFlatStructure(toolboxComponents, components);
-  upgradeComponents(toolboxComponents, flatStructure);
+  upgradeComponents(toolboxComponents, formSettings, flatStructure);
   return componentsFlatStructureToTree(toolboxComponents, flatStructure);
 };
 
 export const upgradeComponent = (
   componentModel: IConfigurableFormComponent,
   definition: IToolboxComponent,
+  formSettings: IFormSettings,
   flatStructure: IFlatComponentsStructure
 ) => {
   if (!definition.migrator) return componentModel;
 
   const migrator = new Migrator<IConfigurableFormComponent, IConfigurableFormComponent>();
   const fluent = definition.migrator(migrator);
   if (componentModel.version === undefined) componentModel.version = -1;
-  const model = fluent.migrator.upgrade(componentModel, { flatStructure, componentId: componentModel.id });
+  const model = fluent.migrator.upgrade(componentModel, {formSettings, flatStructure, componentId: componentModel.id });
   return model;
 };
 

shesha-reactjs/src/providers/formDesigner/reducer.ts

@@ -163,7 +163,7 @@ const reducer = handleActions<IFormDesignerStateContext, any>(
         if (toolboxComponent.initModel) formComponent = toolboxComponent.initModel(formComponent);
         if (toolboxComponent.migrator) {
 
-          formComponent = upgradeComponent(formComponent, toolboxComponent, { allComponents: state.allComponents, componentRelations: state.componentRelations });
+          formComponent = upgradeComponent(formComponent, toolboxComponent, state.formSettings, { allComponents: state.allComponents, componentRelations: state.componentRelations });
 
           // run migrations if available
           // todo: convert components to clases and run migrations there to check types properly

shesha-reactjs/src/providers/formMarkupConverter/index.tsx

@@ -1,16 +1,18 @@
 import React, { FC, ReactNode, useMemo } from 'react';
-import { FormRawMarkup, IFlatComponentsStructure } from '../form/models';
+import { FormRawMarkup, IFlatComponentsStructure, IFormSettings } from '../form/models';
 import { componentsTreeToFlatStructure, getComponentsFromMarkup, upgradeComponents } from '../form/utils';
 import { useFormDesignerComponents } from '../form/hooks';
 
 export interface IFormMarkupConverterProps {
     markup: FormRawMarkup;
+    formSettings: IFormSettings;
     children: (flatStructure: IFlatComponentsStructure, onChange: (flatStructure: IFlatComponentsStructure) => void) => ReactNode;
 }
 
 const FormMarkupConverter: FC<IFormMarkupConverterProps> = ({
     children,
     markup,
+    formSettings: formSettings
 }) => {
     const designerComponents = useFormDesignerComponents();
 
@@ -19,7 +21,7 @@ const FormMarkupConverter: FC<IFormMarkupConverterProps> = ({
         const newFlatComponents = componentsTreeToFlatStructure(designerComponents, components);
 
         // migrate components to last version
-        upgradeComponents(designerComponents, newFlatComponents);
+        upgradeComponents(designerComponents, formSettings, newFlatComponents);
 
         return newFlatComponents;
     }, [markup]);