refactor: Replace Gzip compression with LZ4 in file handling

On MCU we have stricter resource requirements and having
deflate to work is often difficult and inefficient.

Signed-off-by: Omar <omar.brbutovic@secomind.com>

Author: OmarBrbutovic

frontend/package-lock.json

@@ -23,6 +23,7 @@
     "@types/js-cookie": "^3.0.6",
     "@types/leaflet": "^1.9.12",
     "@types/lodash": "^4.17.6",
+    "@types/lz4js": "^0.2.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^18.2.1",
@@ -34,13 +35,13 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
-    "fflate": "^0.8.2",
     "graphql": "^16.9.0",
     "history": "^5.1.0",
     "js-cookie": "^3.0.5",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "lucide-react": "^0.577.0",
+    "lz4js": "^0.2.0",
     "react": "^18.3.1",
     "react-apexcharts": "^2.1.0",
     "react-bootstrap": "^2.10.4",

frontend/package.json

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { gzip } from "fflate";
+import { compress } from "lz4js";
 
 const BLOCK_SIZE = 512;
 
@@ -112,15 +112,6 @@ const createTarArchive = async (files: File[]): Promise<Uint8Array> => {
     const nameBytes = encoder.encode(fileName);
     header.set(nameBytes.slice(0, 100), 0);
 
-    // File mode (offset 100, 8 bytes) - 0000644
-    header.set(encoder.encode("0000644\0"), 100);
-
-    // Owner ID (offset 108, 8 bytes) - 0000000
-    header.set(encoder.encode("0000000\0"), 108);
-
-    // Group ID (offset 116, 8 bytes) - 0000000
-    header.set(encoder.encode("0000000\0"), 116);
-
     // File size in octal (offset 124, 12 bytes)
     const sizeOctal = fileData.length.toString(8).padStart(11, "0");
     header.set(encoder.encode(sizeOctal + "\0"), 124);
@@ -176,18 +167,18 @@ const createTarArchive = async (files: File[]): Promise<Uint8Array> => {
   return tarData;
 };
 
-// Creates a tar.gz archive from multiple files.
+// Creates an LZ4 compressed tar archive from multiple files.
 // Returns a Blob of the compressed archive.
 const createTarGzArchive = async (files: File[]): Promise<Blob> => {
   const tarData = await createTarArchive(files);
-  const gzippedData = await new Promise<Uint8Array>((resolve, reject) => {
-    gzip(tarData, (err, data) => {
-      if (err) reject(err);
-      else resolve(data);
-    });
+
+  // Run compression on a later tick so callers can await it asynchronously.
+  const lz4Data = await new Promise<Uint8Array>((resolve) => {
+    setTimeout(() => resolve(compress(tarData)), 0);
   });
-  return new Blob([gzippedData.buffer as ArrayBuffer], {
-    type: "application/gzip",
+
+  return new Blob([lz4Data.buffer as ArrayBuffer], {
+    type: "application/x-lz4",
   });
 };