@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -15,6 +15,7 @@ import Link from "next/link";
 import getAcceptedFileTypes from "@/helpers/getAcceptedFileTypes";
 import { downloadMediaFile } from "@/helpers/downloadMediaFile";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidMediaFormFieldWidgetProps } from "@/types/solid-core";
 
 export class SolidMediaSingleField implements ISolidField {
 
@@ -84,280 +85,438 @@ export class SolidMediaSingleField implements ISolidField {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultMediaSingleFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultMediaSingleFormViewWidget';
+        }
         const viewMode: string = this.fieldContext.viewMode;
 
-        const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
-        const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
-        const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
-        const [isReplaceImageDialogVisible, setReplaceImageDialogVisible] = useState(false);
-        const [newFileToUpload, setNewFileToUpload] = useState<any>(null);
-        const [fileSizeError, setFileSizeError] = useState<string | null>(null);
-
-        const formatFileSize = (size: number) => {
-            return size >= 1024 * 1024
-                ? `${(size / (1024 * 1024)).toFixed(1)} MB`
-                : `${(size / 1024).toFixed(1)} KB`;
-        };
-
-        const [
-            deleteMedia,
-            { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },
-        ] = useDeleteMediaMutation();
-
-        const handleCancelUpload = (e: React.MouseEvent) => {
-            e.stopPropagation();
-            if (imageToBeDeletedData) {
-                deleteMedia(imageToBeDeletedData);
-            }
-            e.stopPropagation();
-            setFileDetails(null);
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
-            setDeleteImageDialogVisible(false);
-        };
-
-        const handleDropImage = (acceptedFiles: any[]) => {
-            const file = acceptedFiles[0];
-            if (!file) return;
-            setFileSizeError(null);
-            if (fileDetails) {
-                // If a file is already uploaded, show the confirmation dialog
-                setNewFileToUpload(file);
-                setReplaceImageDialogVisible(true);
-            } else {
-                // If no file is present, proceed with upload
-                uploadFile(file);
-            }
-        };
 
-        const uploadFile = (file: File) => {
-            setFileDetails({
-                name: file.name,
-                type: file.type,
-                fileUrl: URL.createObjectURL(file),
-                fileSize: file.size
-            });
+        return (
+            <>
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" &&
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
+                        </>
+                    }
+                </div>
+            </>
+        );
+    }
 
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
-        };
 
-        const handleReplaceFile = () => {
-            // Delete the existing file first
-            if (imageToBeDeletedData) {
-                deleteMedia(imageToBeDeletedData);
-            }
-            setFileDetails(null);
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidMediaFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+            setLightboxUrls: this.setLightboxUrls,
+            setOpenLightbox: this.setOpenLightbox
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+}
 
-            // Proceed with uploading new file
-            if (newFileToUpload) {
-                uploadFile(newFileToUpload);
-                setNewFileToUpload(null);
-            }
 
-            setReplaceImageDialogVisible(false);
-        };
-
-        useEffect(() => {
-            const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
-
-            if (fieldValue && typeof fieldValue === "object") {
-                let fileUrl = "";
-                let fileName = "Unknown File";
-                let fileSize = 0;
-
-                if (fieldValue instanceof File) {
-                    fileUrl = URL.createObjectURL(fieldValue);
-                    fileName = fieldValue.name;
-                    fileSize = fieldValue.size;
-                } else if (fieldValue._full_url) {
-                    fileUrl = fieldValue._full_url;
-                    fileName = fieldValue.originalFileName;
-                    fileSize = fieldValue.fileSize;
-                }
 
-                setFileDetails({
-                    name: fileName,
-                    type: fieldValue.mimeType,
-                    fileUrl,
-                    fileSize
-                });
 
-                // Set file ID for delete operation
-                setImageToBeDeletedData(fieldValue.id);
 
-                // Ensure formik has the correct value
-                formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
-            }
-        }, [formik.values, fieldLayoutInfo.attrs.name]);
-
-        const {
-            getRootProps: getRootProps,
-            getInputProps: getInputProps,
-            isDragActive: isDragActive,
-        } = useDropzone({
-            onDrop: handleDropImage,
-            onDropRejected: (fileRejections) => {
-                const rejection = fileRejections[0];
-                const sizeError = rejection.errors.find(err => err.code === 'file-too-large');
-                if (sizeError) {
-                    setFileSizeError(`File is too large. Max size is ${fieldMetadata.mediaMaxSizeKb} KB.`);
-                } else {
-                    setFileSizeError(rejection.errors[0]?.message || "File not accepted.");
-                }
-            },
-            accept: getAcceptedFileTypes(fieldMetadata.mediaTypes),
-            maxSize: fieldMetadata.mediaMaxSizeKb * 1024,
+export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    const viewMode: string = fieldContext.viewMode;
+
+    const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
+    const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
+    const [isReplaceImageDialogVisible, setReplaceImageDialogVisible] = useState(false);
+    const [newFileToUpload, setNewFileToUpload] = useState<any>(null);
+    const [fileSizeError, setFileSizeError] = useState<string | null>(null);
+
+    const formatFileSize = (size: number) => {
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
+    const [
+        deleteMedia,
+        { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },
+    ] = useDeleteMediaMutation();
+
+    const handleCancelUpload = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (imageToBeDeletedData) {
+            deleteMedia(imageToBeDeletedData);
+        }
+        e.stopPropagation();
+        setFileDetails(null);
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
+        setDeleteImageDialogVisible(false);
+    };
+
+    const handleDropImage = (acceptedFiles: any[]) => {
+        const file = acceptedFiles[0];
+        if (!file) return;
+        setFileSizeError(null);
+        if (fileDetails) {
+            // If a file is already uploaded, show the confirmation dialog
+            setNewFileToUpload(file);
+            setReplaceImageDialogVisible(true);
+        } else {
+            // If no file is present, proceed with upload
+            uploadFile(file);
+        }
+    };
+
+    const uploadFile = (file: File) => {
+        setFileDetails({
+            name: file.name,
+            type: file.type,
+            fileUrl: URL.createObjectURL(file),
+            fileSize: file.size
         });
 
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-        let DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaSingleWidget");
-        const widgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-            setLightboxUrls: this.setLightboxUrls,
-            setOpenLightbox: this.setOpenLightbox
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
+    };
+
+    const handleReplaceFile = () => {
+        // Delete the existing file first
+        if (imageToBeDeletedData) {
+            deleteMedia(imageToBeDeletedData);
+        }
+        setFileDetails(null);
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
+
+        // Proceed with uploading new file
+        if (newFileToUpload) {
+            uploadFile(newFileToUpload);
+            setNewFileToUpload(null);
         }
 
-        const handleFileView = (url: any) => {
-            if (url?.type.includes('image/')) {
-                this.setLightboxUrls?.([
-                    { src: url.fileUrl, downloadUrl: url.fileUrl },
-                ]);
-                this.setOpenLightbox?.(true);
+        setReplaceImageDialogVisible(false);
+    };
+
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        if (fieldValue && typeof fieldValue === "object") {
+            let fileUrl = "";
+            let fileName = "Unknown File";
+            let fileSize = 0;
+
+            if (fieldValue instanceof File) {
+                fileUrl = URL.createObjectURL(fieldValue);
+                fileName = fieldValue.name;
+                fileSize = fieldValue.size;
+            } else if (fieldValue._full_url) {
+                fileUrl = fieldValue._full_url;
+                fileName = fieldValue.originalFileName;
+                fileSize = fieldValue.fileSize;
+            }
+
+            setFileDetails({
+                name: fileName,
+                type: fieldValue.mimeType,
+                fileUrl,
+                fileSize
+            });
+
+            // Set file ID for delete operation
+            setImageToBeDeletedData(fieldValue.id);
+
+            // Ensure formik has the correct value
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+        }
+    }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+    const {
+        getRootProps: getRootProps,
+        getInputProps: getInputProps,
+        isDragActive: isDragActive,
+    } = useDropzone({
+        onDrop: handleDropImage,
+        onDropRejected: (fileRejections) => {
+            const rejection = fileRejections[0];
+            const sizeError = rejection.errors.find(err => err.code === 'file-too-large');
+            if (sizeError) {
+                setFileSizeError(`File is too large. Max size is ${fieldMetadata.mediaMaxSizeKb} KB.`);
             } else {
-                const link = document.createElement('a');
-                link.href = url.fileUrl;
-                link.download = ''; // or specify a file name like 'file.pdf'
-                link.target = '_blank';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
+                setFileSizeError(rejection.errors[0]?.message || "File not accepted.");
             }
+        },
+        accept: getAcceptedFileTypes(fieldMetadata.mediaTypes),
+        maxSize: fieldMetadata.mediaMaxSizeKb * 1024,
+    });
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    let DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaSingleWidget");
+    const widgetProps = {
+        formik: formik,
+        fieldContext: fieldContext,
+        setLightboxUrls: setLightboxUrls,
+        setOpenLightbox: setOpenLightbox
+    }
+
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
         }
+    }
 
-        return (
-            <>
-                {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+
+    return (
+        <div style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
+            <div className="flex flex-column gap-2 mt-4 relative">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                    </label>
+                }
+                <div className="relative">
+                    <div
+                        {...getRootProps()}
+                        className="solid-dropzone-wrapper"
+                    >
+                        <input {...getInputProps()} />
+                        <DropzonePlaceholder
+                            mediaTypes={fieldMetadata.mediaTypes}
+                            mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
+                        />
                     </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
+                {
+                    fileSizeError &&
+                    <Message severity="error" text={fileSizeError?.toString()} />
                 }
-                {viewMode === "edit" &&
-                    <div className={className} style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
-                        <div className="flex flex-column gap-2 mt-4 relative">
-                            {showFieldLabel != false &&
-                                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                    {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                                </label>
-                            }
-                            <div className="relative">
-                                <div
-                                    {...getRootProps()}
-                                    className="solid-dropzone-wrapper"
-                                >
-                                    <input {...getInputProps()} />
-                                    <DropzonePlaceholder
-                                        mediaTypes={fieldMetadata.mediaTypes}
-                                        mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
-                                    />
-                                </div>
-                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                    <div className="absolute mt-1">
-                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                    </div>
-                                )}
-                            </div>
-                            {
-                                fileSizeError &&
-                                <Message severity="error" text={fileSizeError?.toString()} />
-                            }
-                            {fileDetails && (
-                                <div className="solid-file-upload-wrapper mt-4">
+                {fileDetails && (
+                    <div className="solid-file-upload-wrapper mt-4">
+                        <div className="flex align-items-center gap-2">
+                            <FileReaderExt fileDetails={fileDetails} />
+                            <div className="w-full flex flex-column gap-1">
+                                <div className="flex align-items-start justify-content-between">
+                                    <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
                                     <div className="flex align-items-center gap-2">
-                                        <FileReaderExt fileDetails={fileDetails} />
-                                        <div className="w-full flex flex-column gap-1">
-                                            <div className="flex align-items-start justify-content-between">
-                                                <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
-                                                <div className="flex align-items-center gap-2">
-                                                    <div>
-                                                        <Button
-                                                            type="button"
-                                                            text
-                                                            icon={"pi pi-download"}
-                                                            size="small"
-                                                            severity="secondary"
-                                                            // className="p-2"
-                                                            style={{
-                                                                height: 16,
-                                                                width: 16
-                                                            }}
-                                                            onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
-                                                        />
-                                                    </div>
-                                                    <div>
-                                                        <Button
-                                                            type="button"
-                                                            text
-                                                            icon={"pi pi-times"}
-                                                            size="small"
-                                                            severity="secondary"
-                                                            // className="p-2"
-                                                            style={{
-                                                                height: 16,
-                                                                width: 16
-                                                            }}
-                                                            onClick={() => setDeleteImageDialogVisible(true)}
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="flex align-items-center gap-2 text-sm">
-                                                {fileDetails && formatFileSize(fileDetails.fileSize)}
-                                            </div>
+                                        <div>
+                                            <Button
+                                                type="button"
+                                                text
+                                                icon={"pi pi-download"}
+                                                size="small"
+                                                severity="secondary"
+                                                // className="p-2"
+                                                style={{
+                                                    height: 16,
+                                                    width: 16
+                                                }}
+                                                onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                            />
+                                        </div>
+                                        <div>
+                                            <Button
+                                                type="button"
+                                                text
+                                                icon={"pi pi-times"}
+                                                size="small"
+                                                severity="secondary"
+                                                // className="p-2"
+                                                style={{
+                                                    height: 16,
+                                                    width: 16
+                                                }}
+                                                onClick={() => setDeleteImageDialogVisible(true)}
+                                            />
                                         </div>
                                     </div>
                                 </div>
-                            )}
-                        </div>
-                        <Dialog
-                            visible={isDeleteImageDialogVisible}
-                            header="Confirm Delete"
-                            modal
-                            footer={() => (
-                                <div className="flex justify-content-center">
-                                    <Button type="button" label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleCancelUpload} />
-                                    <Button type="button" label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
-                                </div>
-                            )}
-                            onHide={() => setDeleteImageDialogVisible(false)}
-                        >
-                            <p>Are you sure you want to delete media?</p>
-                        </Dialog>
-                        <Dialog
-                            visible={isReplaceImageDialogVisible}
-                            header="Replace Image"
-                            modal
-                            footer={() => (
-                                <div className="flex justify-content-center">
-                                    <Button type="button" label="Yes, Replace" icon="pi pi-check" className='small-button' severity="danger" onClick={handleReplaceFile} />
-                                    <Button type="button" label="Cancel" icon="pi pi-times" className='small-button' onClick={() => setReplaceImageDialogVisible(false)} />
+                                <div className="flex align-items-center gap-2 text-sm">
+                                    {fileDetails && formatFileSize(fileDetails.fileSize)}
                                 </div>
-                            )}
-                            onHide={() => setReplaceImageDialogVisible(false)}
-                        >
-                            <p>An media is already uploaded. Do you want to delete it and upload a new one?</p>
-                        </Dialog>
+                            </div>
+                        </div>
                     </div>
-                }
-            </>
-        );
+                )}
+            </div>
+            <Dialog
+                visible={isDeleteImageDialogVisible}
+                header="Confirm Delete"
+                modal
+                footer={() => (
+                    <div className="flex justify-content-center">
+                        <Button type="button" label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleCancelUpload} />
+                        <Button type="button" label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
+                    </div>
+                )}
+                onHide={() => setDeleteImageDialogVisible(false)}
+            >
+                <p>Are you sure you want to delete media?</p>
+            </Dialog>
+            <Dialog
+                visible={isReplaceImageDialogVisible}
+                header="Replace Image"
+                modal
+                footer={() => (
+                    <div className="flex justify-content-center">
+                        <Button type="button" label="Yes, Replace" icon="pi pi-check" className='small-button' severity="danger" onClick={handleReplaceFile} />
+                        <Button type="button" label="Cancel" icon="pi pi-times" className='small-button' onClick={() => setReplaceImageDialogVisible(false)} />
+                    </div>
+                )}
+                onHide={() => setReplaceImageDialogVisible(false)}
+            >
+                <p>An media is already uploaded. Do you want to delete it and upload a new one?</p>
+            </Dialog>
+        </div>
+    );
+}
+
+export const DefaultMediaSingleFormViewWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
+    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    const formatFileSize = (size: number) => {
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        if (fieldValue && typeof fieldValue === "object") {
+            let fileUrl = "";
+            let fileName = "Unknown File";
+            let fileSize = 0;
+
+            if (fieldValue instanceof File) {
+                fileUrl = URL.createObjectURL(fieldValue);
+                fileName = fieldValue.name;
+                fileSize = fieldValue.size;
+            } else if (fieldValue._full_url) {
+                fileUrl = fieldValue._full_url;
+                fileName = fieldValue.originalFileName;
+                fileSize = fieldValue.fileSize;
+            }
+
+            setFileDetails({
+                name: fileName,
+                type: fieldValue.mimeType,
+                fileUrl,
+                fileSize
+            });
+            // Ensure formik has the correct value
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+        }
+    }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
     }
+
+    return (
+        <div className="flex flex-column gap-2 mt-4 relative">
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
+                </label>
+            }
+
+            {fileDetails && (
+                <div className="solid-file-view-wrapper mt-4">
+                    <div className="flex align-items-center gap-2">
+                        <FileReaderExt fileDetails={fileDetails} />
+                        <div className="w-full flex flex-column gap-1">
+                            <div className="flex align-items-start justify-content-between">
+                                <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
+                                <div className="flex align-items-center gap-2">
+                                    <div>
+                                        <Button
+                                            type="button"
+                                            text
+                                            icon={"pi pi-download"}
+                                            size="small"
+                                            severity="secondary"
+                                            // className="p-2"
+                                            style={{
+                                                height: 16,
+                                                width: 16
+                                            }}
+                                            onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex align-items-center gap-2 text-sm">
+                                {fileDetails && formatFileSize(fileDetails.fileSize)}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
 }