gbs-add-block 0.0.7 → 0.0.9

package/index.js

@@ -17,6 +17,7 @@ const COMPONENTS = [
   "Modal",
   "Spinner",
   "Toast",
+  "Uploader"
 ];
 const SOURCE_PATH = path.join(__dirname, "source", "components");
 const DEST_PATH = path.join(process.cwd(), "src", "component-lib");

package/package.json

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

package/source/components/input/index.tsx

@@ -17,13 +17,16 @@ export const Input = ({
   OTPLength = 4,
   OTPClass = "w-8 h-10 m-1 border border-gray-600 rounded-lg text-center",
   onOTPValueChange,
+  error = undefined,
   ...props
 }: InputProps) => {
   const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
   const [showPassword, setShowPassword] = useState(false);
   const inputRefs = useRef<any>([]);
 
-  const defaultClass = "bg-gray-100 p-2 rounded-lg";
+  const defaultClass = `bg-gray-100 p-2 rounded-lg ${
+    error ? "border border-red-600" : ""
+  }`;
 
   // This will update the OTP Field Value
   const updateOtpValue = (index: number, e: any) => {
@@ -60,7 +63,7 @@ export const Input = ({
   return (
     <div>
       {!OTPField ? (
-        <div className="text-input-container w-60 relative">
+        <div className="text-input-container w-full relative">
           <input
             className={twMerge(defaultClass, "w-full focus:outline-blue-400")}
             {...props}
@@ -80,6 +83,7 @@ export const Input = ({
               />
             </button>
           )}
+          <div className="text-xs text-red-500">{error && error}</div>
         </div>
       ) : (
         <div className="otp-container">
@@ -94,7 +98,7 @@ export const Input = ({
                 value={otpValues[index]}
                 onChange={(e) => updateOtpValue(index, e)}
                 onKeyDown={(e) => handleKeydown(index, e)}
-                ref={(ref) => (inputRefs.current[index] = ref)}
+                // ref={(ref) => (inputRefs.current[index] = ref)}
                 className={OTPClass}
               />
             ))}

package/source/components/select/index.tsx

@@ -33,6 +33,7 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
     showSearch = true,
     onSelect,
     selectedItem: initialSelectedItem,
+    error = undefined,
   } = props;
 
   const [showPopover, setShowPopover] = useState(false);
@@ -145,11 +146,14 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
   }));
 
   return (
-    <div className="relative" ref={selectRef}>
-      <div className="w-[200px] relative">
+    <div className="relative w-full" ref={selectRef}>
+      <div className="w-full relative">
         <button
-          className="flex items-center border px-4 py-2 w-[200px] justify-between rounded-lg font-medium text-sm dark:bg-black dark:border-white dark:text-white"
+          className={`flex items-center ${
+            error ? "border border-red-600" : "border"
+          } px-4 py-2 w-full justify-between rounded-lg font-medium text-sm dark:bg-black dark:border-white dark:text-white`}
           onClick={togglePopover}
+          type="button"
         >
           {selectedDisplay || placeholder}
           <Icon
@@ -168,10 +172,11 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
             />
           </button>
         )}
+        <p className="text-xs text-red-500">{error && error}</p>
       </div>
 
       {showPopover && (
-        <div className="w-[200px] absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white">
+        <div className="w-full absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white">
           {showSearch && (
             <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">
               <Icon

package/source/components/uploader/Uploader.tsx

@@ -17,58 +17,121 @@ export const FileUploader = ({
   onChange,
   startsUpload = false,
   selectedFiles = [],
+  accept,
+  fileCount,
 }: any) => {
   const [files, setFiles] = useState<any[]>([]);
   const [previewUrls, setPreviewUrls] = useState<{ [key: string]: string }>({});
+  const [isDragging, setIsDragging] = useState(false);
+  const [fileCountError, setFileCountError] = useState(false);
   const fileInputRef = useRef<any>(null);
+  const dropZoneRef = useRef<any>(null);
 
+  // For Binding values on edit
   useEffect(() => {
     if (selectedFiles && selectedFiles.length > 0) {
-      setFiles(selectedFiles);
+      setFiles(multiple ? selectedFiles : [selectedFiles[0]]);
     }
-  }, [selectedFiles]);
+  }, [selectedFiles, multiple]);
 
-  // adds files to file array
-  const handleFileChange = (e: any) => {
-    const selectedFiles = Array.from(e.target.files);
-    const newPreviewUrls = { ...previewUrls };
+  // Shows Error when filecount is higher
+  useEffect(() => {
+    if (files.length > fileCount) {
+      setFileCountError(true);
+    }
+  }, [files, fileCount]);
+
+  // Adds files to file array
+  const handleFileChange = (newFiles: File[]) => {
+    let updatedFiles: File[] = multiple
+      ? [...files, ...newFiles]
+      : [newFiles[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);
+    }
+
+    setFiles(updatedFiles);
+
+    // Clear previous preview URLs if not multiple
+    if (!multiple) {
+      setPreviewUrls({});
+    }
 
-    selectedFiles.forEach((file: any) => {
+    newFiles.forEach((file) => {
       if (showImagePreview && file.type.startsWith("image/")) {
         const reader = new FileReader();
         reader.onload = () => {
-          newPreviewUrls[file.name] = reader.result as string;
-          setPreviewUrls(newPreviewUrls);
+          setPreviewUrls((prev) => ({
+            ...prev,
+            [file.name]: reader.result as string,
+          }));
         };
         reader.readAsDataURL(file);
       }
     });
 
-    const updatedFiles = [...files, ...selectedFiles];
-    setFiles(updatedFiles);
-
     if (onChange) onChange(updatedFiles);
   };
 
-  // remove file from the file array
-  const removeFile = (index: any) => {
-    const fileToRemove = files[index];
+  // Removes the file from file array
+  const removeFile = (index: number) => {
     const updatedFiles = files.filter((_, i) => i !== index);
-
     setFiles(updatedFiles);
     setPreviewUrls((prevPreviews) => {
-      const { [fileToRemove.name]: _, ...rest } = prevPreviews;
+      const { [files[index].name]: _, ...rest } = prevPreviews;
       return rest;
     });
 
     if (onChange) onChange(updatedFiles);
   };
 
+  // *** Code to handle Drag and drop functionalities Starts here
+  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]]);
+  };
+  // Code to handle Drag and drop functionalities Ends here ***
+
   return (
     <div className="w-full max-w-md mx-auto">
       <div
-        className="flex flex-col items-center border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-gray-400 transition-colors"
+        ref={dropZoneRef}
+        className={`flex flex-col items-center border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
+          isDragging
+            ? "border-blue-500 bg-blue-50"
+            : "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" }}
@@ -78,20 +141,27 @@ export const FileUploader = ({
         <p className="mt-2 text-sm text-gray-500">
           Click to upload or drag and drop
         </p>
-        {multiple && (
-          <p className="text-xs text-gray-400">
-            Supports multiple file uploads
-          </p>
-        )}
+        <p className="text-xs text-gray-400">
+          {multiple
+            ? "Supports multiple file uploads"
+            : "Single file upload only"}
+        </p>
       </div>
       <input
         type="file"
         ref={fileInputRef}
         className="hidden"
-        onChange={handleFileChange}
+        onChange={(e) => handleFileChange(Array.from(e.target.files || []))}
         multiple={multiple}
+        accept={accept}
       />
 
+      {fileCountError && (
+        <span className="text-xs text-red-500">
+          Maximum file count is set to {fileCount}
+        </span>
+      )}
+
       {startsUpload && <AestheticProcessingAnimationWithStyles />}
 
       {files.length > 0 && (

package/source/components/uploader/uploaderService.ts

@@ -0,0 +1,66 @@
+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;
+}
+
+// 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;
+
+  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);
+
+    if (file.size > chunkSize) {
+      formData.append("chunkIndex", i.toString());
+      formData.append("totalChunks", totalChunks.toString());
+    } else {
+      formData.append("chunkIndex", "0");
+      formData.append("totalChunks", "1");
+    }
+
+    try {
+      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) {
+        console.log(
+          `File uploaded successfully. Document ID: ${data.documentId}`
+        );
+      } else {
+        console.log(`Chunk ${i + 1}/${totalChunks} uploaded`);
+      }
+    } catch (error) {
+      console.error("Error uploading file chunk:", error);
+    }
+  }
+}