gbs-add-block 0.0.12 → 0.0.13

package/package.json

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

package/source/components/uploader/Uploader.tsx

@@ -6,8 +6,8 @@
  */
 
 import React, { useState, useRef, useEffect } from "react";
-import { upload, x } from "../../icon/iconPaths";
-import Icon from "../../icon/Icon";
+import { upload, x } from "@/src/component-lib/icon/iconPaths";
+import Icon from "@/src/component-lib/icon/Icon";
 import { GetFileIcon } from "./uploaderIcon";
 import AestheticProcessingAnimationWithStyles from "./ProgressAnimation";
 
@@ -163,6 +163,7 @@ export const FileUploader = ({
             {fileSizeErrors.map((error, index) => (
               <span key={index} className="text-xs text-red-500">
                 {error}
+                <br />
               </span>
             ))}
           </div>

package/source/components/uploader/uploaderService.ts

@@ -17,29 +17,54 @@ function processFiles(files: File[], chunkSize: number) {
   return finalFiles;
 }
 
-// Converts large files to chunks to send over network and sends
 export async function sendFiles(
   files: File[],
   chunkSize: number,
   apiUrl = "http://localhost:8080/upload"
 ) {
   const processedFiles = processFiles(files, chunkSize);
-  const totalChunks = processedFiles.length;
+
+  // 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 } = {};
 
   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());
 
-    if (file.size > chunkSize) {
-      formData.append("chunkIndex", i.toString());
-      formData.append("totalChunks", totalChunks.toString());
-    } else {
-      formData.append("chunkIndex", "0");
-      formData.append("totalChunks", "1");
+    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]++;
+    }
+
+    // Don't Remove the following console
+    // console.log("FormData contents:");
+    // formData.forEach((value, key) => {
+    //   console.log(`${key}: ${value}`);
+    // });
+
     try {
       const response = await fetch(apiUrl, {
         method: "POST",
@@ -57,7 +82,9 @@ export async function sendFiles(
           `File uploaded successfully. Document ID: ${data.documentId}`
         );
       } else {
-        console.log(`Chunk ${i + 1}/${totalChunks} uploaded`);
+        console.log(
+          `Chunk ${chunkIndexTracker[originalFile.name]}/${chunkCount} uploaded`
+        );
       }
     } catch (error) {
       console.error("Error uploading file chunk:", error);

package/source/icon/Icon.tsx

@@ -1,12 +1,23 @@
 import React from "react";
 
 type SvgElement = {
-  type: "path" | "circle";
+  type: "path" | "circle" | "polyline" | "rect" | "line";
   key: string;
   d?: string;
   cx?: number;
   cy?: number;
   r?: number;
+  points?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  rx?: number;
+  ry?: number;
+  x1?: number;
+  y1?: number;
+  x2?: number;
+  y2?: number;
 };
 
 type IconProps = {
@@ -21,6 +32,18 @@ export default function Icon({
     { type: "path", d: "m11 17-5-5 5-5", key: "13zhaf" },
     { type: "path", d: "m18 17-5-5 5-5", key: "h8a8et" },
     { type: "circle", cx: 12, cy: 12, r: 5, key: "circle1" },
+    { type: "polyline", points: "20 6 12 13 4 6", key: "polyline1" },
+    {
+      type: "rect",
+      x: 4,
+      y: 4,
+      width: 16,
+      height: 16,
+      key: "rect1",
+      rx: 2,
+      ry: 2,
+    },
+    { type: "line", x1: 0, y1: 0, x2: 24, y2: 24, key: "line1" }, // Example line
   ],
   dimensions = { width: "24", height: "24" },
 }: IconProps) {
@@ -47,6 +70,30 @@ export default function Icon({
               key={element.key}
             />
           );
+        } else if (element.type === "polyline") {
+          return <polyline points={element.points} key={element.key} />;
+        } else if (element.type === "rect") {
+          return (
+            <rect
+              x={element.x}
+              y={element.y}
+              width={element.width}
+              height={element.height}
+              rx={element.rx}
+              ry={element.ry}
+              key={element.key}
+            />
+          );
+        } else if (element.type === "line") {
+          return (
+            <line
+              x1={element.x1}
+              y1={element.y1}
+              x2={element.x2}
+              y2={element.y2}
+              key={element.key}
+            />
+          );
         }
         return null;
       })}