Add image adding feature with compression

assets/js/data.js

@@ -21,6 +21,10 @@ let condition = "";
 let fat = 0;
 let caloriesN = 0;
 
+let uploadImg = ['',' ', ' ']
+
+let UpImgNo = 0
+
 let Exdays = new Set();
 
 let fatCount = [0, 0, 0, 0, 0, 0, 0];

assets/js/domGet.js

@@ -10,6 +10,7 @@ const toastLiveExample = document.getElementById("noDate");
 const AlldayEx = document.getElementById("AlldayEx");
 const DayExChks = document.querySelectorAll("input[name='dayEx']");
 const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
+const fileInputs = document.querySelectorAll('input[type="file"]');
 
 const toastBody = document.getElementById("toastBody");
 const BMRH = document.getElementById("resultBMR");

assets/js/eventListeners.js

@@ -286,6 +286,54 @@ setOrderBtn.addEventListener("click", (e) => {
   }
 });
 
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onload = (event) => resolve(event.target.result);
+    reader.onerror = reject;
+  });
+}
+
+let FileIds = ['UpOneId', 'UpTwoId', 'UpThreeId']
+async function handleImageUpload(event, i) {
+  let label = document.getElementById (FileIds[i]);
+  label.innerHTML = (i+1) + ') Please wait, Compressing... <br> '
+  const imageFile = event.target.files[0];
+  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
+  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
+
+  const options = {
+    maxSizeMB: 0.6,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true,
+  }
+  try {
+    const compressedFile = await imageCompression(imageFile, options);
+    console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
+    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
+    blobToBase64(compressedFile)
+  .then(base64String => {
+    console.log("Base64 encoded image:", base64String);
+    uploadImg[i] = base64String;
+    // Use the base64String for further processing (e.g., display, send to server)
+  })
+
+  label.innerHTML = (i+1) + ') Ready to Generate PDF<br>'
+    console.log(uploadImg[i])
+  } catch (error) {
+    console.log(error);
+  }
+
+}
+
+fileInputs.forEach(ele  =>{
+  ele.addEventListener('change', (e) => {
+    handleImageUpload(e,UpImgNo);
+    UpImgNo++;
+  })
+  });
+
 DayExChks.forEach((i) => {
   i.addEventListener("click", (e) => {
     if (allCheckedEx) {

assets/js/firebase.js

@@ -1,3 +1,4 @@
+/*
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
 import { getStorage, ref, uploadBytes,getDownloadURL } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js";
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
@@ -67,20 +68,20 @@ pdfMake.createPdf(DataDef)
       }
     //link.href = "https://wa.me/91"+PhNo+"?text="+ ((((downloadURL).split(':').join('%3A')).split('/',).join('%2F')).split('?').join('%3F')).split('&').join('%26');
 
-/*uploadBytes(storageRef, data[0])
+uploadBytes(storageRef, data[0])
     .then((snapshot) => {
         console.log('Uploaded PDF blob to Firebase Storage!');
         console.log('Download URL:', snapshot.metadata.downloadURL);
     })
     .catch((error) => {
         console.error('Error uploading PDF blob:', error);
-    });*/
+    });
 });
-}
+}*/
  // Initialize the blob and name variables
-getPDFBtn.addEventListener("click",(e) => goPdf(e, 0));
+getPDFBtn.addEventListener("click",(e) => printPdf(e,0));
 
-getExBtn.addEventListener("click",(e) =>  goPdf(e,1));
+getExBtn.addEventListener("click",(e) =>  printPdf(e,1));
 
-getBothBtn.addEventListener("click",(e) =>  goPdf(e,2));
+getBothBtn.addEventListener("click",(e) =>  printPdf(e,2));
 

assets/js/printPdf.js

@@ -150,6 +150,32 @@ function printPdf(e, i) {
           ],
         ],
       },
+      {
+        margin: [20, 30, 0, 0],
+        columns: [
+          [
+            {
+              margin: [0, -10, 0, 0],
+              image:uploadImg[0],
+              width: 150,
+            },
+          ],
+          [
+            {
+              margin: [0, -10, 0, 0],
+              image: uploadImg[1],
+              width: 150,
+            },
+          ],
+          [
+            {
+              margin: [0, -10, 0, 0],
+              image: uploadImg[2],
+              width: 150,
+            },
+          ],
+        ],
+      },
     ],
   };
 
@@ -526,7 +552,7 @@ let nameO = `${nameval}-${PhNo}/` ;
 
   DataDef.content.push(remarks);
   DataDef.styles = style;
-  //pdfMake.createPdf(DataDef).download(nameO);
+  pdfMake.createPdf(DataDef).download(nameO);
   nameO+= '-Plan.pdf'
 return [DataDef,nameO, PhNo];
 //    console.log(blobO)

index.html

@@ -36,7 +36,15 @@ <h1>Client Information Form</h1>
           id="membership_id"
           name="membership_id"
           required
-        /><br /><br />
+        /><br><br>
+        <label for="image-upload">Image upload:</label><br /><br>
+        <label for="UpOne" id="UpOneId">Not uploaded</label><br>
+        <input type="file" id="UpOne" accept="image/*" ><br><br>
+        <label for="UpTwo" id="UpTwoId">Not uploaded</label><br>
+        <input type="file" id="UpTwo" accept="image/*"><br><br>
+        <label for="UpThree" id="UpThreeId">Not uploaded</label><br>
+        <input type="file" id="UpThree" accept="image/*"><br><br>
+        <br /><br />
         <h2>Goals</h2>
         <label for="goal">What are you looking for?</label><br />
         <select id="goal" name="goal" required>
@@ -1188,6 +1196,7 @@ <h2>Remarks</h2>
       src="assets/vendor/makePDF/vfs_fonts.js"
       defer
     ></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser-image-compression.js"></script>
     <script src="./assets/js/domGet.js" defer></script>
     <script src="./assets/js/base64.js" defer></script>
     <script src="./assets/js/data.js" defer></script>