@evoke-platform/ui-components 1.17.0 → 1.18.0

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -1,6 +1,6 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { get, omit, startCase } from 'lodash';
+import { get, pick, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import sift from 'sift';
@@ -10,7 +10,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, Skel
 import { Box } from '../../../../../layout';
 import { getReadableQuery } from '../../../../CriteriaBuilder';
 import { retrieveCustomErrorMessage } from '../../../../Form/utils';
-import { convertPropertiesToParams, deleteDocuments, formatSubmission, getPrefixedUrl, transformToWhere, useFormById, } from '../../utils';
+import { convertPropertiesToParams, deleteDocuments, formatSubmission, getPrefixedUrl, handleFileUpload, transformToWhere, useFormById, } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
@@ -258,20 +258,34 @@ const RepeatableField = (props) => {
                 : dialogType === 'update'
                     ? entry.display?.updateActionId
                     : entry.display?.deleteActionId));
+        const relatedProperty = relatedObject?.properties?.find((p) => p.id === fieldDefinition.relatedPropertyId);
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
-        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined, undefined, instance?.id && fieldDefinition.relatedPropertyId
-            ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
+        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : action?.type === 'delete' ? deleteForm : createForm, undefined, instance?.id && fieldDefinition.relatedPropertyId
+            ? {
+                instanceId: instance.id,
+                propertyId: fieldDefinition.relatedPropertyId,
+                objectId: !relatedProperty?.objectId ? instance.objectId : undefined,
+            }
             : undefined, action?.parameters ?? (relatedObject && convertPropertiesToParams(relatedObject)));
-        if (action?.type === 'create' && entry.display?.createActionId) {
+        if (action?.type === 'create' && action.id) {
             const updatedInput = {
                 ...input,
-                [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
+                [fieldDefinition?.relatedPropertyId]: {
+                    id: instance?.id,
+                    objectId: !relatedProperty?.objectId ? instance?.objectId : undefined,
+                },
             };
             try {
-                const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
-                    actionId: entry.display?.createActionId,
-                    input: updatedInput,
-                });
+                let instance = undefined;
+                if (relatedObject?.rootObjectId === 'sys__file') {
+                    instance = await handleFileUpload(apiServices, updatedInput, action.id, fieldDefinition.objectId);
+                }
+                else {
+                    instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
+                        actionId: action.id,
+                        input: updatedInput,
+                    });
+                }
                 queryClient.setQueryData(relatedInstancesQueryKey, (oldData) => {
                     if (!oldData)
                         return [instance];
@@ -293,12 +307,21 @@ const RepeatableField = (props) => {
         else {
             const relatedObjectId = relatedObject?.id;
             try {
-                const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
-                    actionId: `_${action?.type}`,
-                    input: omit(input, relatedObject?.properties
-                        ?.filter((property) => property.formula || property.type === 'collection')
-                        .map((property) => property.id) ?? []),
-                });
+                let response = undefined;
+                const actionParameters = action?.parameters ?? (relatedObject ? convertPropertiesToParams(relatedObject) : undefined) ?? [];
+                const allowedFieldIds = actionParameters
+                    .filter((param) => param.type !== 'collection')
+                    .map((param) => param.id);
+                const submission = pick(input, allowedFieldIds);
+                if (relatedObject?.rootObjectId === 'sys__file' && action?.id && action?.type !== 'delete') {
+                    response = await handleFileUpload(apiServices, submission, action.id, relatedObjectId, selectedInstanceId);
+                }
+                else {
+                    response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
+                        actionId: action?.id ?? `_${action?.type}`,
+                        input: submission,
+                    });
+                }
                 if (response && relatedObject && instance) {
                     deleteDocuments(input, !!response, apiServices, relatedObject, instance, action);
                 }
@@ -491,7 +514,13 @@ const RepeatableField = (props) => {
                             ? '_auto_'
                             : deleteForm?.id
                         : undefined, instanceId: selectedInstanceId, relatedParameter: fieldDefinition, associatedObject: instance?.id && fieldDefinition.relatedPropertyId
-                ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
+                ? {
+                    instanceId: instance.id,
+                    propertyId: fieldDefinition.relatedPropertyId,
+                    objectId: !relatedObject?.properties?.find((p) => p.id === fieldDefinition.relatedPropertyId)?.objectId
+                        ? instance.objectId
+                        : undefined,
+                }
                 : undefined })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };

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

@@ -1,12 +1,13 @@
 import { DocumentParameterValidation } from '@evoke-platform/context';
 import React from 'react';
-import { SavedDocumentReference } from '../../types';
+import { DocumentReference } from '../../types';
 type DocumentProps = {
     id: string;
+    fieldType?: 'file' | 'document';
     canUpdateProperty: boolean;
     error: boolean;
     validate?: DocumentParameterValidation;
-    value: (File | SavedDocumentReference)[] | undefined;
+    value: (File | DocumentReference)[] | undefined;
     hasDescription?: boolean;
 };
 export declare const Document: (props: DocumentProps) => React.JSX.Element;

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 { useQuery } from '@tanstack/react-query';
 import prettyBytes from 'pretty-bytes';
 import React, { 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 { object, handleChange, onAutosave: onAutosave, instance } = useFormContext();
+    const { object, handleChange, onAutosave: onAutosave, instance, form } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     let allowedTypesMessage = '';
@@ -32,11 +32,22 @@ export const Document = (props) => {
     useEffect(() => {
         setDocuments(value);
     }, [value]);
+    // Find the entry to get the configured createActionId and fileObjectId
+    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
+    const entry = allEntries?.find((entry) => getEntryId(entry) === id);
+    const createActionId = entry?.display?.createActionId ?? '_create';
+    // Get the configured objectId from display.fileObjectId, defaulting to sys__file
+    const fileObjectId = entry?.display?.fileObjectId ?? 'sys__file';
+    // For 'file' type properties, check regular object instance permissions
+    // For 'document' type properties, check document attachment permissions
+    const endpoint = fieldType === 'file'
+        ? getPrefixedUrl(`/objects/${fileObjectId}/instances/checkAccess?action=execute&field=${createActionId}`)
+        : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`);
     const { data: hasUpdatePermission = false, isLoading } = useQuery({
-        queryKey: ['hasDocUpdatePermission', object?.id, instance?.id],
+        queryKey: ['hasUpdatePermission', object?.id, instance?.id, fieldType, id],
         queryFn: async () => {
             try {
-                const accessCheck = await apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=update`));
+                const accessCheck = await apiServices.get(endpoint);
                 return accessCheck.result;
             }
             catch {
@@ -44,14 +55,36 @@ export const Document = (props) => {
             }
         },
         staleTime: Infinity,
-        enabled: canUpdateProperty && !!instance?.id && !!object?.id,
+        // For 'file' type fields the permission endpoint only requires the object ID, so the
+        // query can run on create actions where no instance exists yet. For 'document' type
+        // fields the endpoint is instance-scoped, so instance ID is still required.
+        enabled: canUpdateProperty && !!object?.id && (fieldType === 'file' || !!instance?.id),
     });
     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 and fileObjectId from form entry, default to '_create' and 'sys__file'
+        const allEntries = getUnnestedEntries(form?.entries ?? []);
+        const entry = allEntries?.find((entry) => getEntryId(entry) === id);
+        const createActionId = entry?.display?.createActionId ?? '_create';
+        const fileObjectId = entry?.display?.fileObjectId ?? 'sys__file';
+        // 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, fileObjectId, 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);
@@ -120,7 +153,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isLoading ? (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: documents, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isLoading ? (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,6 +1,5 @@
 import { useApiServices } from '@evoke-platform/context';
 import { useQuery } from '@tanstack/react-query';
-import { isEqual } from 'lodash';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
@@ -25,33 +24,44 @@ 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';
     // savedDocuments is either FileInstance[] or DocumentType[], never a mix
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
+    const [deletedDocumentIds, setDeletedDocumentIds] = useState([]);
+    // The stable list we render — only updated once savedDocuments has metadata for
+    // every referenced ID. While waiting for metadata, the previous list is kept so
+    // the UI doesn't flash empty sizes, missing icons, or "Deleted" chips.
+    const [displayDocuments, setDisplayDocuments] = useState(documents);
     useEffect(() => {
-        const currentValue = instance?.[id];
-        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);
+        const currentDocumentIds = (documents ?? [])
+            .filter((doc) => !(doc instanceof File))
+            .map((doc) => doc.id);
+        if (!currentDocumentIds.length) {
+            // Only File objects — metadata not needed, display immediately.
+            setDisplayDocuments(documents);
+            return;
+        }
+        const savedDocumentIds = savedDocuments?.map((doc) => doc.id) ?? [];
+        const missingDocumentIds = currentDocumentIds.filter((docId) => !savedDocumentIds.includes(docId) && !deletedDocumentIds.includes(docId));
+        if (missingDocumentIds.length) {
+            // Metadata not yet available — fetch it.
+            // If we already have a stable display, keep it to avoid flashing.
+            // If there's nothing to show yet (initial load), display immediately so
+            // the file names are visible while metadata loads.
+            if (!displayDocuments?.length) {
+                setDisplayDocuments(documents);
             }
+            getDocuments(currentDocumentIds);
         }
-    }, [id, documents, object]);
-    useEffect(() => {
-        if (fetchedOptions[`${id}SavedDocuments`]) {
-            setSavedDocuments(fetchedOptions[`${id}SavedDocuments`]);
+        else {
+            // All IDs have metadata — safe to update the display.
+            setDisplayDocuments(documents);
         }
-    }, [fetchedOptions]);
+    }, [documents, savedDocuments, fieldType, apiServices]);
     const getDocuments = (currentDocumentIds, shouldRetry = true) => {
         // For 'file' type properties, fetch sys__file instances directly
         // For 'document' type properties, fetch attachment documents
@@ -64,7 +74,7 @@ export const DocumentList = (props) => {
             // There is a short delay between when a document is uploaded and when
             // it is indexed. Therefore, try again if documents are not found.
             if (shouldRetry &&
-                (!docs ||
+                (!docs?.length ||
                     currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
                 setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
             }
@@ -72,6 +82,9 @@ export const DocumentList = (props) => {
                 setSnackbarError('error', 'Error occurred while retrieving saved documents');
             }
             else {
+                // IDs that were requested but not returned by the server = deleted/not found.
+                const deletedIds = currentDocumentIds.filter((docId) => !docs?.find((doc) => doc.id === docId));
+                setDeletedDocumentIds(deletedIds);
                 setSavedDocuments(docs);
                 setFetchedOptions({
                     [`${id}SavedDocuments`]: docs,
@@ -97,12 +110,13 @@ export const DocumentList = (props) => {
         staleTime: Infinity,
     });
     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);
@@ -116,7 +130,7 @@ export const DocumentList = (props) => {
         }
     };
     const openDocument = async (index) => {
-        const doc = documents?.[index];
+        const doc = displayDocuments?.[index];
         if (doc) {
             let url;
             const contentType = doc instanceof File
@@ -124,9 +138,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' });
@@ -167,8 +179,8 @@ export const DocumentList = (props) => {
         return size;
     };
     return (React.createElement(React.Fragment, null,
-        !documents && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
-        !!documents?.length && (React.createElement(Box, null, documents.map((doc, index) => (React.createElement(Grid, { container: true, sx: {
+        !displayDocuments && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
+        !!displayDocuments?.length && (React.createElement(Box, null, displayDocuments.map((doc, index) => (React.createElement(Grid, { container: true, sx: {
                 width: '100%',
                 border: '1px solid #C4CDD5',
                 borderRadius: '6px',
@@ -189,10 +201,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/FormFieldTypes/FileContent.d.ts

@@ -0,0 +1,12 @@
+import { DocumentParameterValidation } from '@evoke-platform/context';
+import React from 'react';
+type FileContentProps = {
+    id: string;
+    canUpdateProperty: boolean;
+    error: boolean;
+    validate?: DocumentParameterValidation;
+    value: File | undefined;
+    hasDescription?: boolean;
+};
+export declare const FileContent: (props: FileContentProps) => React.JSX.Element;
+export {};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/FileContent.js

@@ -0,0 +1,197 @@
+import { useApiServices } from '@evoke-platform/context';
+import prettyBytes from 'pretty-bytes';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { FileWithExtension, InfoRounded, LaunchRounded, TrashCan, UploadCloud } from '../../../../../icons';
+import { useFormContext } from '../../../../../theme/hooks';
+import { IconButton, Snackbar, Typography } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+import { getPrefixedUrl } from '../utils';
+import mime from 'mime';
+export const FileContent = (props) => {
+    const { id, canUpdateProperty, error, validate, hasDescription, value } = props;
+    const { handleChange, instance } = useFormContext();
+    const apiServices = useApiServices();
+    const [snackbarError, setSnackbarError] = useState();
+    const [file, setFile] = useState(value);
+    const [hasReadAccess, setHasReadAccess] = useState(false);
+    const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            validate.maxSizeInKB * 1000 // convert to bytes
+        : undefined;
+    const formattedMaxSize = maxSizeInBytes !== undefined ? prettyBytes(maxSizeInBytes) : '';
+    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
+        onDrop: (files) => handleUpload(files),
+        disabled: !!file,
+        accept: validate?.allowedFileExtensions
+            ? {
+                'type/custom': validate.allowedFileExtensions.map((extension) => extension.startsWith('.') ? extension : `.${extension}`),
+            }
+            : undefined,
+        maxSize: maxSizeInBytes,
+    });
+    let allowedTypesMessage = '';
+    if (validate?.allowedFileExtensions?.length) {
+        if (validate.allowedFileExtensions.length === 1) {
+            allowedTypesMessage = `Only ${validate.allowedFileExtensions[0]} files are allowed`;
+        }
+        else {
+            allowedTypesMessage = `Allowed file types are: ${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
+        }
+    }
+    useEffect(() => {
+        setFile(value);
+    }, [value]);
+    const checkPermissions = useCallback(async () => {
+        if (instance) {
+            try {
+                const response = await apiServices.get(getPrefixedUrl(`/objects/${instance.objectId}/instances/${instance.id}/checkAccess`), {
+                    params: {
+                        action: 'read',
+                        field: 'content',
+                    },
+                });
+                setHasReadAccess(response.result);
+            }
+            catch (error) {
+                setHasReadAccess(false);
+            }
+        }
+        else {
+            setHasReadAccess(true);
+        }
+    }, [apiServices, instance]);
+    useEffect(() => {
+        checkPermissions();
+    }, [checkPermissions]);
+    const handleUpload = async (files) => {
+        const file = files ? files[0] : undefined;
+        if (file)
+            setFile(file);
+        try {
+            handleChange && (await handleChange(id, file));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+    };
+    const viewFileContent = async () => {
+        const contentType = instance ? instance.contentType : file?.type;
+        let url = '';
+        if (file && file.size > 0) {
+            url = URL.createObjectURL(file);
+        }
+        else if (instance) {
+            try {
+                const contentResponse = await apiServices.get(getPrefixedUrl(`/files/${instance.id}/content`), { responseType: 'blob' });
+                const blob = new Blob([contentResponse], { type: contentType });
+                url = window.URL.createObjectURL(blob);
+            }
+            catch (error) {
+                setSnackbarError({
+                    message: `Viewing the contents of ${instance.name} is currently not available.`,
+                    type: 'error',
+                });
+                return;
+            }
+        }
+        if (contentType &&
+            [
+                'application/pdf',
+                'image/jpeg',
+                'image/jpg',
+                'image/png',
+                'image/gif',
+                'image/bmp',
+                'image/webp',
+                'text/plain',
+            ].includes(contentType)) {
+            window.open(url, '_blank');
+        }
+        else {
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', file?.name ?? '');
+            document.body.appendChild(link);
+            link.click();
+            // Clean up and remove the link
+            link.parentNode?.removeChild(link);
+        }
+    };
+    const errors = [];
+    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
+        errors.push(`Invalid file extension. ${allowedTypesMessage}`);
+    }
+    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
+        errors.push(`File size exceeds the maximum limit of ${formattedMaxSize}`);
+    }
+    return (React.createElement(React.Fragment, null,
+        file ? (React.createElement(Grid, { container: true, sx: {
+                width: '100%',
+                border: '1px solid #C4CDD5',
+                borderRadius: '6px',
+                margin: '5px 2px',
+                padding: ' 8px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
+                React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: mime.getExtension(file.type && file.type !== '' ? file.type : instance?.['contentType']) ?? undefined, sx: { height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            lineHeight: '15px',
+                            paddingTop: '8px',
+                        } }, file.name)),
+                file.size ? (React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, prettyBytes(file.size)))) : null),
+            canUpdateProperty && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "Delete File", sx: { padding: '3px', color: '#637381', marginRight: '10px' }, onClick: () => {
+                        setFile(undefined);
+                        handleChange && handleChange(id, undefined);
+                    } },
+                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))),
+            hasReadAccess && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "View File Content", sx: { padding: '3px', color: '#637381', marginRight: '16px' }, onClick: () => viewFileContent() },
+                    React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))))) : canUpdateProperty ? (React.createElement(Box, { sx: {
+                margin: '5px 0',
+                height: formattedMaxSize || allowedTypesMessage ? '115px' : '90px',
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: `1px dashed ${error ? 'red' : '#858585'}`,
+                position: 'relative',
+                cursor: 'pointer',
+            }, ...getRootProps(), onClick: open },
+            React.createElement("input", { ...getInputProps({ id }), ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
+            React.createElement(Grid, { container: true, sx: { width: '100%' } },
+                React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '7px' } },
+                    React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { variant: "body2", sx: { color: '#212B36', textAlign: 'center' } },
+                        "Drag and drop or",
+                        ' ',
+                        React.createElement(Typography, { component: 'span', color: 'primary', sx: { fontSize: '14px' } }, "select file"),
+                        ' ',
+                        "to upload"),
+                    allowedTypesMessage && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } },
+                        allowedTypesMessage,
+                        ".")),
+                    formattedMaxSize && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, `Maximum size is ${formattedMaxSize}.`)))))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No file uploaded.")),
+        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' } }),
+            React.createElement(Typography, { fontSize: '12px', color: '#D3271B', sx: { lineHeight: '18px' } }, errors.join('; ') + '.')))));
+};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.js

@@ -102,6 +102,20 @@ const InstanceLookup = (props) => {
                             },
                         });
                     }
+                    else if (property.type === 'fileContent') {
+                        columns.push({
+                            field: prop.id,
+                            headerName: property.name,
+                            type: 'string',
+                            flex: 1,
+                            valueGetter: (params) => {
+                                const row = params.row;
+                                // Currently the `fileContent` property type is only supported on the `sys__file` system object.
+                                // Display the 'name' property of the `sys__file` instance.
+                                return row['name'];
+                            },
+                        });
+                    }
                     else if (property.type === 'date') {
                         columns.push({
                             field: prop.id,

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

@@ -2,5 +2,6 @@ import React from 'react';
 import { FormletReference } from '@evoke-platform/context';
 declare function FormletRenderer(props: {
     entry: FormletReference;
+    readOnly?: boolean;
 }): React.JSX.Element;
 export default FormletRenderer;