Merge pull request #586 from canopas/imprv-file-validations

Impr: File validations in jobs application
canopas · Oct 1, 2024 · 0f368de · 0f368de
2 parents 5656b22 + 95f59bf
commit 0f368de
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/nuxt-frontend/pages/jobs/apply/[id].vue b/nuxt-frontend/pages/jobs/apply/[id].vue
@@ -210,15 +210,18 @@
                   accept="application/pdf,.doc,.docx"
                   @change="previewFiles"
                   required
-                  @input="showFileValidationError = fileUpload === ''"
                   aria-label="file upload"
                 />
-
                 <span
                   v-if="showFileValidationError"
                   class="mt-2.5 error text-red-600 text-[1rem]"
                   >Resume is required</span
                 >
+                <span
+                  v-if="showFileSizeValidationError"
+                  class="mt-2.5 error text-red-600 text-[1rem]"
+                  >File should have size less then 1MB</span
+                >
               </div>
             </div>
             <div class="flex items-center mt-8">
@@ -341,6 +344,7 @@ const references = [
   },
 ];
 
+const ONE_MB = 1048576;
 const event = ref("");
 const currentReferenceIndex = ref(-1);
 const fullName = ref("");
@@ -359,6 +363,7 @@ const showEmailValidationError = ref(false);
 const showPhoneValidationError = ref(false);
 const showValidPhoneError = ref(false);
 const showFileValidationError = ref(false);
+const showFileSizeValidationError = ref(false);
 const showErrorMessage = ref(false);
 const showLoader = ref(false);
 const isShowReferenceOption = ref(false);
@@ -417,6 +422,11 @@ async function setCareerDetails() {
   }
 }
 
+function showFileErrors() {
+  showFileValidationError.value = fileUpload.value === "";
+  showFileSizeValidationError.value = file.value.size > ONE_MB;
+}
+
 function showOptions(refer) {
   reference.value = refer.option;
   let names = ["Canopas Employee", "Job posting website", "Other"];
@@ -436,6 +446,7 @@ function previewFiles(event) {
       ? fileButtonName.value.substr(0, 20) + "..."
       : fileButtonName.value;
   }
+  showFileErrors();
 }
 function chooseFiles() {
   document.getElementById("fileUpload").click();
@@ -456,11 +467,12 @@ function validateForm() {
   showEmailValidationError.value = email.value.trim().length === 0;
   showPhoneValidationError.value = phoneNumber.value.trim().length === 0;
   showFileValidationError.value = fileButtonName.value === "Upload";
-
+  showFileSizeValidationError.value = file.value.size > ONE_MB;
   return (
     showNameValidationError.value ||
     showPhoneValidationError.value ||
     showFileValidationError.value ||
+    showFileSizeValidationError.value ||
     showEmailValidationError.value ||
     showValidPhoneError.value ||
     showValidEmailError.value