Add files via upload

Author: ReaperKai07

html/form.html

@@ -116,12 +116,12 @@ <h5 class="card-title">B. MAKLUMAT BAPA / PENJAGA</h5>
           <h5 class="card-title">C. Muat Naik Dokumen</h5>
           <div class="form-label">
             <label for="childSchool">Gambar Berukuran Passport</label>
-            <input type="file" class="form-control" aria-label="Image file upload" accept="image/png" required>
+            <input type="file" class="form-control" aria-label="Image file upload" accept="image/png" id="studImg" required>
             <div class="valid-feedback">Diterima</div><div class="invalid-feedback">Tidak Diterima</div><div class="error"></div>
           </div>
           <div class="form-label">
             <label for="childSchool">Transcript Terkini</label>
-            <input type="file" class="form-control" aria-label="PDF file upload" accept="application/pdf" required>
+            <input type="file" class="form-control" aria-label="PDF file upload" accept="application/pdf" id="studTranscript" required>
             <div class="valid-feedback">Diterima</div><div class="invalid-feedback">Tidak Diterima</div><div class="error"></div>
           </div>
         </div>

html/result.html

@@ -17,7 +17,7 @@
         <div class="row">
             <div class="col-md-8">
                 <div class="logo-uitm">
-                    <img src="../asstes/uitm-only.jpg" alt="" class="uitm">
+                    <img src="" alt="" class="uitm" id="studImg">
                     <h4>PEJABAT BENDAHARI</h4>
                     <h5>PERMOHONAN SKIM KHIDMAT PELAJAR</h5>
                     <p class="sila"><b>(Sila lampirkan salinan nombor kad pengenalan</b></p>
@@ -29,7 +29,7 @@ <h5>PERMOHONAN SKIM KHIDMAT PELAJAR</h5>
                     <p>PK.PBUiTM.PPK.(O).08/01</p>
                 </div>
                 <div class="gambar-pemohon">
-                    <img src="../assets/dev.jpeg" alt="" class="result-img"> <!-- user upload hamba, save as SKP.jpeg -->
+                    <img src="" alt="" class="result-img" id="displayImage"> <!-- user upload hamba, save as SKP.jpeg -->
                 </div>
             </div>
         </div>

js/form.js

@@ -13,6 +13,8 @@ const mJob = document.getElementById('mJob');
 const mIncome = document.getElementById('mIncome');
 const childSchool = document.getElementById('childSchool');
 const childWork = document.getElementById('childWork');
+const studTrans = document.getElementById('studTranscript');
+const studImg = document.getElementById('studImg');
 
 
 forms.addEventListener('submit', e => {
@@ -58,6 +60,8 @@ const validateInputs = () => {
   const mIncomeValue = mIncome.value.trim();
   const childSchoolValue = childSchool.value.trim();
   const childWorkValue = childWork.value.trim();
+  const studImgValue = studImg.value;
+  const studTransValue = studTrans.value;
 
 
   if (studNameValue === '') {
@@ -166,10 +170,24 @@ const validateInputs = () => {
     counter++;
   }
 
+  if (studImgValue === '') {
+    setError(studImg, "Sila muat naik gambar.");
+  } else {
+    setSuccess(studImg);
+    counter++;
+  }
+
+  if (studTransValue === '') {
+    setError(studTrans, "Sila muat naik transkrip.");
+  } else {
+    setSuccess(studTrans);
+    counter++;
+  }
+
   console.log(counter)
 
-  if (counter === 15) {
-    window.location.href = "result.html";
+  if (counter === 17) {
+    // window.location.href = "result.html";
 
     localStorage.setItem('studName', studNameValue);
     localStorage.setItem('studBirth', studBirthValue);
@@ -187,6 +205,24 @@ const validateInputs = () => {
     localStorage.setItem('childSchool', childSchoolValue);
     localStorage.setItem('childWork', childWorkValue);
 
+    const file = studImg.files[0];
+
+
+    if (file) {
+      const reader = new FileReader();
+
+      reader.onload = function(event) {
+        const base64String = event.target.result;
+  
+        // Store the Base64 string in local storage
+        localStorage.setItem('uploadedImage', base64String);
+      };
+  
+      reader.readAsDataURL(file);
+    } else {
+      alert("No image uploaded.")
+    }
+
     window.location.href = "result.html";
 
   } else {

js/result.js

@@ -38,6 +38,21 @@ const p_values = [
 
 const blankElements = document.querySelectorAll('.blank');
 
+const uploadedImage = document.getElementById('uploadedImage');
+
+const base64String = localStorage.getItem('uploadedImage');
+
+const displayImage = document.getElementById('displayImage');
+
+console.log(base64String)
+
+if (base64String) {
+  displayImage.src = base64String;
+} else {
+  // Handle the case when the Base64 string is not available
+  displayImage.alt = "No image found";
+}
+
 localStorageKeys.forEach((key, index) => {
   const value = localStorage.getItem(key);