@solidstarters/solid-core-ui 1.1.11 → 1.1.12

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

@@ -10,7 +10,8 @@ import { useDropzone } from "react-dropzone";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-
+import { FileReaderExt } from "@/components/common/FileReaderExt";
+import { ProgressBar } from "primereact/progressbar";
 export class SolidMediaMultipleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -88,7 +89,7 @@ export class SolidMediaMultipleField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        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;
@@ -96,61 +97,156 @@ export class SolidMediaMultipleField implements ISolidField {
         const [imagesPreview, setImagesPreview] = useState<Array<string | ArrayBuffer>>([]);
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
         const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
+        const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
+        const [uploadCompleted, setUploadCompleted] = useState<Record<string, boolean>>({});
+        const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number }[]>([]);
+        const [uploadedSize, setUploadedSize] = useState<Record<string, string>>({});
+        const [totalSize, setTotalSize] = useState<Record<string, string>>({});
+        const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
 
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
+        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(() => {
-            // Sync imagesPreview with Formik's field value on mount/update
-            if (formik.values[fieldLayoutInfo.attrs.name]) {
-                const existingFiles = formik.values[fieldLayoutInfo.attrs.name] || [];
-                const urls = existingFiles.map((file: File | any) => {
+            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 }[] = [];
+                const progress: Record<string, number> = {};
+                const completed: Record<string, boolean> = {};
+
+                fieldValue.forEach((file: File | any) => {
                     if (file instanceof File) {
-                        return URL.createObjectURL(file); // Generate preview URL for file
-                    }
-                    if (typeof file === 'object') {
-                        return file; // Handle existing URL strings
+                        // New file (from local upload)
+                        urls.push(URL.createObjectURL(file));
+                        details.push({ name: file.name, type: file.type, size: file.size });
+                    } else if (typeof file === "object" && file._full_url) {
+                        urls.push(file._full_url);
+                        details.push({
+                            name: file.relativeUri || "Unknown", // Use relativeUri or fallback
+                            type: file.mediaStorageProviderMetadata?.type || "Unknown", // Extract type if available
+                            size: 0, // API doesn't provide size, set 0 or fetch from metadata if available
+                        });
                     }
                 });
+                details.forEach(file => {
+                    progress[`${file.name}-${file.size}`] = 100;
+                    completed[`${file.name}-${file.size}`] = true;
+                });
+                setUploadProgress(progress);
+                setUploadCompleted(completed);
                 setImagesPreview(urls);
+                setFileDetails(details);
             }
         }, [formik.values, fieldLayoutInfo.attrs.name]);
 
-        const handleDrop = (acceptedFiles: File[]) => {
-            const currentFiles = formik.values[fieldLayoutInfo.attrs.name] || [];
-            const updatedFiles = [...currentFiles, ...acceptedFiles];
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedFiles);
+        const handleDropImages = (acceptedFiles: File[]) => {
+            if (!acceptedFiles.length) return;
+
+            const newFileDetails = [...fileDetails];
+            const newUploadProgress = { ...uploadProgress };
+            const newUploadedSize = { ...uploadedSize };
+            const newTotalSize = { ...totalSize };
+            const newUploadCompleted = { ...uploadCompleted };
+
+            acceptedFiles.forEach((file) => {
+                const fileId = `${file.name}-${file.size}`; // Unique identifier for tracking each file
+
+                newFileDetails.push({ name: file.name, type: file.type, size: file.size });
+                newUploadProgress[fileId] = 0;
+                newUploadedSize[fileId] = "0 KB";
+                newTotalSize[fileId] = formatFileSize(file.size);
+                newUploadCompleted[fileId] = false;
+
+                const reader = new FileReader();
+
+                reader.onloadstart = () => {
+                    setUploadProgress((prev) => ({ ...prev, [fileId]: 0 }));
+                    setUploadedSize((prev) => ({ ...prev, [fileId]: "0 KB" }));
+                };
+
+                reader.onprogress = (event) => {
+                    if (event.loaded && event.total) {
+                        const percent = Math.round((event.loaded / event.total) * 100);
+                        setUploadProgress((prev) => ({ ...prev, [fileId]: percent }));
+                        setUploadedSize((prev) => ({ ...prev, [fileId]: formatFileSize(event.loaded) }));
+                    }
+                };
+
+                reader.onloadend = () => {
+                    setUploadProgress((prev) => ({ ...prev, [fileId]: 100 }));
+                    setUploadCompleted((prev) => ({ ...prev, [fileId]: true }));
+                    setUploadedSize((prev) => ({ ...prev, [fileId]: newTotalSize[fileId] }));
+                };
+
+                reader.readAsDataURL(file);
+            });
+
+            setFileDetails(newFileDetails);
+            setUploadProgress(newUploadProgress);
+            setUploadedSize(newUploadedSize);
+            setTotalSize(newTotalSize);
+            setUploadCompleted(newUploadCompleted);
+
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, acceptedFiles);
         };
 
 
-        const handleDelete = () => {
-            imageToBeDeletedData.e.stopPropagation();
-            const currentFiles = formik.values[fieldLayoutInfo.attrs.name] || [];
-            const updatedFiles = currentFiles.filter((_: any, i: number) => i !== imageToBeDeletedData.index);
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedFiles);
-            if (!(currentFiles[imageToBeDeletedData.index] instanceof File)) {
-                deleteMedia(currentFiles[imageToBeDeletedData.index].id);
-            }
-            setDeleteImageDialogVisible(false);
+        const handleCancelUpload = (fileId: string) => {
+            setFileDetails((prev) => prev.filter((file) => fileId !== `${file.name}-${file.size}`));
+            setUploadProgress((prev) => {
+                const newProgress = { ...prev };
+                delete newProgress[fileId];
+                return newProgress;
+            });
+            setUploadCompleted((prev) => {
+                const newCompleted = { ...prev };
+                delete newCompleted[fileId];
+                return newCompleted;
+            });
+            setUploadedSize((prev) => {
+                const newSize = { ...prev };
+                delete newSize[fileId];
+                return newSize;
+            });
+            setTotalSize((prev) => {
+                const newSize = { ...prev };
+                delete newSize[fileId];
+                return newSize;
+            });
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, fileDetails.filter((file) => `${file.name}-${file.size}` !== fileId));
+        };
 
+        const confirmDeleteFile = (fileId: any) => {
+            setSelectedFileId(fileId);
+            setDeleteImageDialogVisible(true);
         };
 
+        const deleteFile = () => {
+            if (selectedFileId) {
+                handleCancelUpload(selectedFileId);
+                setDeleteImageDialogVisible(false);
+                setSelectedFileId(null);
+            }
+        };
         const {
             getRootProps,
             getInputProps,
             isDragActive,
         } = useDropzone({
-            onDrop: handleDrop,
-            accept: { "image/jpeg": [], "image/png": [] },
-            maxSize: 2 * 1024 * 1024,
+            onDrop: handleDropImages,
+            accept: {
+                "image/jpeg": [],
+                "image/png": [],
+            },
+            maxSize: 2 * 1024 * 1024, // 2MB
         });
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
@@ -169,67 +265,149 @@ export class SolidMediaMultipleField implements ISolidField {
             return ""; // Fallback for invalid cases
         }
 
+        const [isShowAllFiles, setShowAllFiles] = useState(false);
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <div
-                    {...getRootProps()}
-                    className="dropzone p-3 border-1 border-round surface-border"
-                >
-                    <input {...getInputProps()}
-                    />
-                    {isDragActive ? (
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <div
+                        {...getRootProps()}
+                        className="solid-dropzone-wrapper"
+                    >
+                        <input {...getInputProps()} />
                         <DropzonePlaceholder />
+                    </div>
+                </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">
+                                    <div className="font-bold">{fileDetails[0].name}</div>
+                                    <div
+                                        className="cancel-upload-button"
+                                        onClick={() => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`)}
+                                    >
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
+                                            <path d="M0.6 6L0 5.4L2.4 3L0 0.6L0.6 0L3 2.4L5.4 0L6 0.6L3.6 3L6 5.4L5.4 6L3 3.6L0.6 6Z" fill="#4B4D52" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                {uploadCompleted[`${fileDetails[0].name}-${fileDetails[0].size}`] ? (
+                                    <div className="flex align-items-center gap-2 text-sm">
+                                        {totalSize[`${fileDetails[0].name}-${fileDetails[0].size}`]} of {totalSize[`${fileDetails[0].name}-${fileDetails[0].size}`]}
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                            <path d="M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 6.295 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z" fill="#722ED1" />
+                                        </svg>
+                                        Completed
+                                    </div>
+                                ) : (
+                                    <div className="flex align-items-center gap-2 text-sm">
+                                        {uploadedSize[`${fileDetails[0].name}-${fileDetails[0].size}`]} of {totalSize[`${fileDetails[0].name}-${fileDetails[0].size}`]}
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                            <path d="M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z" fill="black" />
+                                        </svg>
+                                        Uploading {uploadProgress[`${fileDetails[0].name}-${fileDetails[0].size}`]}% Completed
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <ProgressBar
+                            value={uploadProgress[`${fileDetails[0].name}-${fileDetails[0].size}`]}
+                            showValue={false}
+                            style={{ height: 4 }}
+                            className="mt-2"
+                        />
+                    </div>
+                }
 
-                    ) : imagesPreview.length > 0 ? (
-                        <div className="flex overflow-auto gap-3">
-                            {imagesPreview.map((preview, index) => (
-                                <div key={index} className="relative">
+                {fileDetails.length > 1 &&
+                    <div className="flex align-items-center">
+                        <p className="m-0">
+                            {fileDetails.length - 1} items {uploadCompleted ? 'Uploaded' : 'Uploading'}
+                        </p>
+                        <div>
+                            <Button type="button" text label="View" onClick={() => setShowAllFiles(true)} />
+                        </div>
+                    </div>
+                }
 
-                                    <img
-                                        src={imageFormatHandler(preview) as string}
-                                        alt={`Preview ${index + 1}`}
-                                        className="bg-white h-10rem w-14rem"
-                                    />
-                                    <Button
-                                        type="button"
-                                        onClick={(e) => {
-                                            e.stopPropagation();
-                                            setDeleteImageDialogVisible(true);
-                                            const data = {
-                                                index, e
-                                            }
-                                            setImageToBeDeletedData(data)
-                                        }}
-                                        icon="pi pi-trash"
-                                        severity="secondary"
-                                        outlined
-                                        className="absolute right-0 top-0 bg-white z-5 m-2"
-                                        style={{ height: 25, width: 25 }}
+                <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={file} />
+                                        <div className="w-full flex flex-column gap-1">
+                                            <div className="flex align-items-center justify-content-between">
+                                                <div className="font-bold">{file.name}</div>
+                                                <div
+                                                    className="cancel-upload-button"
+                                                    onClick={() => confirmDeleteFile(fileId)}
+                                                >
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
+                                                        <path d="M0.6 6L0 5.4L2.4 3L0 0.6L0.6 0L3 2.4L5.4 0L6 0.6L3.6 3L6 5.4L5.4 6L3 3.6L0.6 6Z" fill="#4B4D52" />
+                                                    </svg>
+                                                </div>
+                                            </div>
+                                            {uploadCompleted[fileId] ? (
+                                                <div className="flex align-items-center gap-2 text-sm">
+                                                    {totalSize[fileId]} of {totalSize[fileId]}
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                                                        <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
+                                                    </svg>
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                        <path d="M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 6.295 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z" fill="#722ED1" />
+                                                    </svg>
+                                                    Completed
+                                                </div>
+                                            ) : (
+                                                <div className="flex align-items-center gap-2 text-sm">
+                                                    {uploadedSize[fileId]} of {totalSize[fileId]}
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                                                        <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
+                                                    </svg>
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                                        <path d="M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z" fill="black" />
+                                                    </svg>
+                                                    Uploading {uploadProgress[fileId]}% Completed
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <ProgressBar
+                                        value={uploadProgress[fileId]}
+                                        showValue={false}
+                                        style={{ height: 4 }}
+                                        className="mt-2"
                                     />
-                                    <DropzoneUpload />
-
                                 </div>
-                            ))}
-                        </div>
-                    ) :
-                        <DropzonePlaceholder />
+                            );
+                        })
                     }
-
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
+                </Dialog>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
                 <Dialog
                     visible={isDeleteImageDialogVisible}
                     header="Confirm Delete"
                     modal
                     footer={() => (
                         <div className="flex justify-content-center">
-                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleDelete} />
+                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteFile} />
                             <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
                         </div>
                     )}
@@ -240,4 +418,4 @@ export class SolidMediaMultipleField implements ISolidField {
             </div >
         );
     }
-}
+}