add error message if file is too large

Author: Lenni009

.eslintignore

@@ -18,11 +18,15 @@ const isZipCompressing = ref(false);
 const anyUncompressed = computed(() => files.value.some((file) => !file.isCompressed));
 
 async function editFileObj(fileObj: FileObj) {
-  const compressedFile = await useImageCompression(fileObj.file);
-  const item = files.value.find((item) => item.id === fileObj.id);
-  if (!item) return;
-  item.file = compressedFile;
-  item.isCompressed = true;
+  try {
+    const compressedFile = await useImageCompression(fileObj.file);
+    const item = files.value.find((item) => item.id === fileObj.id);
+    if (!item) return;
+    item.file = compressedFile;
+    item.isCompressed = true;
+  } catch {
+    fileObj.isTooLarge = true;
+  }
 }
 
 async function compressFiles() {

.eslintrc.js

@@ -41,8 +41,12 @@ const computeFileSize = (size: number) =>
     <div>
       <div><span class="field-title">Name:</span> {{ fileObj.file.name }}</div>
       <div><span class="field-title">Original Size:</span> {{ computeFileSize(orgSize) }}MB</div>
-      <div v-if="compSize">
-        <span class="field-title">Compressed Size:</span> {{ computeFileSize(compSize) }}MB
+      <div v-if="compSize"><span class="field-title">Compressed Size:</span> {{ computeFileSize(compSize) }}MB</div>
+      <div
+        v-if="fileObj.isTooLarge"
+        class="error"
+      >
+        <span class="field-title">Error:</span> File is too large!
       </div>
     </div>
     <a
@@ -78,6 +82,10 @@ const computeFileSize = (size: number) =>
     font-weight: bold;
   }
 
+  .error {
+    color: red;
+  }
+
   .delete-button {
     width: auto;
     margin: 0;

src/App.vue

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

src/components/FileItem.vue

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