@evoke-platform/ui-components 1.13.0-dev.4 → 1.13.0-dev.6

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -1,4 +1,4 @@
-import { useApiServices } from '@evoke-platform/context';
+import { useApiServices, } from '@evoke-platform/context';
 import { isNil } from 'lodash';
 import prettyBytes from 'pretty-bytes';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -7,12 +7,12 @@ import { InfoRounded, UploadCloud } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Skeleton, Snackbar, Typography } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
-import { getPrefixedUrl } from '../../utils';
+import { getEntryId, getPrefixedUrl, getUnnestedEntries, uploadFiles } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
-    const { id, canUpdateProperty, error, value, validate, hasDescription } = props;
+    const { id, fieldType = 'document', canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, object, handleChange, onAutosave: onAutosave, instance, } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, handleChange, onAutosave: onAutosave, instance, form, } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
@@ -35,8 +35,17 @@ export const Document = (props) => {
     }, [value]);
     const checkPermissions = useCallback(() => {
         if (canUpdateProperty && !fetchedOptions[`${id}UpdatePermission`] && instance?.id) {
+            // Find the entry to get the configured createActionId
+            const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
+            const entry = allEntries?.find((entry) => getEntryId(entry) === id);
+            const createActionId = entry?.display?.createActionId ?? '_create';
+            // For 'file' type properties, check regular object instance permissions
+            // For 'document' type properties, check document attachment permissions
+            const endpoint = fieldType === 'file'
+                ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=execute&field=${createActionId}`)
+                : getPrefixedUrl(`/objects/${object?.id}/instances/${instance.id}/documents/checkAccess?action=update`);
             apiServices
-                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`))
+                .get(endpoint)
                 .then((accessCheck) => {
                 setFetchedOptions({
                     [`${id}UpdatePermission`]: accessCheck.result,
@@ -50,16 +59,43 @@ export const Document = (props) => {
                 setHasUpdatePermission(false);
             });
         }
-    }, [canUpdateProperty, fetchedOptions, instance, object]);
+    }, [
+        canUpdateProperty,
+        fetchedOptions[`${id}UpdatePermission`],
+        instance?.id,
+        object,
+        id,
+        apiServices,
+        form,
+        fieldType,
+    ]);
     useEffect(() => {
         checkPermissions();
     }, [checkPermissions]);
     const handleUpload = async (files) => {
-        // Store File objects in form state - they will be uploaded during autosave via formatSubmission()
-        const newDocuments = [...(documents ?? []), ...(files ?? [])];
+        if (!files?.length) {
+            return;
+        }
+        let uploadedFiles = files;
+        // Get the createActionId from display options, default to '_create'
+        const allEntries = getUnnestedEntries(form?.entries ?? []);
+        const entry = allEntries?.find((entry) => getEntryId(entry) === id);
+        const createActionId = entry?.display?.createActionId ?? '_create';
+        // Immediately upload files for 'file' type properties when autosave is not enabled.
+        // Linking will happen upon final submission.
+        // If autosave is enabled, upload and linking will happen in the autosave handler.
+        if (fieldType === 'file' && !onAutosave) {
+            const { successfulUploads, errorMessage } = await uploadFiles(files, apiServices, createActionId, undefined, false);
+            uploadedFiles = successfulUploads;
+            if (errorMessage) {
+                setSnackbarError({ message: errorMessage, type: 'error' });
+            }
+        }
+        // Store uploaded file references (or File objects) in form state
+        const newDocuments = [...(documents ?? []), ...uploadedFiles];
         setDocuments(newDocuments);
         try {
-            handleChange && (await handleChange(id, newDocuments));
+            await handleChange?.(id, newDocuments);
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -127,7 +163,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, onAutosave: onAutosave, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, fieldType: fieldType, handleChange: handleChange, onAutosave: onAutosave, value: documents, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
         errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
             React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { SavedDocumentReference } from '../../types';
+import { DocumentReference } from '../../types';
 type DocumentListProps = {
-    handleChange?: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    handleChange?: (propertyId: string, value: (File | DocumentReference)[] | undefined) => void;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
+    fieldType?: 'document' | 'file';
     canUpdateProperty: boolean;
-    value: (File | SavedDocumentReference)[] | undefined;
+    value: (File | DocumentReference)[] | undefined;
     setSnackbarError: (type: 'error' | 'success', message: string) => void;
 };
 export declare const DocumentList: (props: DocumentListProps) => React.JSX.Element;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -1,5 +1,4 @@
 import { useApiServices } from '@evoke-platform/context';
-import { isEqual } from 'lodash';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
@@ -24,29 +23,33 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
+    const { handleChange, onAutosave, id, fieldType = 'document', canUpdateProperty, value: documents, setSnackbarError, } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     // Determine property type once at component level
-    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
-    const isFileType = propertyType === 'file';
+    const isFileType = fieldType === 'file';
     const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
     // savedDocuments is either FileInstance[] or DocumentType[], never a mix
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
     useEffect(() => {
-        const currentValue = instance?.[id];
+        // Use documents prop (value) as the source of truth, not instance[id]
+        // This ensures newly uploaded files trigger a fetch even before they're saved to instance
+        const currentValue = documents;
         if (currentValue?.length) {
-            const currentDocumentIds = currentValue.map((doc) => doc.id);
-            if (currentDocumentIds.length &&
-                // these need to be sorted otherwise it will evaluate as not equal if the ids are in different orders causing unnecessary fetches
-                !isEqual(currentDocumentIds.slice().sort(), savedDocuments
-                    ?.map((doc) => doc.id)
-                    .slice()
-                    .sort())) {
-                getDocuments(currentDocumentIds);
+            // Filter out File objects only - we want to fetch details for all DocumentReferences including unsaved ones
+            const currentDocumentIds = currentValue
+                .filter((doc) => !(doc instanceof File))
+                .map((doc) => doc.id);
+            if (currentDocumentIds.length) {
+                // Check if there are any document IDs that we haven't fetched yet
+                const savedDocumentIds = savedDocuments?.map((doc) => doc.id) ?? [];
+                const missingDocumentIds = currentDocumentIds.filter((id) => !savedDocumentIds.includes(id));
+                if (missingDocumentIds.length > 0) {
+                    getDocuments(currentDocumentIds);
+                }
             }
         }
-    }, [id, documents, object]);
+    }, [documents, savedDocuments]);
     useEffect(() => {
         if (fetchedOptions[`${id}SavedDocuments`]) {
             setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
@@ -83,26 +86,31 @@ export const DocumentList = (props) => {
         if (!fetchedOptions[`${id}ViewPermission`]) {
             checkPermissions();
         }
-    }, [object]);
+    }, [object, id, fetchedOptions[`${id}ViewPermission`]]);
     const checkPermissions = () => {
         if (instance?.[id]?.length) {
+            const endpoint = isFileType
+                ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=read&field=content`)
+                : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=view`);
             apiServices
-                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=view`))
+                .get(endpoint)
                 .then((viewPermissionCheck) => {
                 setFetchedOptions({
                     [`${id}ViewPermission`]: viewPermissionCheck.result,
                 });
                 setHasViewPermission(viewPermissionCheck.result);
-            });
+            })
+                .catch(() => setHasViewPermission(false));
         }
     };
     const isFile = (doc) => doc instanceof File;
+    const isUnsavedFile = (doc) => isFile(doc) || !!doc.unsaved;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
     const handleRemove = async (index) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
         const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
         try {
-            handleChange && (await handleChange(id, newValue));
+            handleChange?.(id, newValue);
         }
         catch (error) {
             console.error('Failed to update field:', error);
@@ -124,9 +132,7 @@ export const DocumentList = (props) => {
                 : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    // Determine property type to use the correct endpoint
-                    const propertyType = object?.properties?.find((p) => p.id === id)?.type;
-                    const contentEndpoint = propertyType === 'file'
+                    const contentEndpoint = isFileType
                         ? getPrefixedUrl(`/files/${doc.id}/content`)
                         : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/${doc.id}/content`);
                     const documentResponse = await apiServices.get(contentEndpoint, { responseType: 'blob' });
@@ -189,10 +195,10 @@ export const DocumentList = (props) => {
                         } }, doc.name)),
                 React.createElement(Grid, { item: true, xs: 12 },
                     React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
-            (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+            (isUnsavedFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
                 React.createElement(IconButton, { "aria-label": "open document", sx: { ...styles.icon, marginRight: '16px' }, onClick: () => openDocument(index) },
                     React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
-            !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+            !isFile(doc) && !isUnsavedFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
                     marginRight: '16px',
                     backgroundColor: 'rgba(222, 48, 36, 0.16)',
                     color: '#A91813',

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

@@ -87,7 +87,9 @@ export function RecursiveEntryRenderer(props) {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
                 React.createElement(ObjectPropertyInput, { relatedObjectId: !fieldDefinition.objectId ? display?.relatedObjectId : fieldDefinition.objectId, fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: 'criteria' in validation && validation.criteria
                         ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-                        : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
+                        : entry.display?.criteria
+                            ? updateCriteriaInputs(entry.display?.criteria, getValues(), userAccount, instance)
+                            : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
                         ? display?.defaultValue.sortBy
                         : undefined, orderBy: typeof display?.defaultValue === 'object' && 'orderBy' in display.defaultValue
                         ? display?.defaultValue.orderBy
@@ -136,7 +138,7 @@ 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 === 'criteria') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },

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;
@@ -112,3 +113,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

@@ -4,7 +4,7 @@ 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;
@@ -49,16 +49,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, 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;
@@ -84,6 +81,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[], object: Obj, parameters?: InputParameter[]): FormEntry[];

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

@@ -127,7 +127,15 @@ const getEntryType = (entry, parameters) => {
 };
 export function getPrefixedUrl(url) {
     const wcsMatchers = ['/apps', '/pages', '/widgets'];
-    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/forms', '/locations'];
+    const dataMatchers = [
+        '/objects',
+        '/correspondenceTemplates',
+        '/documents',
+        '/payments',
+        '/forms',
+        '/locations',
+        '/files',
+    ];
     const signalrMatchers = ['/hubs'];
     const accessManagementMatchers = ['/users'];
     const workflowMatchers = ['/workflows'];
@@ -479,53 +487,90 @@ 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', 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('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`), {
+                    name: 'File Link',
+                    file: { id: file.id, name: file.name },
+                    linkedInstance,
+                }, {
+                    params: {
+                        actionId: '_create',
+                    },
+                });
+            }
+            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 = [];
@@ -553,20 +598,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) {
@@ -581,6 +635,28 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
         }
     }
 };
+async function handleUploads(files, propertyType, entry, apiServices, objectId, instanceId) {
+    if (propertyType === 'file') {
+        // Get the createActionId from display options, default to '_create'
+        const createActionId = entry?.display?.createActionId ?? '_create';
+        return await uploadFiles(files, apiServices, createActionId, instanceId ? { id: instanceId, objectId } : undefined);
+    }
+    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.
  *
@@ -598,44 +674,44 @@ 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 propertyType = getEntryType(entry, parameters);
-                try {
-                    let uploadedDocuments = [];
-                    if (propertyType === 'file') {
-                        uploadedDocuments = await uploadFiles(value, apiServices, '_create', {
-                            ...entry?.documentMetadata,
-                        }, 
-                        // Only pass linkTo if instanceId exists (update action)
-                        instanceId ? { id: instanceId, objectId } : undefined);
-                    }
-                    else if (propertyType === '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 ${propertyType === '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;
                 }
+                else {
+                    // Filter out 'unsaved' flag before submission since the api doesn't know about it.
+                    submission[key] = result.successfulUploads.map((file) => ({ id: file.id, name: file.name }));
+                }
+            }
+            else {
+                // Filter out 'unsaved' flag before submission since the api doesn't know about it.
+                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))
+                    .map((file) => ({
+                    id: file.id,
+                    name: file.name,
+                }));
             }
             // if there are address fields with no value address needs to be set to undefined to be able to submit
         }
@@ -649,7 +725,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');
             }