@evoke-platform/ui-components 1.17.0 → 1.18.0

package/dist/published/components/custom/FormV2/components/FormletRenderer.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useApiServices } from '@evoke-platform/context';
-import { getPrefixedUrl } from './utils';
+import { convertToReadOnly, getPrefixedUrl } from './utils';
 import { useQuery } from '@tanstack/react-query';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
-import { Skeleton, Typography } from '../../../core';
-import { Box } from '../../../layout';
-import { WarningRounded } from '../../../../icons';
+import { Skeleton } from '../../../core';
+import ViewDetailsEntryRenderer from '../../ViewDetailsV2/InstanceEntryRenderer';
+import MisconfiguredErrorMessage from './MisconfiguredErrorMessage';
 function FormletRenderer(props) {
-    const { entry } = props;
+    const { entry, readOnly } = props;
     const apiServices = useApiServices();
     const { data: formlet, isLoading } = useQuery({
         queryKey: [entry.formletId, 'formlet'],
@@ -17,14 +17,6 @@ function FormletRenderer(props) {
     });
     if (isLoading)
         return React.createElement(Skeleton, null);
-    return formlet ? (React.createElement(React.Fragment, null, formlet.entries?.map((formletEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: formletEntry }))))) : (React.createElement(Box, { sx: {
-            display: 'flex',
-            backgroundColor: '#ffc1073b',
-            borderRadius: '8px',
-            padding: '16.5px 14px',
-            marginTop: '6px',
-        } },
-        React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
-        React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+    return formlet ? (React.createElement(React.Fragment, null, formlet.entries?.map((formletEntry, index) => readOnly === true ? (React.createElement(ViewDetailsEntryRenderer, { key: index, entry: convertToReadOnly(formletEntry) })) : (React.createElement(RecursiveEntryRenderer, { key: index, entry: formletEntry }))))) : (React.createElement(MisconfiguredErrorMessage, null));
 }
 export default FormletRenderer;

package/dist/published/components/custom/FormV2/components/HtmlView.js

@@ -43,6 +43,10 @@ const HtmlView = ({ value }) => {
                     border: 'none',
                     minHeight: 20,
                 },
+                // Override Quill list markers for correct display
+                '.ql-editor ol li:before': {
+                    content: '""',
+                },
             } },
             React.createElement("div", { ref: containerRef }))));
 };

package/dist/published/components/custom/FormV2/components/MisconfiguredErrorMessage.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function MisconfiguredErrorMessage(): React.JSX.Element;

package/dist/published/components/custom/FormV2/components/MisconfiguredErrorMessage.js

@@ -0,0 +1,15 @@
+import { WarningRounded } from '../../../../icons';
+import { Typography } from '../../../core';
+import { Box } from '../../../layout';
+import React from 'react';
+export default function MisconfiguredErrorMessage() {
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            backgroundColor: '#ffc1073b',
+            borderRadius: '8px',
+            padding: '16.5px 14px',
+            marginTop: '6px',
+        } },
+        React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
+        React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+}

package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js

@@ -1,11 +1,9 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
-import { WarningRounded } from '@mui/icons-material';
 import { Grid } from '@mui/material';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
-import { Skeleton, TextField, Typography } from '../../../core';
-import { Box } from '../../../layout';
+import { Skeleton, TextField } from '../../../core';
 import FormField from '../../FormField';
 import AccordionSections from './AccordionSections';
 import FieldWrapper from './FieldWrapper';
@@ -14,6 +12,7 @@ import DropdownRepeatableField from './FormFieldTypes/CollectionFiles/DropdownRe
 import RepeatableField from './FormFieldTypes/CollectionFiles/RepeatableField';
 import Criteria from './FormFieldTypes/Criteria';
 import { Document } from './FormFieldTypes/DocumentFiles/Document';
+import { FileContent } from './FormFieldTypes/FileContent';
 import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
@@ -22,6 +21,7 @@ import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, f
 import HtmlView from './HtmlView';
 import { useQuery } from '@tanstack/react-query';
 import FormletRenderer from './FormletRenderer';
+import MisconfiguredErrorMessage from './MisconfiguredErrorMessage';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -87,10 +87,9 @@ export function RecursiveEntryRenderer(props) {
         },
     });
     const memorizedCriteria = useMemo(() => {
-        return 'criteria' in validation && validation.criteria && getValues
-            ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-            : undefined;
-    }, [validation, getValues && getValues(), userAccount, instance]);
+        const criteria = 'criteria' in validation && validation.criteria ? validation.criteria : display?.criteria;
+        return getValues && criteria ? updateCriteriaInputs(criteria, getValues(), userAccount, instance) : undefined;
+    }, [validation, getValues && getValues(), userAccount, instance, display]);
     const memorizedDefaultValueCriteria = useMemo(() => {
         return display?.defaultValue &&
             typeof display.defaultValue === 'object' &&
@@ -154,11 +153,15 @@ export function RecursiveEntryRenderer(props) {
             }
         }
         else if (fieldDefinition.type === 'richText') {
-            return (React.createElement(FieldWrapper, { key: `${entryId}-${fieldValue}`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor ? (React.createElement(RichTextEditor
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor ? (React.createElement(RichTextEditor
             // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
             , { 
                 // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
-                id: entry.uniqueId, value: fieldValue, handleUpdate: (value) => handleChange?.(entryId, value), format: "rtf", disabled: entry.type === 'readonlyField', rows: display?.rowCount, hasError: !!errors?.[entryId] })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
+                id: entry.uniqueId, value: fieldValue, handleUpdate: (value) => handleChange?.(entryId, value), onBlur: () => {
+                    onAutosave?.(entryId)?.catch((error) => {
+                        console.error('Autosave failed:', error);
+                    });
+                }, format: "rtf", disabled: entry.type === 'readonlyField', rows: display?.rowCount, hasError: !!errors?.[entryId] })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
                     onAutosave?.(entryId)?.catch((error) => {
                         console.error('Autosave failed:', error);
                     });
@@ -166,7 +169,11 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'document' || fieldDefinition.type === 'file') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(Document, { id: entryId, error: !!errors?.[entryId], value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
+                React.createElement(Document, { id: entryId, fieldType: fieldDefinition.type, error: !!errors?.[entryId], value: fieldValue, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
+        }
+        else if (fieldDefinition.type === 'fileContent') {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                React.createElement(FileContent, { id: entryId, error: !!errors?.[entryId], value: fieldValue, hasDescription: !!display?.description, canUpdateProperty: !(entry.type === 'readonlyField'), validate: validation })));
         }
         else if (fieldDefinition.type === 'criteria') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -230,15 +237,7 @@ export function RecursiveEntryRenderer(props) {
         return filteredEntry ? (isSmallerThanMd ? (React.createElement(AccordionSections, { entry: filteredEntry })) : (React.createElement(FormSections, { entry: filteredEntry }))) : null;
     }
     else if (!fieldDefinition) {
-        return (React.createElement(Box, { sx: {
-                display: 'flex',
-                backgroundColor: '#ffc1073b',
-                borderRadius: '8px',
-                padding: '16.5px 14px',
-                marginTop: '6px',
-            } },
-            React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
-            React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+        return React.createElement(MisconfiguredErrorMessage, null);
     }
     return null;
 }

package/dist/published/components/custom/FormV2/components/types.d.ts

@@ -12,9 +12,10 @@ export type FieldAddress = {
 export type AccessCheck = {
     result: boolean;
 };
-export type SavedDocumentReference = {
+export type DocumentReference = {
     id: string;
     name: string;
+    unsaved?: boolean;
 };
 export type Document = {
     id: string;
@@ -38,7 +39,8 @@ export type FileInstance = {
 export type SimpleEditorProps = {
     id: string;
     value: string;
-    handleUpdate?: (value: string) => void;
+    handleUpdate?: (value: string) => void | Promise<void>;
+    onBlur?: () => void;
     format: 'rtf' | 'plain' | 'openxml';
     disabled?: boolean;
     rows?: number;
@@ -112,3 +114,7 @@ export type InstanceLink = {
     id: string;
     objectId: string;
 };
+export type FileUploadBatchResult = {
+    errorMessage?: string;
+    successfulUploads: DocumentReference[];
+};

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount, ObjWithRoot, PanelViewEntry } from '@evoke-platform/context';
+import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, ObjWithRoot, PanelViewEntry, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { ObjectProperty } from '../../../../types';
 import { AutocompleteOption } from '../../../core';
-import { InstanceLink, SavedDocumentReference } from './types';
+import { DocumentReference, FileUploadBatchResult, InstanceLink } from './types';
 export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
 export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
 export declare function isAddressProperty(key: string): boolean;
@@ -54,16 +54,13 @@ export declare const convertPropertiesToParams: (object: Obj) => InputParameter[
 export declare function getUnnestedEntries(entries: FormEntry[]): FormEntry[];
 export declare const isEmptyWithDefault: (fieldValue: unknown, entry: InputParameterReference | InputField, instance: Record<string, unknown> | object) => boolean | "" | 0 | undefined;
 export declare const docProperties: Property[];
-/**
- * Upload files using the POST /files endpoint for sys__file objects
- */
-export declare const uploadFiles: (files: (File | SavedDocumentReference)[], apiServices: ApiServices, actionId?: string, metadata?: Record<string, string>, linkTo?: InstanceLink) => Promise<SavedDocumentReference[]>;
+export declare const uploadFiles: (files: (File | DocumentReference)[], apiServices: ApiServices, actionId?: string, fileObjectId?: string, linkTo?: InstanceLink, shortCircuit?: boolean) => Promise<FileUploadBatchResult>;
 /**
  * Creates file links for uploaded files by calling the objects endpoint with sys__fileLink
  * This is used after instance creation when the instance ID becomes available
  */
-export declare const createFileLinks: (files: SavedDocumentReference[], linkedInstance: InstanceLink, apiServices: ApiServices) => Promise<void>;
-export declare const uploadDocuments: (files: (File | SavedDocumentReference)[], metadata: Record<string, string>, apiServices: ApiServices, instanceId: string, objectId: string) => Promise<SavedDocumentReference[]>;
+export declare const createFileLinks: (fileReferences: DocumentReference[], linkedInstance: InstanceLink, apiServices: ApiServices) => Promise<void>;
+export declare const uploadDocuments: (files: (File | DocumentReference)[], metadata: Record<string, string>, apiServices: ApiServices, instanceId: string, objectId: string) => Promise<DocumentReference[]>;
 export declare const deleteDocuments: (submittedFields: FieldValues, requestSuccess: boolean, apiServices: ApiServices, object: Obj, instance: FieldValues, action?: Action, setSnackbarError?: React.Dispatch<React.SetStateAction<{
     showAlert: boolean;
     message?: string;
@@ -89,6 +86,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
 }>>, associatedObject?: {
     instanceId: string;
     propertyId: string;
+    objectId?: string;
 }, parameters?: InputParameter[]): Promise<FieldValues>;
 export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
 export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | PanelViewEntry[], object?: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
@@ -107,6 +105,10 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | Pa
 export declare function plainTextToRtf(plainText: string): string;
 export declare function getFieldDefinition(entry: FormEntry | PanelViewEntry, object?: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
 export declare function obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;
+export declare function handleFileUpload(apiServices: ApiServices, submission: FieldValues, actionId: string, objectId?: string, instanceId?: string, linkTo?: {
+    instanceId: string;
+    objectId: string;
+}): Promise<ObjectInstance>;
 export declare function useFormById(formId: string, apiServices: ApiServices, errorMessage?: string): import("@tanstack/react-query/build/legacy/types").UseQueryResult<EvokeForm, Error>;
 /**
  * Extract all values from a criteria/filter object.
@@ -125,3 +127,4 @@ export declare function useFormById(formId: string, apiServices: ApiServices, er
 export declare const extractPresetValuesFromCriteria: (criteria: Record<string, unknown>) => string[];
 export declare const extractAllCriteria: (flattenFormEntries: FormEntry[], parameters: InputParameter[]) => Record<string, unknown>[];
 export declare const extractPresetValuesFromDynamicDefaultValues: (flattenFormEntries: FormEntry[]) => string[];
+export declare function convertToReadOnly(entry: FormEntry): FormEntry;

package/dist/published/components/custom/FormV2/components/utils.js

@@ -1,4 +1,5 @@
 import { LocalDateTime } from '@js-joda/core';
+import { useQuery } from '@tanstack/react-query';
 import { jsonLogic } from 'json-logic-js-graphql';
 import { get, isArray, isEmpty, isObject, omit, pick, startCase, transform } from 'lodash';
 import { DateTime } from 'luxon';
@@ -6,7 +7,6 @@ import { nanoid } from 'nanoid';
 import Handlebars from 'no-eval-handlebars';
 import { defaultRuleProcessorMongoDB, formatQuery } from 'react-querybuilder';
 import { parseMongoDB } from '../../util';
-import { useQuery } from '@tanstack/react-query';
 export const scrollIntoViewWithOffset = (el, offset, container) => {
     const elementRect = el.getBoundingClientRect();
     const containerRect = container ? container.getBoundingClientRect() : document.body.getBoundingClientRect();
@@ -117,6 +117,16 @@ export const getEntryId = (entry) => {
                 ? entry.input.id
                 : undefined;
 };
+const getEntryType = (entry, parameters) => {
+    if (entry?.type === 'inputField') {
+        return entry?.input?.type;
+    }
+    else if (entry?.type === 'input') {
+        // For 'input' type entries, look up the parameter by parameterId
+        const parameter = parameters?.find((param) => param.id === entry.parameterId);
+        return parameter?.type;
+    }
+};
 /**
  * Returns editable field IDs that are currently visible on the form.
  */
@@ -167,6 +177,7 @@ export function getPrefixedUrl(url) {
         '/documents',
         '/payments',
         '/forms',
+        '/files',
         '/formlets',
         '/locations',
     ];
@@ -509,53 +520,85 @@ export const docProperties = [
         type: 'string',
     },
 ];
-/**
- * Upload files using the POST /files endpoint for sys__file objects
- */
-export const uploadFiles = async (files, apiServices, actionId = '_create', metadata, linkTo) => {
+export const uploadFiles = async (files, apiServices, actionId = '_create', fileObjectId = 'sys__file', linkTo, shortCircuit = true) => {
     // Separate already uploaded files from files that need uploading
     const alreadyUploaded = files.filter((file) => !('size' in file));
     const filesToUpload = files.filter((file) => 'size' in file);
-    // Upload all files in parallel
-    const uploadPromises = filesToUpload.map(async (file) => {
+    let failedUpload = false;
+    // Upload all files in parallel, handling each result individually
+    const uploadPromises = [];
+    for (const file of filesToUpload) {
         const formData = new FormData();
         formData.append('file', file);
         formData.append('actionId', actionId);
-        formData.append('objectId', 'sys__file');
-        if (metadata) {
-            for (const [key, value] of Object.entries(metadata)) {
-                formData.append(key, value);
-            }
-        }
+        formData.append('objectId', fileObjectId);
+        formData.append('input', JSON.stringify({ name: file.name, contentType: file.type }));
         if (linkTo) {
             formData.append('linkTo', JSON.stringify(linkTo));
         }
-        const fileInstance = await apiServices.post(getPrefixedUrl(`/files`), formData);
+        const uploadPromise = (async () => {
+            try {
+                const fileInstance = await apiServices.post(getPrefixedUrl(`/files`), formData);
+                return {
+                    id: fileInstance.id,
+                    name: fileInstance.name,
+                    unsaved: true,
+                };
+            }
+            catch (error) {
+                console.error(`Failed to upload file ${file.name}:`, error);
+                failedUpload = true;
+            }
+        })();
+        uploadPromises.push(uploadPromise);
+    }
+    if (!shortCircuit) {
+        // Wait for all upload attempts to complete (successes and failures)
+        const uploadResults = await Promise.allSettled(uploadPromises);
+        const uploadedFiles = uploadResults
+            .filter((result) => result.status === 'fulfilled' && !!result.value)
+            .map((result) => result.value);
+        const failedCount = filesToUpload.length - uploadedFiles.length;
         return {
-            id: fileInstance.id,
-            name: fileInstance.name,
+            successfulUploads: [...alreadyUploaded, ...uploadedFiles],
+            errorMessage: failedCount > 0 ? `Failed to upload ${failedCount} file(s)` : undefined,
         };
-    });
+    }
     const uploadedFiles = await Promise.all(uploadPromises);
-    return [...alreadyUploaded, ...uploadedFiles];
+    if (failedUpload) {
+        return {
+            successfulUploads: [],
+            errorMessage: 'An error occurred when uploading files',
+        };
+    }
+    return {
+        successfulUploads: [...alreadyUploaded, ...uploadedFiles],
+    };
 };
 /**
  * Creates file links for uploaded files by calling the objects endpoint with sys__fileLink
  * This is used after instance creation when the instance ID becomes available
  */
-export const createFileLinks = async (files, linkedInstance, apiServices) => {
-    const linkPromises = files.map(async (file) => {
-        await apiServices.post(getPrefixedUrl(`/objects/sys__fileLink/instances`), {
-            name: 'File Link',
-            file: { id: file.id, name: file.name },
-            linkedInstance,
-        }, {
-            params: {
-                actionId: '_create',
-            },
-        });
-    });
-    await Promise.all(linkPromises);
+export const createFileLinks = async (fileReferences, linkedInstance, apiServices) => {
+    // Link files in parallel, handling each result individually
+    const linkPromises = [];
+    for (const file of fileReferences) {
+        const linkPromise = (async () => {
+            try {
+                await apiServices.post(getPrefixedUrl(`/objects/sys__fileLink/instances/actions`), {
+                    actionId: '_create',
+                    input: { name: 'File Link', file: { id: file.id, name: file.name }, linkedInstance },
+                });
+            }
+            catch (error) {
+                console.error(`Failed to create file link for ${file.name}:`, error);
+                // The file remains unlinked and can be retried later
+            }
+        })();
+        linkPromises.push(linkPromise);
+    }
+    // Wait for all linking attempts to complete (successes and failures)
+    await Promise.allSettled(linkPromises);
 };
 export const uploadDocuments = async (files, metadata, apiServices, instanceId, objectId) => {
     const allDocuments = [];
@@ -583,20 +626,29 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
 export const deleteDocuments = async (submittedFields, requestSuccess, apiServices, object, instance, action, setSnackbarError) => {
     const documentProperties = action?.parameters
         ? action.parameters.filter((param) => ['document', 'file'].includes(param.type))
-        : object?.properties?.filter((prop) => ['document', 'file'].includes(prop.type));
+        : object.properties?.filter((prop) => ['document', 'file'].includes(prop.type));
     for (const docProperty of documentProperties ?? []) {
         const savedValue = submittedFields[docProperty.id];
-        const originalValue = instance?.[docProperty.id];
+        const originalValue = instance[docProperty.id];
         const documentsToRemove = requestSuccess
             ? (originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? [])
             : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
         for (const doc of documentsToRemove) {
             try {
-                // Use different endpoints based on property type
-                const deleteEndpoint = docProperty.type === 'file'
-                    ? getPrefixedUrl(`/files/${doc.id}`)
-                    : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/${doc.id}`);
-                await apiServices?.delete(deleteEndpoint);
+                // Build context for state model
+                const fieldType = docProperty.type === 'file' ? 'file' : 'document';
+                if (fieldType === 'file') {
+                    // For file properties, unlink the file. Don't delete the actual file
+                    // since other instances may be using it.
+                    await apiServices.post(getPrefixedUrl(`/files/${doc.id}/unlinkInstance`), {
+                        linkedInstanceId: instance.id,
+                        linkedObjectId: object.id,
+                    });
+                }
+                else {
+                    // For document properties, delete the document
+                    await apiServices.delete(getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/${doc.id}`));
+                }
             }
             catch (error) {
                 if (error) {
@@ -611,16 +663,28 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
         }
     }
 };
-const getEntryType = (entry, parameters) => {
-    if (entry?.type === 'inputField') {
-        return entry.input.type;
+async function handleUploads(files, propertyType, entry, apiServices, objectId, instanceId) {
+    if (propertyType === 'file') {
+        const fileObjectId = entry.display?.fileObjectId ?? 'sys__file';
+        const createActionId = entry.display?.createActionId ?? '_create';
+        return await uploadFiles(files, apiServices, createActionId, fileObjectId, instanceId ? { id: instanceId, objectId } : undefined);
     }
-    else if (entry?.type === 'input') {
-        // For 'input' type entries, look up the parameter by parameterId
-        const parameter = parameters?.find((param) => param.id === entry.parameterId);
-        return parameter?.type;
+    else if (propertyType === 'document' && instanceId) {
+        try {
+            const docs = await uploadDocuments(files, {
+                type: '',
+                view_permission: '',
+                ...entry?.documentMetadata,
+            }, apiServices, instanceId, objectId);
+            return { successfulUploads: docs };
+        }
+        catch (error) {
+            console.error('Error uploading documents:', error);
+            return { successfulUploads: [], errorMessage: 'Error uploading documents' };
+        }
     }
-};
+    return { successfulUploads: [] };
+}
 /**
  * Transforms a form submission into a format safe for API submission.
  *
@@ -638,44 +702,36 @@ export async function formatSubmission(submission, apiServices, objectId, instan
     if (associatedObject) {
         delete submission[associatedObject.propertyId];
     }
-    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
+    const allEntries = getUnnestedEntries(form?.entries ?? []);
     for (const [key, value] of Object.entries(submission)) {
         const entry = allEntries?.find((entry) => getEntryId(entry) === key);
         if (isArray(value)) {
-            // Only upload if array contains File instances (not SavedDocumentReference)
+            const propertyType = getEntryType(entry, parameters);
+            // The only array types we need to handle specially are 'file' and 'document'.
+            if (propertyType !== 'file' && propertyType !== 'document') {
+                continue;
+            }
+            // Only upload if array contains File instances (not SavedDocumentReference).
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && apiServices && objectId) {
-                // Determine property type from the entry
-                const parameterType = getEntryType(entry, parameters);
-                try {
-                    let uploadedDocuments = [];
-                    if (parameterType === 'file') {
-                        uploadedDocuments = await uploadFiles(value, apiServices, '_create', {
-                            ...entry?.documentMetadata,
-                        }, 
-                        // Only pass linkTo if instanceId exists (update action)
-                        instanceId ? { id: instanceId, objectId } : undefined);
-                    }
-                    else if (parameterType === 'document' && instanceId) {
-                        uploadedDocuments = await uploadDocuments(value, {
-                            type: '',
-                            view_permission: '',
-                            ...entry?.documentMetadata,
-                        }, apiServices, instanceId, objectId);
-                    }
-                    submission[key] = uploadedDocuments;
-                }
-                catch (err) {
-                    if (err) {
-                        setSnackbarError &&
-                            setSnackbarError({
-                                showAlert: true,
-                                message: `An error occurred while uploading associated ${parameterType === 'file' ? 'files' : 'documents'}`,
-                                isError: true,
-                            });
-                    }
+                const result = await handleUploads(value, propertyType ?? '', entry, apiServices, objectId, instanceId);
+                if (result.errorMessage) {
+                    setSnackbarError?.({
+                        showAlert: true,
+                        // Provide generic message since we're ignoring a partial upload.
+                        message: `An error occurred while uploading associated ${propertyType === 'file' ? 'files' : 'documents'}`,
+                        isError: true,
+                    });
                     return submission;
                 }
+                submission[key] = result.successfulUploads;
+            }
+            else {
+                submission[key] = value
+                    // This should never happen but it's possible that the else branch
+                    // is reached because either 'apiServices' or 'objectId' is undefined.
+                    // If that's the case the submission will fail if we submit File blobs.
+                    .filter((file) => !(file instanceof File));
             }
             // if there are address fields with no value address needs to be set to undefined to be able to submit
         }
@@ -689,7 +745,8 @@ export async function formatSubmission(submission, apiServices, objectId, instan
                 submission[key] =
                     entry &&
                         ['input', 'inputField'].includes(entry.type) &&
-                        entry.display?.relatedObjectId
+                        (entry.display?.relatedObjectId ||
+                            associatedObject?.objectId)
                         ? pick(value, 'id', 'name', 'objectId')
                         : pick(value, 'id', 'name');
             }
@@ -921,6 +978,28 @@ function applyMaskToObfuscatedValue(value, mask) {
     }
     return maskedValue;
 }
+export async function handleFileUpload(apiServices, submission, actionId, objectId, instanceId, linkTo) {
+    const formData = new FormData();
+    if (submission['content'] instanceof File && submission['content'].size !== 0) {
+        formData.append('file', submission['content']);
+    }
+    formData.append('objectId', objectId ?? 'sys__file');
+    formData.append('actionId', actionId);
+    delete submission['content'];
+    formData.append('input', JSON.stringify(submission));
+    if (instanceId) {
+        return await apiServices.patch(getPrefixedUrl(`/files/${instanceId}`), formData);
+    }
+    else {
+        if (linkTo) {
+            formData.append('linkTo', JSON.stringify({
+                id: linkTo?.instanceId,
+                objectId: linkTo?.objectId,
+            }));
+        }
+        return await apiServices.post(getPrefixedUrl(`/files`), formData);
+    }
+}
 export function useFormById(formId, apiServices, errorMessage) {
     return useQuery({
         queryKey: ['form', formId],
@@ -1041,3 +1120,40 @@ export const extractPresetValuesFromDynamicDefaultValues = (flattenFormEntries)
     }
     return allPresetValues;
 };
+export function convertToReadOnly(entry) {
+    if (entry.type === 'columns') {
+        const columns = entry.columns.map((column) => ({
+            ...column,
+            entries: column.entries?.map((entry) => convertToReadOnly(entry)),
+        }));
+        return {
+            ...entry,
+            columns: columns,
+        };
+    }
+    else if (entry.type === 'sections') {
+        const sections = entry.sections.map((section) => ({
+            ...section,
+            entries: section.entries?.map((entry) => convertToReadOnly(entry)),
+        }));
+        return {
+            ...entry,
+            sections: sections,
+        };
+    }
+    else if (entry.type === 'input') {
+        return {
+            type: 'readonlyField',
+            propertyId: entry.parameterId,
+            display: entry.display,
+        };
+    }
+    else if (entry.type === 'inputField') {
+        return {
+            type: 'readonlyField',
+            propertyId: entry.input.id,
+            display: entry.display,
+        };
+    }
+    return entry;
+}