@grampro/kit 0.0.0-stage → 2.4.0

package/source/legacy-components/uploader/index.tsx

@@ -0,0 +1,311 @@
+/**
+ * Important!!!!
+ * Work In Progress Code
+ *
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import { upload, circleCheck } from "../icon/iconPaths";
+import Icon from "../icon/Icon";
+import AestheticProcessingAnimationWithStyles from "./ProgressAnimation";
+import { getFilesById, sendFiles } from "./uploaderService";
+import type { FileUploadProps } from "./types";
+import UploadedFilePreview from "./UploadedFilePreview";
+
+export const FileUploader = ({
+  showImagePreview = false,
+  multiple = false,
+  onChange,
+  selectedFiles = [],
+  accept,
+  fileCount = Infinity,
+  disabled = false,
+  inputFileSize, // Max file size in MB
+  startUpload = false,
+  apiURL = "",
+  chunk_size = 1024 * 1024,
+  uploadedFileIdArray = () => {},
+  documentId = [],
+  isRemovable = true,
+  removedIds,
+}: FileUploadProps) => {
+  const [files, setFiles] = useState<any[]>([]);
+  const [previewUrls, setPreviewUrls] = useState<{ [key: string]: string }>({});
+  const [isDragging, setIsDragging] = useState(false);
+  const [fileCountError, setFileCountError] = useState(false);
+  const [fileSizeErrors, setFileSizeErrors] = useState<string[]>([]); // Array for file size errors
+  const [isUploading, setIsUploading] = useState(false);
+  const [fileUploadStatus, setFileUploadStatus] = useState<string | undefined>(
+    undefined
+  );
+  const [progress, setProgress] = useState(0);
+  const [fileData, setFileData] = useState<any[]>([]);
+  const fileInputRef = useRef<any>(null);
+  const dropZoneRef = useRef<any>(null);
+
+  // Upload Handler
+  const handleUpload = async () => {
+    if (files.length > 0) {
+      setFileUploadStatus(undefined);
+      await sendFiles(
+        files,
+        chunk_size,
+        apiURL,
+        ({ uploading, progress, uploadedFileIds }) => {
+          setIsUploading(uploading);
+          if (progress !== undefined) setProgress(progress);
+          // Returns Uploaded File ID's
+          if (uploadedFileIds) uploadedFileIdArray(uploadedFileIds);
+        }
+      );
+      setFileUploadStatus("Upload completed");
+      setFiles([]);
+    } else {
+      setFileUploadStatus("No files selected");
+    }
+  };
+
+  // Getting Files by ID
+  const getFiles = async () => {
+    const files = await getFilesById(apiURL, documentId);
+    setFileData(files);
+  };
+
+  // Fetching by FileId
+  useEffect(() => {
+    if (documentId.length) {
+      getFiles();
+    }
+  }, [documentId]);
+
+  // Starts uploads to server
+  useEffect(() => {
+    if (startUpload) {
+      handleUpload();
+    }
+  }, [startUpload]);
+
+  // For Binding values on edit
+  useEffect(() => {
+    if (selectedFiles && selectedFiles.length > 0) {
+      setFiles(multiple ? selectedFiles : [selectedFiles[0]]);
+    }
+  }, [selectedFiles, multiple]);
+
+  // Adds files to file array
+  const handleFileChange = (newFiles: File[]) => {
+    // First check for duplicates
+    const duplicateFiles: string[] = [];
+    const nonDuplicateFiles = newFiles.filter((newFile) => {
+      const isDuplicate = files.some(
+        (existingFile) => existingFile.name === newFile.name
+      );
+      if (isDuplicate) {
+        duplicateFiles.push(newFile.name);
+      }
+      return !isDuplicate;
+    });
+
+    // If there are duplicates, set error messages
+    if (duplicateFiles.length > 0) {
+      setFileSizeErrors((prev) => [
+        ...prev,
+        ...duplicateFiles.map(
+          (fileName) => `File "${fileName}" has already been uploaded`
+        ),
+      ]);
+
+      // If all files are duplicates, exit early
+      if (nonDuplicateFiles.length === 0) return;
+    }
+
+    let updatedFiles: File[] = multiple
+      ? [...files, ...nonDuplicateFiles]
+      : [nonDuplicateFiles[0]];
+
+    // Ensure the total number of files doesn't exceed the fileCount limit
+    if (updatedFiles.length > fileCount) {
+      setFileCountError(true);
+      updatedFiles = updatedFiles.slice(0, fileCount); // Limit the number of files to fileCount
+    } else {
+      setFileCountError(false);
+    }
+
+    // File size validation
+    const validFiles: any = [];
+    const newErrors: string[] = [];
+
+    updatedFiles.forEach((file) => {
+      const fileSizeInMB = file.size / 1024 / 1024; // Convert bytes to MB
+      if (inputFileSize && fileSizeInMB > inputFileSize) {
+        newErrors.push(
+          `File ${file.name} exceeds the size limit of ${inputFileSize} MB`
+        );
+      } else {
+        validFiles.push(file);
+      }
+    });
+
+    // Update state with valid files and set errors for oversized files
+    if (validFiles.length > 0) {
+      setFiles(validFiles);
+      setPreviewUrls({});
+      validFiles.forEach((file: any) => {
+        if (showImagePreview && file.type.startsWith("image/")) {
+          const reader = new FileReader();
+          reader.onload = () => {
+            setPreviewUrls((prev) => ({
+              ...prev,
+              [file.name]: reader.result as string,
+            }));
+          };
+          reader.readAsDataURL(file);
+        }
+      });
+      if (onChange) onChange(validFiles);
+    }
+
+    // Set file size errors (now includes both size and duplicate errors)
+    setFileSizeErrors(newErrors);
+  };
+
+  // Removes the file from file array
+  const removeFile = (index: number) => {
+    const updatedFiles: any = files.filter((_, i) => i !== index);
+    setFiles(updatedFiles);
+    setPreviewUrls((prevPreviews) => {
+      const { [files[index].name]: _, ...rest } = prevPreviews;
+      return rest;
+    });
+
+    // Reset file input to allow re-selecting the same file
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+
+    if (onChange) onChange(updatedFiles);
+  };
+
+  // Drag and drop handling
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    handleFileChange(multiple ? droppedFiles : [droppedFiles[0]]);
+  };
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <div
+        ref={dropZoneRef}
+        className={`flex flex-col items-center border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
+          isDragging
+            ? "border-black bg-zinc-50 dark:border-white dark:bg-zinc-900"
+            : "border-gray-300 hover:border-gray-400"
+        }`}
+        onClick={() => fileInputRef.current.click()}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <Icon
+          dimensions={{ width: "36", height: "36" }}
+          elements={upload}
+          svgClass={"stroke-gray-400 fill-none dark:stroke-white"}
+        />
+        <p className="mt-2 text-sm text-gray-500">
+          Click to upload or drag and drop
+        </p>
+        <p className="text-xs text-gray-400">
+          {multiple
+            ? "Supports multiple file uploads"
+            : "Single file upload only"}
+        </p>
+
+        {/* Shows FileUpload Status Here */}
+        {fileUploadStatus && (
+          <p className="text-xs mt-2 text-green-500 flex gap-1">
+            <Icon
+              dimensions={{ width: "16", height: "16" }}
+              elements={circleCheck}
+              svgClass={"stroke-green-500 fill-none dark:stroke-white"}
+            />
+            {fileUploadStatus}
+          </p>
+        )}
+
+        {/* Display file size errors */}
+        {fileSizeErrors.length > 0 && (
+          <div className="mt-2 space-y-1">
+            {fileSizeErrors.map((error, index) => (
+              <span key={index} className="text-xs text-red-500">
+                {error}
+                <br />
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+      <input
+        type="file"
+        ref={fileInputRef}
+        className="hidden"
+        onChange={(e) => handleFileChange(Array.from(e.target.files || []))}
+        multiple={multiple}
+        accept={accept}
+        disabled={disabled}
+      />
+
+      {/* Display file count error */}
+      {fileCountError && (
+        <span className="text-xs text-red-500">
+          Maximum file count is set to {fileCount}
+        </span>
+      )}
+
+      {/* Loading Animation */}
+      {isUploading && (
+        <AestheticProcessingAnimationWithStyles progressPercentage={progress} />
+      )}
+
+      <UploadedFilePreview
+        UploadedFileData={fileData}
+        apiURL={apiURL}
+        files={files}
+        showImagePreview={showImagePreview}
+        previewUrls={previewUrls}
+        onFileRemove={(index: any) => {
+          removeFile(index);
+        }}
+        isRemovable={isRemovable}
+        removedId={(fileId: any) => {
+          if (removedIds) removedIds(fileId);
+        }}
+      />
+    </div>
+  );
+};

package/source/legacy-components/uploader/types.ts

@@ -0,0 +1,30 @@
+export type FileUploadProps = {
+  showImagePreview?: boolean;
+  multiple?: boolean;
+  onChange?: (files: FileList | null) => void;
+  selectedFiles?: File[];
+  accept?: string;
+  fileCount?: number;
+  disabled?: boolean;
+  inputFileSize?: number;
+  startUpload?: boolean;
+  apiURL?: string;
+  chunk_size?: number;
+  uploadedFileIdArray?: (ids: string[]) => void;
+  fileData?: File[];
+  documentId?: string[];
+  isRemovable?: boolean;
+  removedIds?: (fileId: string | null) => void;
+};
+
+export type UploadedFilePreview = {
+  files?: any[];
+  UploadedFileData: any[];
+  apiURL: string;
+  previewType?: boolean;
+  showImagePreview: boolean;
+  previewUrls: { [key: string]: string };
+  onFileRemove: any;
+  isRemovable: boolean;
+  removedId?: any;
+};

package/source/legacy-components/uploader/uploaderIcon.tsx

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  fileimage,
+  filespreadsheet,
+  filetext,
+  film,
+  music,
+} from "../icon/iconPaths";
+import Icon from "../icon/Icon";
+
+// returns an icon based on the selected file type
+export const GetFileIcon = ({ file, showImagePreview, previewUrls }: any) => {
+  if (file.type.startsWith("image/"))
+    return showImagePreview ? (
+      <img
+        src={previewUrls[file.name]}
+        alt={file.name}
+        className="mt-2 w-8 h-8 object-cover rounded-lg"
+      />
+    ) : (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={fileimage}
+        svgClass={"stroke-zinc-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type === "application/pdf" || file.type.includes("pdf"))
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={filetext}
+        svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type.includes("spreadsheet") || file.type.includes("excel"))
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={filespreadsheet}
+        svgClass={"stroke-green-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type.startsWith("video/"))
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={film}
+        svgClass={"stroke-purple-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type.startsWith("audio/"))
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={music}
+        svgClass={"stroke-yellow-500 fill-none dark:stroke-white"}
+      />
+    );
+  return (
+    <Icon
+      dimensions={{ width: "16", height: "16" }}
+      elements={filetext}
+      svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+    />
+  );
+};

package/source/legacy-components/uploader/uploaderService.ts

@@ -0,0 +1,134 @@
+function processFiles(files: File[], chunkSize: number) {
+  const finalFiles: { file: Blob; originalFile: File }[] = [];
+
+  files.forEach((file) => {
+    if (file.size > chunkSize) {
+      let offset = 0;
+      while (offset < file.size) {
+        const chunk = file.slice(offset, offset + chunkSize);
+        finalFiles.push({ file: chunk, originalFile: file });
+        offset += chunkSize;
+      }
+    } else {
+      finalFiles.push({ file, originalFile: file });
+    }
+  });
+
+  return finalFiles;
+}
+
+export async function sendFiles(
+  files: File[],
+  chunkSize: number,
+  apiUrl = "http://localhost:8080/upload",
+  isUploading = (status: {
+    uploading: boolean;
+    progress?: number;
+    file?: string;
+    uploadedFileIds?: string[];
+  }) => {}
+) {
+  const processedFiles = processFiles(files, chunkSize);
+
+  // Track how many chunks belong to the current file being processed
+  const fileChunkCounts: { [key: string]: number } = {};
+  files.forEach((file) => {
+    fileChunkCounts[file.name] = Math.ceil(file.size / chunkSize);
+  });
+
+  // To track chunk index per file
+  const chunkIndexTracker: { [key: string]: number } = {};
+
+  let totalChunks = processedFiles.length;
+  let uploadedChunks = 0;
+  const uploadedFileIds: string[] = [];
+
+  for (let i = 0; i < processedFiles.length; i++) {
+    const { file, originalFile } = processedFiles[i];
+    const formData = new FormData();
+    formData.append("file", file, originalFile.name);
+    formData.append("originalname", originalFile.name);
+    formData.append("originalFileSize", originalFile.size.toString());
+
+    const chunkCount = fileChunkCounts[originalFile.name];
+    const isChunked = chunkCount > 1;
+
+    // Initialize or reset chunkIndex per file
+    if (!chunkIndexTracker[originalFile.name]) {
+      chunkIndexTracker[originalFile.name] = 0; // Start at 0 for each file
+    }
+
+    const chunkIndex = isChunked
+      ? chunkIndexTracker[originalFile.name].toString()
+      : "";
+    formData.append("chunkIndex", chunkIndex);
+    formData.append("totalChunks", isChunked ? chunkCount.toString() : "");
+
+    // Increment chunkIndex for the current file
+    if (isChunked) {
+      chunkIndexTracker[originalFile.name]++;
+    }
+
+    try {
+      isUploading({
+        uploading: true,
+        progress: (uploadedChunks / totalChunks) * 100,
+        file: originalFile.name,
+      });
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      if (data.documentId) uploadedFileIds.push(data.documentId);
+
+      uploadedChunks++;
+      isUploading({
+        uploading: true,
+        progress: (uploadedChunks / totalChunks) * 100,
+        file: originalFile.name,
+      });
+    } catch (error) {
+      console.error("Error uploading file chunk:", error);
+      isUploading({
+        uploading: false,
+        progress: (uploadedChunks / totalChunks) * 100,
+        file: originalFile.name,
+      });
+    }
+  }
+
+  // Indicate that the upload is complete
+  isUploading({
+    uploading: false,
+    progress: 100,
+    uploadedFileIds: uploadedFileIds,
+  });
+}
+
+// returns all files
+export async function getAllFiles(apiUrl: string) {
+  let files: any[] = [];
+  return files;
+}
+
+// returns files by ID
+export async function getFilesById(
+  apiUrl: string,
+  documentIds: string[]
+): Promise<any[]> {
+  return Promise.all(
+    documentIds.map(async (id) => {
+      const response = await fetch(`${apiUrl}?id=${id}`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch document with ID: ${id}`);
+      }
+      return response.json();
+    })
+  );
+}