Added Support for File Dropping and different qualities for different images

src/app/(tools)/size-compressor/compressor-tool.tsx

@@ -1,12 +1,16 @@
 "use client";
+import { FileDropzone } from "@/components/shared/file-dropzone";
+import { UploadBox } from "@/components/shared/upload-box";
 import { useState, type ChangeEvent, useEffect } from "react";
 
 export default function ImageSizeCompressor() {
   const [images, setImages] = useState<File[]>([]);
-  const [quality, setQuality] = useState(0.8);
+  const [globalQuality, setGlobalQuality] = useState<number | undefined>(0.8);
+  const [quality, setQuality] = useState<number[]>([0.8]);
   const [compressedPreview, setCompressedPreview] = useState<string | null>(
     null,
   );
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [originalSize, setOriginalSize] = useState<string>("");
   const [compressedSize, setCompressedSize] = useState<string>("");
   const [isCompressing, setIsCompressing] = useState(false);
@@ -19,8 +23,14 @@ export default function ImageSizeCompressor() {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
   }
 
-  async function compressImage(image: File, quality: number): Promise<File> {
+  async function compressImage(
+    image: File,
+    quality: number | undefined,
+  ): Promise<File> {
     return new Promise((resolve, reject) => {
+      if (quality === undefined) {
+        return reject(new Error("Quaility can't be undefined"));
+      }
       const img = new Image();
       const imageUrl = URL.createObjectURL(image);
 
@@ -73,18 +83,31 @@ export default function ImageSizeCompressor() {
     if (!e.target.files) return;
 
     const newFiles = Array.from(e.target.files);
+    const newQualities = new Array<number>(newFiles.length).fill(0.8);
+
     setImages((prev) => [...prev, ...newFiles]);
+    setQuality((prev) => [...prev, ...newQualities]);
+  }
+
+  function handleImageDrop(files: FileList) {
+    const newQualities = new Array<number>(files.length).fill(0.8);
+
+    setImages((prev) => [...prev, ...files]);
+    setQuality((prev) => [...prev, ...newQualities]);
   }
 
   useEffect(() => {
-    if (images[0] === undefined) return;
-    setOriginalSize(formatFileSize(images[0].size));
+    if (images[currentIndex] === undefined) return;
+    setOriginalSize(formatFileSize(images[currentIndex].size));
 
     async function generateCompressedPreview() {
-      if (images[0] === undefined) return;
+      if (images[currentIndex] === undefined) return;
       setIsCompressing(true);
       try {
-        const compressedFile = await compressImage(images[0], quality);
+        const compressedFile = await compressImage(
+          images[currentIndex],
+          globalQuality ?? quality[currentIndex],
+        );
         setCompressedPreview(URL.createObjectURL(compressedFile));
         setCompressedSize(formatFileSize(compressedFile.size));
       } finally {
@@ -99,7 +122,7 @@ export default function ImageSizeCompressor() {
     return () => {
       clearTimeout(debounceTimeout);
     };
-  }, [images, quality]);
+  }, [images, quality, currentIndex, globalQuality]);
 
   function removeImage(index: number) {
     setImages((prev) => prev.filter((_, i) => i !== index));
@@ -114,7 +137,9 @@ export default function ImageSizeCompressor() {
     try {
       setIsCompressing(true);
       const compressedFiles = await Promise.all(
-        images.map((image) => compressImage(image, quality)),
+        images.map((image, i) =>
+          compressImage(image, globalQuality ?? quality[i]),
+        ),
       );
 
       compressedFiles.forEach((file, index) => {
@@ -132,7 +157,15 @@ export default function ImageSizeCompressor() {
   }
 
   function onChangeQuality(e: ChangeEvent<HTMLInputElement>) {
-    setQuality(parseFloat(e.target.value));
+    console.log(`globalQuality -> ${globalQuality}`);
+    console.log(`quality -> ${quality[currentIndex]}`);
+    if (globalQuality === undefined) {
+      const newQuantity = [...quality];
+      newQuantity[currentIndex] = parseFloat(e.target.value);
+      setQuality(newQuantity);
+    } else {
+      setGlobalQuality(parseFloat(e.target.value));
+    }
   }
 
   function onCancel() {
@@ -144,21 +177,26 @@ export default function ImageSizeCompressor() {
 
   if (images.length === 0) {
     return (
-      <div className="flex flex-col gap-4 p-4">
-        <p className="text-center">Compress your images to reduce file size.</p>
-        <div className="flex justify-center">
-          <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
-            <span>Upload Images</span>
-            <input
-              type="file"
-              accept="image/*"
-              multiple
-              className="hidden"
-              onChange={handleImageUpload}
-            />
-          </label>
-        </div>
-      </div>
+      <FileDropzone
+        acceptedFileTypes={[
+          "image/*",
+          ".jpg",
+          ".jpeg",
+          ".png",
+          ".webp",
+          ".svg",
+        ]}
+        dropText="Drop image file"
+        setCurrentFile={handleImageDrop}
+      >
+        <UploadBox
+          title="Compress your images to reduce file size."
+          description="Upload Images"
+          allow_multiple={true}
+          accept="image/*"
+          onChange={handleImageUpload}
+        />
+      </FileDropzone>
     );
   }
 
@@ -171,6 +209,10 @@ export default function ImageSizeCompressor() {
               src={URL.createObjectURL(image)}
               alt={`Preview ${index + 1}`}
               className="h-32 w-32 rounded-lg object-cover"
+              role="button"
+              onClick={() => {
+                setCurrentIndex(index);
+              }}
             />
             <button
               onClick={() => removeImage(index)}
@@ -182,26 +224,69 @@ export default function ImageSizeCompressor() {
         ))}
       </div>
 
-      <div className="flex w-full max-w-md flex-col gap-2">
-        <label className="text-sm">Quality: {Math.round(quality * 100)}%</label>
-        <input
-          type="range"
-          min="0.1"
-          max="1"
-          step="0.1"
-          value={quality}
-          onChange={onChangeQuality}
-          className="w-full"
-          disabled={isCompressing}
-        />
+      {/* {quality[currentIndex] !== undefined ? (
+        <div className="flex w-full max-w-md flex-col gap-2">
+          <label className="text-sm">
+            Quality: {Math.round(quality[currentIndex] * 100)}%
+          </label>
+          <input
+            type="range"
+            min="0.1"
+            max="1"
+            step="0.1"
+            value={quality[currentIndex]}
+            onChange={onChangeQuality}
+            className="w-full"
+            disabled={isCompressing}
+          />
+        </div>
+      ) : (
+        <p>Strange! There is no file selected</p>
+      )} */}
+      <div className="flex w-full items-start gap-4">
+        <div className="flex w-full max-w-md flex-col gap-2">
+          <label className="text-sm">
+            Quality:{" "}
+            {Math.round((globalQuality ?? quality[currentIndex] ?? 0.8) * 100)}%
+          </label>
+          <input
+            type="range"
+            min="0.1"
+            max="1"
+            step="0.1"
+            value={globalQuality ?? quality[currentIndex] ?? 0.8}
+            onChange={onChangeQuality}
+            className="w-full"
+            disabled={isCompressing}
+          />
+        </div>
+        <label className="inline-flex cursor-pointer items-center">
+          <input
+            type="checkbox"
+            checked={globalQuality ? true : false}
+            className="peer sr-only"
+            onChange={() => {
+              if (globalQuality === undefined) setGlobalQuality(0.8);
+              else setGlobalQuality(undefined);
+            }}
+          />
+          <div className="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></div>
+          <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+            Global Quality
+          </span>
+        </label>
       </div>
 
       {images.length > 0 && (
         <div className="flex gap-8">
           <div className="flex flex-col items-center gap-2">
             <span className="text-sm font-medium">Original</span>
             <img
-              src={images[0] ? URL.createObjectURL(images[0]) : ""}
+              src={
+                images[currentIndex]
+                  ? URL.createObjectURL(images[currentIndex])
+                  : ""
+              }
               alt="Original preview"
               className="h-64 w-64 rounded-lg object-cover"
             />
@@ -213,7 +298,9 @@ export default function ImageSizeCompressor() {
               <img
                 src={
                   compressedPreview ??
-                  (images[0] ? URL.createObjectURL(images[0]) : "")
+                  (images[currentIndex]
+                    ? URL.createObjectURL(images[currentIndex])
+                    : "")
                 }
                 alt="Compressed preview"
                 className="h-64 w-64 rounded-lg object-cover"

src/components/shared/file-dropzone.tsx

@@ -4,7 +4,7 @@ interface FileDropzoneProps {
   children: React.ReactNode;
   acceptedFileTypes: string[];
   dropText: string;
-  setCurrentFile: (file: File) => void;
+  setCurrentFile: (files: FileList) => void;
 }
 
 export function FileDropzone({
@@ -50,25 +50,25 @@ export function FileDropzone({
 
       const files = e.dataTransfer?.files;
       if (files && files.length > 0) {
-        const droppedFile = files[0];
+        for (const droppedFile of files) {
+          if (!droppedFile) {
+            alert("How did you do a drop with no files???");
+            throw new Error("No files dropped");
+          }
 
-        if (!droppedFile) {
-          alert("How did you do a drop with no files???");
-          throw new Error("No files dropped");
-        }
-
-        if (
-          !acceptedFileTypes.includes(droppedFile.type) &&
-          !acceptedFileTypes.some((type) =>
-            droppedFile.name.toLowerCase().endsWith(type.replace("*", "")),
-          )
-        ) {
-          alert("Invalid file type. Please upload a supported file type.");
-          throw new Error("Invalid file");
+          if (
+            !acceptedFileTypes.includes(droppedFile.type) &&
+            !acceptedFileTypes.some((type) =>
+              droppedFile.name.toLowerCase().endsWith(type.replace("*", "")),
+            )
+          ) {
+            alert("Invalid file type. Please upload a supported file type.");
+            throw new Error("Invalid file");
+          }
         }
 
         // Happy path
-        setCurrentFile(droppedFile);
+        setCurrentFile(files);
       }
     },
     [acceptedFileTypes, setCurrentFile],

src/components/shared/upload-box.tsx

@@ -5,6 +5,7 @@ interface UploadBoxProps {
   subtitle?: string;
   description: string;
   accept: string;
+  allow_multiple?: boolean;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -13,6 +14,7 @@ export function UploadBox({
   subtitle,
   description,
   accept,
+  allow_multiple,
   onChange,
 }: UploadBoxProps) {
   return (
@@ -47,6 +49,7 @@ export function UploadBox({
             type="file"
             onChange={onChange}
             accept={accept}
+            multiple={allow_multiple}
             className="hidden"
           />
         </label>

src/hooks/use-clipboard-paste.ts

@@ -3,7 +3,7 @@
 import { useEffect, useCallback } from "react";
 
 interface UseClipboardPasteProps {
-  onPaste: (file: File) => void;
+  onPaste: (files: FileList) => void;
   acceptedFileTypes: string[];
 }
 
@@ -15,8 +15,9 @@ export function useClipboardPaste({
     async (event: ClipboardEvent) => {
       const items = event.clipboardData?.items;
       if (!items) return;
-
-      for (const item of Array.from(items)) {
+      const items_array = Array.from(items);
+      const acceptedFilesItems = new ClipboardEvent("").clipboardData;
+      for (const item of items_array) {
         if (item.type.startsWith("image/")) {
           const file = item.getAsFile();
           if (!file) continue;
@@ -30,11 +31,13 @@ export function useClipboardPaste({
 
           if (isAcceptedType) {
             event.preventDefault();
-            onPaste(file);
-            break;
+            acceptedFilesItems?.items.add(file);
           }
         }
       }
+      if (acceptedFilesItems?.items) {
+        onPaste(acceptedFilesItems.files);
+      }
     },
     [onPaste, acceptedFileTypes],
   );