@evoke-platform/ui-components 1.13.0-dev.5 → 1.13.0-dev.7

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

@@ -1,10 +1,11 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
 import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
-import { TextField, Typography } from '../../../core';
+import { Skeleton, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 import FormField from '../../FormField';
 import AccordionSections from './AccordionSections';
@@ -18,7 +19,7 @@ import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
 import FormSections from './FormSections';
-import { entryIsVisible, fetchCollectionData, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
+import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -38,7 +39,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
+    const { object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -50,19 +51,41 @@ export function RecursiveEntryRenderer(props) {
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
-    const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
-    const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
         if (!object)
             return undefined;
         return getFieldDefinition(entry, object, parameters);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
-    useEffect(() => {
-        if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
-            fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
-        }
-    }, [fieldDefinition, instance]);
+    const { data: middleObject } = useQuery({
+        queryKey: [fieldDefinition?.objectId, 'MiddleObject'],
+        queryFn: () => fetchMiddleObject(fieldDefinition, apiServices),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object: ',
+        },
+    });
+    const { data: initialMiddleObjectInstances = [], isLoading: isLoadingInstances } = useQuery({
+        queryKey: [
+            fieldDefinition?.objectId,
+            instance?.id,
+            fieldDefinition?.relatedPropertyId,
+            'InitialMiddleObjectInstances',
+        ],
+        queryFn: () => fetchInitialMiddleObjectInstances(apiServices, fieldDefinition, instance?.id),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            instance?.id &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId &&
+            fieldDefinition?.relatedPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object instances: ',
+        },
+    });
     if (associatedObject?.propertyId === entryId)
         return null;
     // If the entry is hidden, clear its value and any nested values, and skip rendering
@@ -103,12 +126,11 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'collection') {
             if (fieldDefinition?.manyToManyPropertyId) {
-                if (middleObject && !isEmpty(middleObject)) {
-                    return (initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
-                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: 'criteria' in validation && validation.criteria
+                if (!isEmpty(middleObject)) {
+                    return isLoadingInstances ? (React.createElement(Skeleton, null)) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: 'criteria' in validation && validation.criteria
                                 ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-                                : undefined, hasDescription: !!display?.description }))));
+                                : undefined, hasDescription: !!display?.description })));
                 }
                 else {
                     // when in the builder preview, the middle object won't be fetched so instead show an empty field
@@ -138,7 +160,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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } 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;
@@ -41,7 +41,8 @@ export declare function getDefaultPages(parameters: InputParameter[], defaultPag
     [x: string]: string;
 }>;
 export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount, instance?: Record<string, unknown>): Record<string, unknown>;
-export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
+export declare const fetchMiddleObject: (fieldDefinition: InputParameter | Property, apiServices: ApiServices) => Promise<ObjWithRoot | undefined>;
+export declare const fetchInitialMiddleObjectInstances: (apiServices: ApiServices, fieldDefinition: InputParameter | Property, instanceId: string) => Promise<ObjectInstance[]>;
 export declare const getErrorCountForSection: (section: Section | Column, errors?: FieldErrors) => number;
 export declare const propertyToParameter: (property: Property) => InputParameter;
 export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];
@@ -49,16 +50,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;
@@ -87,7 +85,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     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[];
+export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | PanelViewEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.
  *
@@ -101,5 +99,6 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], obj
  * This ensures that any plain text input will be safely represented in RTF without losing formatting or characters.
  */
 export declare function plainTextToRtf(plainText: string): string;
-export declare function getFieldDefinition(entry: FormEntry, object: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
+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 useFormById(formId: string, apiServices: ApiServices, errorMessage?: string): import("@tanstack/react-query/build/legacy/types").UseQueryResult<EvokeForm, Error>;

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';
@@ -127,7 +128,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'];
@@ -342,31 +351,19 @@ export function updateCriteriaInputs(criteria, data, user, instance) {
             },
         }));
 }
-export async function fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instanceId, fetchedOptions, initialMiddleObjectInstances) {
-    try {
-        if ((fetchedOptions && !fetchedOptions[`${fieldDefinition.id}MiddleObject`]) || !fetchedOptions) {
-            const fetchedMiddleObject = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
-                params: {
-                    filter: { fields: ['properties', 'actions', 'rootObjectId'] },
-                },
-            });
-            setFetchedOptions({ [`${fieldDefinition.id}MiddleObject`]: fetchedMiddleObject });
-        }
-        // Fetch the initial middle object instances
-        const filter = instanceId ? getMiddleObjectFilter(fieldDefinition, instanceId) : {};
-        if (!isArray(initialMiddleObjectInstances)) {
-            const fetchedInitialMiddleObjectInstances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
-                params: { filter: JSON.stringify(filter) },
-            });
-            setFetchedOptions({
-                [`${fieldDefinition.id}InitialMiddleObjectInstances`]: fetchedInitialMiddleObjectInstances,
-            });
-        }
-    }
-    catch (error) {
-        console.error('Error fetching collection data:', error);
-    }
-}
+export const fetchMiddleObject = async (fieldDefinition, apiServices) => {
+    return await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
+        params: {
+            filter: { fields: ['properties', 'actions', 'rootObjectId'] },
+        },
+    });
+};
+export const fetchInitialMiddleObjectInstances = async (apiServices, fieldDefinition, instanceId) => {
+    const filter = getMiddleObjectFilter(fieldDefinition, instanceId);
+    return await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+        params: { filter: JSON.stringify(filter) },
+    });
+};
 export const getErrorCountForSection = (section, errors) => {
     const entries = section.entries || [];
     return isArray(section.entries)
@@ -479,53 +476,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 +587,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 +624,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 +663,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
         }
@@ -882,3 +947,14 @@ function applyMaskToObfuscatedValue(value, mask) {
     }
     return maskedValue;
 }
+export function useFormById(formId, apiServices, errorMessage) {
+    return useQuery({
+        queryKey: ['form', formId],
+        enabled: formId !== '_auto_' && !!formId,
+        staleTime: Infinity,
+        queryFn: () => apiServices.get(getPrefixedUrl(`/forms/${formId}`)),
+        meta: {
+            errorMessage,
+        },
+    });
+}