can now download as zip, file name not correct yet

package.json

@@ -54,5 +54,8 @@
     "*.{js,css,json,md,ts,tsx}": "prettier --write",
     "*.{c,h,cpp,hpp}": "clang-format -i",
     "*.rs": "rustfmt"
+  },
+  "dependencies": {
+    "fflate": "^0.8.2"
   }
 }

src/client/lazy-app/Compress/index.tsx

@@ -33,6 +33,7 @@ import { resize } from 'features/processors/resize/client';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 import { drawableToImageData } from '../util/canvas';
 import Select from './Options/Select';
+import { zip } from 'fflate';
 
 export type OutputType = EncoderType | 'identity';
 
@@ -580,17 +581,6 @@ export default class Compress extends Component<Props, State> {
     }));
   };
 
-  private triggerDownload(content: Blob, fileName: string) {
-    const url = URL.createObjectURL(content);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }
-
   /**
    * Debounce the heavy lifting of updateImage.
    * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
@@ -997,6 +987,7 @@ export default class Compress extends Component<Props, State> {
       const thisSide = sideIndex;
       const theOtherSide = thisSide ^ 1;
       const currentMainFile = this.sourceFile;
+      const files: File[] = [];
 
       try {
         for (const file of this.files) {
@@ -1011,13 +1002,12 @@ export default class Compress extends Component<Props, State> {
           // Force update so that we can read the latest 'state.sides'
           this.forceUpdate();
 
-          const downloadUrl = this.state.sides[thisSide].downloadUrl;
-
-          if (downloadUrl) {
-            this.downloadFromUrl(downloadUrl);
+          const side = this.state.sides[thisSide];
+          if (side.file) {
+            files.push(side.file);
+          } else {
+            console.warn('File not found');
           }
-
-          await new Promise((resolve) => setTimeout(resolve, 300));
         }
 
         // Restore image.
@@ -1027,10 +1017,39 @@ export default class Compress extends Component<Props, State> {
           resetSize: false,
         });
 
-        alert('All files have been saved successfully!');
+        // creates archive object
+        const archive: Record<string, Uint8Array> = {};
+        await Promise.all(
+          files.map(async (f) => {
+            const arrayBuffer = await f.arrayBuffer();
+            archive[f.name] = new Uint8Array(arrayBuffer);
+          }),
+        );
+
+        // zip multiple
+        const data = await new Promise<Uint8Array | null>((resolve) => {
+          zip(archive, (err, data) => {
+            if (err) {
+              this.props.showSnack(
+                `Something went wrong while exporting files. Please try again.`,
+              );
+              console.error('Export error: ', err);
+              resolve(null);
+            } else resolve(data);
+          });
+        });
+
+        if (!data) return;
+
+        const objectUrl = URL.createObjectURL(new Blob([data]));
+        this.downloadFromUrl(objectUrl);
+
+        this.props.showSnack('All files saved');
       } catch (err) {
         console.error('Error saving files:', err);
-        alert('There was an error saving the files. Please try again.');
+        this.props.showSnack(
+          'There was an error saving the files. Please try again.',
+        );
       }
     };
   }