@solidstarters/solid-core-ui 1.1.70 → 1.1.72

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

@@ -16,6 +16,7 @@ import getAcceptedFileTypes from "@/helpers/getAcceptedFileTypes";
 import Link from "next/link";
 import { downloadMediaFile } from "@/helpers/downloadMediaFile";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps, SolidMediaFormFieldWidgetProps } from "@/types/solid-core";
 export class SolidMediaMultipleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -97,202 +98,321 @@ export class SolidMediaMultipleField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const viewMode: string = this.fieldContext.viewMode;
-        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
-
-        const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
-        const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
-        const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
-        const [selectedFileId, setSelectedFileId] = useState<string | null>(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();
-        useEffect(() => {
-            const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
-
-            if (Array.isArray(fieldValue) && fieldValue.length > 0) {
-                const urls: string[] = [];
-                const details: { name: string; type: string; size: number, id: any, fileUrl: string }[] = [];
-                const objectUrls: string[] = [];
-                fieldValue.forEach((file: File | any) => {
-                    if (file instanceof File) {
-                        // New file (from local upload)
-                        const fileUrl = URL.createObjectURL(file);
-                        objectUrls.push(fileUrl); // Store URL for cleanup
-                        urls.push(fileUrl);
-
-                        details.push({
-                            name: file.name,
-                            type: file.type,
-                            size: file.size,
-                            id: `${file.name}-${file.size}`,
-                            fileUrl: fileUrl // ✅ Store the generated object URL
-                        });
-                    } else if (typeof file === "object" && file._full_url) {
-                        urls.push(file._full_url);
-                        details.push({
-                            name: file.originalFileName,
-                            type: file.mimeType,
-                            size: file.fileSize,
-                            id: file.id,
-                            fileUrl: file._full_url
-                        });
-                    }
-                });
-                setFileDetails(details);
-            }
-        }, [formik.values, fieldLayoutInfo.attrs.name]);
-
-        const handleDropImages = (acceptedFiles: any[]) => {
-            if (!acceptedFiles.length) return;
-            setFileSizeError(null);
-            const newFileDetails = [...fileDetails];
-            acceptedFiles.forEach((file) => {
-                newFileDetails.push({ name: file.name, type: file.type, size: file.size, id: file.id, fileUrl: file._full_url });
-                const reader = new FileReader();
-                reader.readAsDataURL(file);
-            });
 
-            setFileDetails(newFileDetails);
-
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, acceptedFiles);
-        };
-
-        const confirmDeleteFile = (fileId: any, deleteId: number) => {
-            setSelectedFileId(fileId);
-            setDeleteImageDialogVisible(true);
-            setImageToBeDeletedData(deleteId)
-        };
-
-        const deleteFile = () => {
-            if (selectedFileId && imageToBeDeletedData) {
-                // Remove file from UI before making API call
-                setFileDetails((prev) => prev.filter((file) => `${file.name}-${file.size}` !== selectedFileId));
-
-                deleteMedia(imageToBeDeletedData)
-                    .unwrap()
-                    .then(() => {
-                        // Update form state
-                        formik.setFieldValue(
-                            fieldLayoutInfo.attrs.name,
-                            fileDetails.filter((file) => `${file.name}-${file.size}` !== selectedFileId)
-                        );
-                    })
-                    .catch((error) => {
-                        console.error("Error deleting file:", error);
-                    });
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultMediaMultipleFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultMediaMultipleFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
 
-                setDeleteImageDialogVisible(false);
-                setShowAllFiles(false);
-                setSelectedFileId(null);
-            }
-        };
-
-        const {
-            getRootProps,
-            getInputProps,
-            isDragActive,
-        } = useDropzone({
-            onDrop: handleDropImages,
-            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,
-        });
 
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+        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 [isShowAllFiles, setShowAllFiles] = useState(false);
-        let DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaMultipleWidget");
-        const widgetProps = {
+    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} />}
+            </>
+        )
+    }
+}
+
+
+export const DefaultMediaMultipleFormEditWidget = ({ 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 viewMode: string = fieldContext.viewMode;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
+    const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
+    const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
+    const [fileSizeError, setFileSizeError] = useState<string | null>(null);
 
-        const handleFileView = (url: any) => {
-            if (url?.type.includes('image/')) {
-                this.setLightboxUrls?.([
-                    { src: url.fileUrl, downloadUrl: url.fileUrl },
-                ]);
-                this.setOpenLightbox?.(true);
+    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();
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
+            const urls: string[] = [];
+            const details: { name: string; type: string; size: number, id: any, fileUrl: string }[] = [];
+            const objectUrls: string[] = [];
+            fieldValue.forEach((file: File | any) => {
+                if (file instanceof File) {
+                    // New file (from local upload)
+                    const fileUrl = URL.createObjectURL(file);
+                    objectUrls.push(fileUrl); // Store URL for cleanup
+                    urls.push(fileUrl);
+
+                    details.push({
+                        name: file.name,
+                        type: file.type,
+                        size: file.size,
+                        id: `${file.name}-${file.size}`,
+                        fileUrl: fileUrl // ✅ Store the generated object URL
+                    });
+                } else if (typeof file === "object" && file._full_url) {
+                    urls.push(file._full_url);
+                    details.push({
+                        name: file.originalFileName,
+                        type: file.mimeType,
+                        size: file.fileSize,
+                        id: file.id,
+                        fileUrl: file._full_url
+                    });
+                }
+            });
+            setFileDetails(details);
+        }
+    }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+    const handleDropImages = (acceptedFiles: any[]) => {
+        if (!acceptedFiles.length) return;
+        setFileSizeError(null);
+        const newFileDetails = [...fileDetails];
+        acceptedFiles.forEach((file) => {
+            newFileDetails.push({ name: file.name, type: file.type, size: file.size, id: file.id, fileUrl: file._full_url });
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+        });
+
+        setFileDetails(newFileDetails);
+
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, acceptedFiles);
+    };
+
+    const confirmDeleteFile = (fileId: any, deleteId: number) => {
+        setSelectedFileId(fileId);
+        setDeleteImageDialogVisible(true);
+        setImageToBeDeletedData(deleteId)
+    };
+
+    const deleteFile = () => {
+        if (selectedFileId && imageToBeDeletedData) {
+            // Remove file from UI before making API call
+            setFileDetails((prev) => prev.filter((file) => `${file.name}-${file.size}` !== selectedFileId));
+
+            deleteMedia(imageToBeDeletedData)
+                .unwrap()
+                .then(() => {
+                    // Update form state
+                    formik.setFieldValue(
+                        fieldLayoutInfo.attrs.name,
+                        fileDetails.filter((file) => `${file.name}-${file.size}` !== selectedFileId)
+                    );
+                })
+                .catch((error) => {
+                    console.error("Error deleting file:", error);
+                });
+
+            setDeleteImageDialogVisible(false);
+            setShowAllFiles(false);
+            setSelectedFileId(null);
+        }
+    };
+
+    const {
+        getRootProps,
+        getInputProps,
+        isDragActive,
+    } = useDropzone({
+        onDrop: handleDropImages,
+        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];
+
+    const [isShowAllFiles, setShowAllFiles] = useState(false);
+    let DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaMultipleWidget");
+    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>
+            {fileDetails.length > 0 &&
+                <div className="solid-file-upload-wrapper">
+                    <div className="flex align-items-center gap-2">
+                        <FileReaderExt fileDetails={fileDetails[0]} />
+                        <div className="w-full flex flex-column gap-1">
+                            <div className="flex align-items-center justify-content-between">
+                                <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
+                                <div className="flex align-items-center gap-2">
+                                    <div>
+                                        <Button
+                                            type="button"
+                                            text
+                                            icon={"pi pi-download"}
+                                            size="small"
+                                            style={{
+                                                height: 16,
+                                                width: 16
+                                            }}
+                                            onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
+                                        />
+                                    </div>
+                                    <div>
+                                        <Button
+                                            type="button"
+                                            text
+                                            icon={"pi pi-times"}
+                                            size="small"
+                                            severity="secondary"
+                                            // className="p-2"
+                                            style={{
+                                                height: 16,
+                                                width: 16
+                                            }}
+                                            onClick={() => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`, fileDetails[0].id)}
+                                        />
                                     </div>
-                                )}
+                                </div>
+                            </div>
+                            <div className="flex align-items-center gap-2 text-sm">
+                                {formatFileSize(fileDetails[0].size)}
                             </div>
-                            {
-                                fileSizeError &&
-                                <Message severity="error" text={fileSizeError?.toString()} />
-                            }
                         </div>
-                        {fileDetails.length > 0 &&
-                            <div className="solid-file-upload-wrapper">
+                    </div>
+                </div>
+            }
+
+            {fileDetails.length > 1 &&
+                <div className="flex align-items-center mt-1">
+                    <p className="m-0">
+                        {fileDetails.length - 1} items
+                    </p>
+                    <div>
+                        <Button type="button" size="small" text label="View" onClick={() => setShowAllFiles(true)} />
+                    </div>
+                </div>
+            }
+
+            <Dialog
+                visible={isShowAllFiles}
+                header="Items Uploaded"
+                modal
+                onHide={() => setShowAllFiles(false)}
+                style={{ minWidth: 450 }}
+            >
+                {fileDetails.length > 1 &&
+                    fileDetails.map((file, index) => {
+                        const fileId = `${file.name}-${file.size}`;
+                        return (
+                            <div key={fileId} className="solid-file-upload-wrapper">
                                 <div className="flex align-items-center gap-2">
-                                    <FileReaderExt fileDetails={fileDetails[0]} />
+                                    <FileReaderExt fileDetails={file} />
                                     <div className="w-full flex flex-column gap-1">
                                         <div className="flex align-items-center justify-content-between">
-                                            <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
+                                            <p className="font-normal w-11 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
                                             <div className="flex align-items-center gap-2">
                                                 <div>
                                                     <Button
@@ -304,7 +424,7 @@ export class SolidMediaMultipleField implements ISolidField {
                                                             height: 16,
                                                             width: 16
                                                         }}
-                                                        onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
+                                                        onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
                                                     />
                                                 </div>
                                                 <div>
@@ -319,105 +439,201 @@ export class SolidMediaMultipleField implements ISolidField {
                                                             height: 16,
                                                             width: 16
                                                         }}
-                                                        onClick={() => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`, fileDetails[0].id)}
+                                                        onClick={() => confirmDeleteFile(fileId, file?.id)}
                                                     />
                                                 </div>
                                             </div>
                                         </div>
                                         <div className="flex align-items-center gap-2 text-sm">
-                                            {formatFileSize(fileDetails[0].size)}
+                                            {formatFileSize(file.size)}
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        }
-
-                        {fileDetails.length > 1 &&
-                            <div className="flex align-items-center mt-1">
-                                <p className="m-0">
-                                    {fileDetails.length - 1} items
-                                </p>
-                                <div>
-                                    <Button type="button" size="small" text label="View" onClick={() => setShowAllFiles(true)} />
+                        );
+                    })
+                }
+            </Dialog>
+            <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={deleteFile} />
+                        <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 image?</p>
+            </Dialog>
+        </div>
+    );
+}
+
+export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
+    const [isShowAllFiles, setShowAllFiles] = useState(false);
+    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 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 (Array.isArray(fieldValue) && fieldValue.length > 0) {
+            const urls: string[] = [];
+            const details: { name: string; type: string; size: number, id: any, fileUrl: string }[] = [];
+            const objectUrls: string[] = [];
+            fieldValue.forEach((file: File | any) => {
+                if (file instanceof File) {
+                    // New file (from local upload)
+                    const fileUrl = URL.createObjectURL(file);
+                    objectUrls.push(fileUrl); // Store URL for cleanup
+                    urls.push(fileUrl);
+
+                    details.push({
+                        name: file.name,
+                        type: file.type,
+                        size: file.size,
+                        id: `${file.name}-${file.size}`,
+                        fileUrl: fileUrl // ✅ Store the generated object URL
+                    });
+                } else if (typeof file === "object" && file._full_url) {
+                    urls.push(file._full_url);
+                    details.push({
+                        name: file.originalFileName,
+                        type: file.mimeType,
+                        size: file.fileSize,
+                        id: file.id,
+                        fileUrl: file._full_url
+                    });
+                }
+            });
+            setFileDetails(details);
+        }
+    }, [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>
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label mt-4 font-medium">{fieldLabel}
+                </label>
+            }
+            {fileDetails.length > 0 &&
+                <div className="solid-file-view-wrapper">
+                    <div className="flex align-items-center gap-2">
+                        <FileReaderExt fileDetails={fileDetails[0]} />
+                        <div className="w-full flex flex-column gap-1">
+                            <div className="flex align-items-center justify-content-between">
+                                <p className="font-normal w-11 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
+                                <div className="flex align-items-center gap-2">
+                                    <div>
+                                        <Button
+                                            type="button"
+                                            text
+                                            icon={"pi pi-download"}
+                                            size="small"
+                                            style={{
+                                                height: 16,
+                                                width: 16
+                                            }}
+                                            onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
+                                        />
+                                    </div>
                                 </div>
                             </div>
-                        }
-
-                        <Dialog
-                            visible={isShowAllFiles}
-                            header="Items Uploaded"
-                            modal
-                            onHide={() => setShowAllFiles(false)}
-                            style={{ minWidth: 450 }}
-                        >
-                            {fileDetails.length > 1 &&
-                                fileDetails.map((file, index) => {
-                                    const fileId = `${file.name}-${file.size}`;
-                                    return (
-                                        <div key={fileId} className="solid-file-upload-wrapper">
+                            <div className="flex align-items-center gap-2 text-sm">
+                                {formatFileSize(fileDetails[0].size)}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+
+            {fileDetails.length > 1 &&
+                <div className="flex align-items-center mt-1">
+                    <p className="m-0">
+                        {fileDetails.length - 1} items
+                    </p>
+                    <div>
+                        <Button type="button" size="small" text label="View" onClick={() => setShowAllFiles(true)} />
+                    </div>
+                </div>
+            }
+
+            <Dialog
+                visible={isShowAllFiles}
+                header="Items Uploaded"
+                modal
+                onHide={() => setShowAllFiles(false)}
+                style={{ minWidth: 450 }}
+            >
+                {fileDetails.length > 1 &&
+                    fileDetails.map((file, index) => {
+                        const fileId = `${file.name}-${file.size}`;
+                        return (
+                            <div key={fileId} className="solid-file-view-wrapper">
+                                <div className="flex align-items-center gap-2">
+                                    <FileReaderExt fileDetails={file} />
+                                    <div className="w-full flex flex-column gap-1">
+                                        <div className="flex align-items-center justify-content-between">
+                                            <p className="font-normal w-11" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
                                             <div className="flex align-items-center gap-2">
-                                                <FileReaderExt fileDetails={file} />
-                                                <div className="w-full flex flex-column gap-1">
-                                                    <div className="flex align-items-center justify-content-between">
-                                                        <p className="font-normal w-11 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
-                                                        <div className="flex align-items-center gap-2">
-                                                            <div>
-                                                                <Button
-                                                                    type="button"
-                                                                    text
-                                                                    icon={"pi pi-download"}
-                                                                    size="small"
-                                                                    style={{
-                                                                        height: 16,
-                                                                        width: 16
-                                                                    }}
-                                                                    onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
-                                                                />
-                                                            </div>
-                                                            <div>
-                                                                <Button
-                                                                    type="button"
-                                                                    text
-                                                                    icon={"pi pi-times"}
-                                                                    size="small"
-                                                                    severity="secondary"
-                                                                    // className="p-2"
-                                                                    style={{
-                                                                        height: 16,
-                                                                        width: 16
-                                                                    }}
-                                                                    onClick={() => confirmDeleteFile(fileId, file?.id)}
-                                                                />
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                    <div className="flex align-items-center gap-2 text-sm">
-                                                        {formatFileSize(file.size)}
-                                                    </div>
+                                                <div>
+                                                    <Button
+                                                        type="button"
+                                                        text
+                                                        icon={"pi pi-download"}
+                                                        size="small"
+                                                        style={{
+                                                            height: 16,
+                                                            width: 16
+                                                        }}
+                                                        onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
+                                                    />
                                                 </div>
                                             </div>
                                         </div>
-                                    );
-                                })
-                            }
-                        </Dialog>
-                        <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={deleteFile} />
-                                    <Button type="button" label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
+                                        <div className="flex align-items-center gap-2 text-sm">
+                                            {formatFileSize(file.size)}
+                                        </div>
+                                    </div>
                                 </div>
-                            )}
-                            onHide={() => setDeleteImageDialogVisible(false)}
-                        >
-                            <p>Are you sure you want to delete image?</p>
-                        </Dialog>
-                    </div>
+                            </div>
+                        );
+                    })
                 }
-            </>
-        );
-    }
+            </Dialog>
+
+        </div>
+    );
 }