error handling

Author: Lenni009

package-lock.json

@@ -14,7 +14,7 @@
     "jszip": "^3.10.1",
     "pinia": "^2.1.6",
     "sass": "^1.64.1",
-    "simple-image-compressor": "^1.2.1",
+    "simple-image-compressor": "^1.4.0",
     "vue": "^3.4.19",
     "vue-i18n": "^9.8.0"
   },

package.json

@@ -29,7 +29,7 @@ async function editFileObj(fileObj: FileObj) {
     fileObj.file = compressedFile;
     fileObj.isCompressed = true;
   } catch {
-    fileObj.isTooLarge = true;
+    fileObj.isError = true;
   }
 }
 
@@ -38,13 +38,18 @@ async function compressFiles() {
 
   const uncompressedFiles = files.value.filter((fileObj: FileObj) => !fileObj.isCompressed);
 
+  // option 1 (no errors, slower)
   const paginatedFileArray = paginate(uncompressedFiles, availableThreads);
 
   for (const subArray of paginatedFileArray) {
     const promises = subArray.map(editFileObj);
     await Promise.all(promises);
   }
 
+  // option 2 (errors, faster -> better option once the errors are fixed in Firefox)
+  // const promises = uncompressedFiles.map(editFileObj);
+  // await Promise.all(promises);
+
   isCompressing.value = false;
 
   URL.revokeObjectURL(zipData.value);

src/App.vue

@@ -57,10 +57,10 @@ onUnmounted(() => URL.revokeObjectURL(objectUrl.value));
           <span class="field-title">{{ t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
         </div>
         <div
-          v-if="fileObj.isTooLarge"
+          v-if="fileObj.isError"
           class="error"
         >
-          <span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.filetoolarge') }}
+          <span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.hasFailed') }}
         </div>
       </div>
     </div>

src/components/FileItem.vue

@@ -32,7 +32,7 @@ function addFiles(uploadedFiles: FileList) {
     const fileObj: FileObj = {
       id: id++,
       isCompressed: false,
-      isTooLarge: false,
+      isError: false,
       file,
     };
     files.value.push(fileObj);

src/components/FileUpload.vue

@@ -7,7 +7,7 @@ export default {
   compressedsize: 'Komprimierte Größe:',
   download: 'Herunterladen',
   error: 'Fehler:',
-  filetoolarge: 'Datei ist zu groß!',
+  hasFailed: 'Datei konnte nicht komprimiert werden',
   header: 'Bild Kompressor',
   subtitle: 'Komprimiert Bilder auf < 10MB',
   buttonwiki: 'NMS Wiki Bild Upload öffnen',

src/i18n/de-DE/translation.ts

@@ -7,7 +7,7 @@ export default {
   compressedsize: 'Compressed Size:',
   download: 'Download',
   error: 'Error:',
-  filetoolarge: 'File is too large!',
+  hasFailed: "File couldn't be compressed",
   header: 'Image Compressor',
   subtitle: 'Compresses images to < 10MB',
   buttonwiki: 'Open NMS Wiki Image Upload',

src/i18n/en-EN/translation.ts

@@ -7,7 +7,7 @@ export default {
   compressedsize: 'Tamaño comprimido:',
   download: 'Descargar',
   error: 'Error:',
-  filetoolarge: '¡El archivo es demasiado grande!',
+  hasFailed: '¡El archivo es demasiado grande!',
   header: 'Compresor de imágenes',
   subtitle: 'Comprime imágenes a <10 MB',
   buttonwiki: 'Abrir página carga imágenes Wiki NMS',

src/i18n/es-ES/translation.ts

@@ -7,7 +7,7 @@ export default {
   compressedsize: 'Tamaina komprimatuta:',
   download: 'Deskargatu',
   error: 'Akats:',
-  filetoolarge: 'Fitxategia handiegia da!',
+  hasFailed: 'Fitxategia handiegia da!',
   header: 'Irudi-konpresorea',
   subtitle: 'Konprimitu irudiak < 10 MBra',
   buttonwiki: 'Ireki NMS Wiki-ko argazkiak igotzeko orria',

src/i18n/eu-EU/translation.ts

@@ -1,6 +1,6 @@
 export interface FileObj {
   id: number;
   isCompressed: boolean;
-  isTooLarge: boolean;
+  isError: boolean;
   file: File;
 }