sending the image with MIME type in the ArrayBuffer

package.json

@@ -25,12 +25,12 @@
     "@emotion/styled": "11.11.0",
     "@tanstack/react-query": "4.29.19",
     "@tanstack/react-query-devtools": "4.29.19",
-    "browser-image-compression": "2.0.2",
     "chakra-react-select": "4.6.0",
     "firebase": "10.1.0",
     "framer-motion": "10.12.17",
     "million": "2.5.10",
     "nanoid": "4.0.2",
+    "pako": "2.1.0",
     "react": "18.2.0",
     "react-cropper": "2.3.3",
     "react-dom": "18.2.0",
@@ -49,6 +49,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@types/cypress": "1.1.3",
+    "@types/pako": "2.0.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@typescript-eslint/eslint-plugin": "6.0.0",

src/components/forms/NewBook.tsx

@@ -17,7 +17,7 @@ import {
   Skeleton,
   FormErrorMessage,
 } from '@chakra-ui/react';
-// import compressImage from 'browser-image-compression';
+import pako from 'pako';
 import { useForm } from 'react-hook-form';
 import { Select } from 'chakra-react-select';
 import 'cropperjs/dist/cropper.css';
@@ -177,7 +177,13 @@ export function FormNewBook() {
             const arrayBuffer = reader.result as ArrayBuffer;
             const uint8Array = new Uint8Array(arrayBuffer);
             const byteArray = [...uint8Array];
-
+            // const compressedArrayBuffer = pako.deflate(
+            //   new Uint8Array(arrayBuffer),
+            // );
+            // const byteArray = [...new Uint8Array(compressedArrayBuffer)];
+            // console.log(arrayBuffer);
+            // console.log(uint8Array);
+            // console.log(byteArray);
             setBooks((prevBooks) => ({
               ...prevBooks,
               image: {
@@ -190,7 +196,7 @@ export function FormNewBook() {
 
           onClose();
         }
-      });
+      }, 'image/webp');
     }
   }