From 957294f220faa519d149b6455a663b157fad350f Mon Sep 17 00:00:00 2001
From: "Alinson S. Xavier" <git@axavier.org>
Date: Fri, 16 May 2025 14:32:03 -0500
Subject: [PATCH] web: Accept gz files

---
 web/package-lock.json                         | 14 +++++++++++++
 web/package.json                              |  2 ++
 .../components/CaseBuilder/Header/Header.tsx  |  2 +-
 .../Common/Buttons/FileUploadElement.tsx      | 20 ++++++++++++++++---
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index e3b5b8a..5a66f8e 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -18,11 +18,13 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.126",
+        "@types/pako": "^2.0.3",
         "@types/papaparse": "^5.3.16",
         "@types/react": "^19.1.3",
         "@types/react-dom": "^19.1.3",
         "ajv": "^8.17.1",
         "eslint": "^8.57.1",
+        "pako": "^2.1.0",
         "papaparse": "^5.5.2",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -3969,6 +3971,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.3.tgz",
+      "integrity": "sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/papaparse": {
       "version": "5.3.16",
       "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.16.tgz",
@@ -12159,6 +12167,12 @@
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/papaparse": {
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.2.tgz",
diff --git a/web/package.json b/web/package.json
index 4bef5a2..1cd27c5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,11 +13,13 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.126",
+    "@types/pako": "^2.0.3",
     "@types/papaparse": "^5.3.16",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "ajv": "^8.17.1",
     "eslint": "^8.57.1",
+    "pako": "^2.1.0",
     "papaparse": "^5.5.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/web/src/components/CaseBuilder/Header/Header.tsx b/web/src/components/CaseBuilder/Header/Header.tsx
index e82209b..97982b3 100644
--- a/web/src/components/CaseBuilder/Header/Header.tsx
+++ b/web/src/components/CaseBuilder/Header/Header.tsx
@@ -36,7 +36,7 @@ function Header(props: HeaderProps) {
           <SiteHeaderButton title="Load" onClick={onLoad} />
           <SiteHeaderButton title="Save" onClick={props.onSave} />
         </div>
-        <FileUploadElement ref={fileElem} accept=".json" />
+        <FileUploadElement ref={fileElem} accept=".json,.json.gz" />
       </div>
     </div>
   );
diff --git a/web/src/components/Common/Buttons/FileUploadElement.tsx b/web/src/components/Common/Buttons/FileUploadElement.tsx
index 56d00e1..2f54797 100644
--- a/web/src/components/Common/Buttons/FileUploadElement.tsx
+++ b/web/src/components/Common/Buttons/FileUploadElement.tsx
@@ -4,6 +4,7 @@
  * Released under the modified BSD license. See COPYING.md for more details.
  */
 
+import pako from "pako";
 import React, { Component } from "react";
 
 class FileUploadElement extends Component<any> {
@@ -16,14 +17,27 @@ class FileUploadElement extends Component<any> {
   };
 
   onFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files![0];
+    const file = event.target.files![0]!;
+    let isCompressed = file.name.endsWith(".gz");
     if (file) {
       const reader = new FileReader();
       reader.onload = async (e) => {
-        this.callback(e.target?.result as string);
+        let content = e.target?.result;
+
+        if (isCompressed) {
+          const compressed = new Uint8Array(content as ArrayBuffer);
+          const decompressed = pako.inflate(compressed);
+          content = new TextDecoder().decode(decompressed);
+        }
+
+        this.callback(content as string);
         this.callback = () => {};
       };
-      reader.readAsText(file);
+      if (isCompressed) {
+        reader.readAsArrayBuffer(file);
+      } else {
+        reader.readAsText(file);
+      }
     }
     event.target.value = "";
   };