gbs-add-block 0.0.23-beta → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.23-beta",
+  "version": "0.0.23",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/select/index.tsx

@@ -20,7 +20,7 @@ import { check, search, upDown, x } from "../icon/iconPaths";
 import { getSourceData } from "../utils";
 import type { ItemsProps, SelectProps } from "./types";
 import { selectStyle } from "./style";
-import { popUp, primary } from "../../globalStyle";
+import { popUp, primary } from "../globalStyle";
 
 const Select = forwardRef<any, SelectProps>((props, ref) => {
   const {

package/source/components/uploader/UploadedFilePreview.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import Icon from "../icon/Icon";
+import { cloudDownload, x } from "../icon/iconPaths";
+import { GetFileIcon } from "./uploaderIcon";
+import type { UploadedFilePreview } from "./types";
+
+export default function UploadedFilePreview({
+  files = [],
+  UploadedFileData,
+  apiURL,
+  showImagePreview,
+  previewUrls,
+  onFileRemove,
+  isRemovable,
+  removedId,
+}: UploadedFilePreview) {
+  const handleDownload = (fileId: any, fileName: any) => {
+    const downloadUrl = constructDownloadUrl(fileId);
+    window.open(downloadUrl, "_blank");
+  };
+
+  const constructDownloadUrl = (fileId: any) => {
+    const url = new URL("download", apiURL);
+    url.searchParams.append("id", fileId);
+    return url.href;
+  };
+
+  const isImageFile = (fileName: any) => {
+    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
+    return imageExtensions.some((ext) => fileName.toLowerCase().endsWith(ext));
+  };
+  return (
+    <div>
+      {/* Rendering Uploded Local Files */}
+      {files.length > 0 && (
+        <div className="mt-4 space-y-2">
+          {files.map((file: any, index: number) => (
+            <div
+              key={index}
+              className="flex items-center justify-between bg-gray-50 p-2 rounded-md"
+            >
+              <div className="flex items-center space-x-2">
+                <GetFileIcon
+                  file={file}
+                  showImagePreview={showImagePreview}
+                  previewUrls={previewUrls}
+                />
+                <div>
+                  <p className="text-sm font-medium text-gray-700">
+                    {file.name}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {(file.size / 1024 / 1024).toFixed(2)} MB
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => {
+                  if (onFileRemove) onFileRemove(index);
+                }}
+                className="text-red-500 hover:text-red-700 transition-colors"
+              >
+                <Icon
+                  dimensions={{ width: "16", height: "16" }}
+                  elements={x}
+                  svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+                />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Rendering Uploded Remote Files Preview */}
+      {UploadedFileData.length > 0 &&
+        UploadedFileData.map((item: any, index: any) => (
+          <div
+            key={index}
+            className="flex items-center justify-between bg-gray-50 p-2 rounded-md mt-2"
+          >
+            <div className="flex items-center space-x-2">
+              {isImageFile(item.FileName) && (
+                <img
+                  src={constructDownloadUrl(item.FileID)}
+                  alt={item.FileName}
+                  className="mt-2 w-8 h-8 object-cover rounded-lg"
+                />
+              )}
+              <div>
+                <p className="text-sm font-medium text-gray-700">
+                  {item.FileName}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {(item.FileSize / 1024 / 1024).toFixed(2)} MB
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={() => handleDownload(item.FileID, item.FileName)}
+              >
+                <Icon
+                  dimensions={{ width: "18", height: "18" }}
+                  elements={cloudDownload}
+                  svgClass={"stroke-blue-800 fill-none dark:stroke-white"}
+                />
+              </button>
+              {isRemovable && (
+                <button
+                  aria-label="Remove"
+                  onClick={() => {
+                    if (removedId) removedId(item.FileID);
+                  }}
+                >
+                  <Icon
+                    dimensions={{ width: "16", height: "16" }}
+                    elements={x}
+                    svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+                  />
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}

package/source/components/uploader/Uploader.tsx

@@ -9,13 +9,12 @@
  */
 
 import React, { useState, useRef, useEffect } from "react";
-import { upload, x, circleCheck } from "../icon/iconPaths";
+import { upload, circleCheck } from "../icon/iconPaths";
 import Icon from "../icon/Icon";
-import { GetFileIcon } from "./uploaderIcon";
 import AestheticProcessingAnimationWithStyles from "./ProgressAnimation";
-import { sendFiles } from "./uploaderService";
-import { cloudDownload } from "../icon/iconPaths";
+import { getFilesById, sendFiles } from "./uploaderService";
 import type { FileUploadProps } from "./types";
+import UploadedFilePreview from "./UploadedFilePreview";
 
 export const FileUploader = ({
   showImagePreview = false,
@@ -23,14 +22,16 @@ export const FileUploader = ({
   onChange,
   selectedFiles = [],
   accept,
-  fileCount = 1,
+  fileCount = Infinity,
   disabled = false,
   inputFileSize, // Max file size in MB
   startUpload = false,
   apiURL = "",
   chunk_size = 1024 * 1024,
   uploadedFileIdArray = () => {},
-  fileData = [],
+  documentId = [],
+  isRemovable = true,
+  removedIds,
 }: FileUploadProps) => {
   const [files, setFiles] = useState<any[]>([]);
   const [previewUrls, setPreviewUrls] = useState<{ [key: string]: string }>({});
@@ -42,32 +43,47 @@ export const FileUploader = ({
     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");
+    } 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) {
-      // 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");
-        } else {
-          setFileUploadStatus("No files selected");
-        }
-      };
       handleUpload();
     }
   }, [startUpload]);
@@ -170,22 +186,6 @@ export const FileUploader = ({
     handleFileChange(multiple ? droppedFiles : [droppedFiles[0]]);
   };
 
-  const handleDownload = (fileId: any, fileName: any) => {
-    const downloadUrl = constructDownloadUrl(fileId);
-    window.open(downloadUrl, "_blank");
-  };
-
-  const constructDownloadUrl = (fileId: any) => {
-    const url = new URL("download", apiURL);
-    url.searchParams.append("id", fileId);
-    return url.href;
-  };
-
-  const isImageFile = (fileName: any) => {
-    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
-    return imageExtensions.some((ext) => fileName.toLowerCase().endsWith(ext));
-  };
-
   return (
     <div className="w-full max-w-md mx-auto">
       <div
@@ -261,81 +261,20 @@ export const FileUploader = ({
         <AestheticProcessingAnimationWithStyles progressPercentage={progress} />
       )}
 
-      {files.length > 0 && (
-        <div className="mt-4 space-y-2">
-          {files.map((file: any, index) => (
-            <div
-              key={index}
-              className="flex items-center justify-between bg-gray-50 p-2 rounded-md"
-            >
-              <div className="flex items-center space-x-2">
-                <GetFileIcon
-                  file={file}
-                  showImagePreview={showImagePreview}
-                  previewUrls={previewUrls}
-                />
-                <div>
-                  <p className="text-sm font-medium text-gray-700">
-                    {file.name}
-                  </p>
-                  <p className="text-xs text-gray-500">
-                    {(file.size / 1024 / 1024).toFixed(2)} MB
-                  </p>
-                </div>
-              </div>
-              <button
-                type="button"
-                onClick={() => removeFile(index)}
-                className="text-red-500 hover:text-red-700 transition-colors"
-              >
-                <Icon
-                  dimensions={{ width: "16", height: "16" }}
-                  elements={x}
-                  svgClass={"stroke-red-500 fill-none dark:stroke-white"}
-                />
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {fileData.length > 0 &&
-        fileData.map((item: any, index: any) => (
-          <div
-            key={index}
-            className="flex items-center justify-between bg-gray-50 p-2 rounded-md mt-2"
-          >
-            <div className="flex items-center space-x-2">
-              {/* <GetFileIcon
-                file={item.FileName}
-                showImagePreview={showImagePreview}
-                previewUrls={previewUrls}
-              /> */}
-              {isImageFile(item.FileName) && (
-                <img
-                  src={constructDownloadUrl(item.FileID)}
-                  alt={item.FileName}
-                  className="mt-2 w-8 h-8 object-cover rounded-lg"
-                />
-              )}
-              <div>
-                <p className="text-sm font-medium text-gray-700">
-                  {item.FileName}
-                </p>
-                <p className="text-xs text-gray-500">
-                  {(item.FileSize / 1024 / 1024).toFixed(2)} MB
-                </p>
-              </div>
-            </div>
-            <button onClick={() => handleDownload(item.FileID, item.FileName)}>
-              <Icon
-                dimensions={{ width: "18", height: "18" }}
-                elements={cloudDownload}
-                svgClass={"stroke-red-500 fill-none dark:stroke-white"}
-              />
-            </button>
-          </div>
-        ))}
+      <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/components/uploader/types.ts

@@ -1,7 +1,7 @@
 export type FileUploadProps = {
   showImagePreview?: boolean;
   multiple?: boolean;
-  onChange: (files: FileList | null) => void;
+  onChange?: (files: FileList | null) => void;
   selectedFiles?: File[];
   accept?: string;
   fileCount?: number;
@@ -12,4 +12,19 @@ export type FileUploadProps = {
   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/components/uploader/uploaderIcon.tsx

@@ -11,8 +11,8 @@ import {
   filetext,
   film,
   music,
-} from "../../icon/iconPaths";
-import Icon from "../../icon/Icon";
+} from "../icon/iconPaths";
+import Icon from "../icon/Icon";
 
 // returns an icon based on the selected file type
 export const GetFileIcon = ({ file, showImagePreview, previewUrls }: any) => {

package/source/components/uploader/uploaderService.ts

@@ -118,7 +118,17 @@ export async function getAllFiles(apiUrl: string) {
 }
 
 // returns files by ID
-export async function getFilesById(apiUrl: string, documentId: string) {
-  let files: any[] = [];
-  return files;
+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();
+    })
+  );
 }