compressImage

join.js

@@ -4,15 +4,64 @@
 
 const API_URL = `/api/join`;
 
-const form       = document.getElementById('driverForm');
+const form = document.getElementById("driverForm");
-const btn        = document.getElementById('submitBtn');
+const btn = document.getElementById("submitBtn");
-const photoInput = document.getElementById('photoInput');
+const photoInput = document.getElementById("photoInput");
+
+function compressImage(file, maxWidth = 1280, quality = 0.7) {
+  return new Promise((resolve) => {
+    if (file.size <= 1024 * 1024) {
+      return resolve(file);
+    }
+
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+
+      let width = img.width;
+      let height = img.height;
+
+      if (width > maxWidth) {
+        height = Math.round((height * maxWidth) / width);
+        width = maxWidth;
+      }
+
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0, width, height);
+
+      canvas.toBlob(
+        (blob) => {
+          const compressed = new File([blob], file.name, {
+            type: "image/jpeg",
+            lastModified: Date.now(),
+          });
+          resolve(compressed);
+        },
+        "image/jpeg",
+        quality,
+      );
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      resolve(file);
+    };
+
+    img.src = url;
+  });
+}
 
 // --- عرض معاينة الصورة الشخصية عند اختيارها ---
-photoInput.addEventListener('change', () => {
+photoInput.addEventListener("change", () => {
-    const preview = document.getElementById('fileNamePreview');
+  const preview = document.getElementById("fileNamePreview");
-    const previewContainer = document.getElementById('imagePreviewContainer');
+  const previewContainer = document.getElementById("imagePreviewContainer");
-    const imagePreview = document.getElementById('imagePreview');
+  const imagePreview = document.getElementById("imagePreview");
 
   const file = photoInput.files[0];
   if (file) {
@@ -20,63 +69,72 @@ photoInput.addEventListener('change', () => {
     const reader = new FileReader();
     reader.onload = (e) => {
       imagePreview.src = e.target.result;
-            previewContainer.classList.remove('hidden');
+      previewContainer.classList.remove("hidden");
     };
     reader.readAsDataURL(file);
   } else {
-        preview.innerText = '';
+    preview.innerText = "";
-        previewContainer.classList.add('hidden');
+    previewContainer.classList.add("hidden");
   }
 });
 
 // --- إرسال النموذج ---
-form.addEventListener('submit', async (e) => {
+form.addEventListener("submit", async (e) => {
   e.preventDefault();
   btn.disabled = true;
-    btn.innerText = 'جاري إرسال طلبك...';
+  btn.innerText = "جاري إرسال طلبك...";
 
   const formData = new FormData(form);
   const photoFile = photoInput.files[0];
-    const idFrontFile = document.getElementById('idFrontInput').files[0];
+  const idFrontFile = document.getElementById("idFrontInput").files[0];
-    const idBackFile  = document.getElementById('idBackInput').files[0];
+  const idBackFile = document.getElementById("idBackInput").files[0];
 
   const message =
     `🚀 *طلب انضمام جديد (طلباتك بلس)* \n\n` +
-        `👤 *الاسم:* ${formData.get('name')}\n` +
+    `👤 *الاسم:* ${formData.get("name")}\n` +
-        `📱 *الجوال:* ${formData.get('phone')}\n` +
+    `📱 *الجوال:* ${formData.get("phone")}\n` +
-        `🎂 *العمر:* ${formData.get('age')}\n` +
+    `🎂 *العمر:* ${formData.get("age")}\n` +
-        `🆔 *الرقم الوطني:* ${formData.get('nationalId')}\n` +
+    `🆔 *الرقم الوطني:* ${formData.get("nationalId")}\n` +
-        `📍 *العنوان:* ${formData.get('address')}\n` +
+    `📍 *العنوان:* ${formData.get("address")}\n` +
-        `🛵 *نوع المركبة:* ${formData.get('vehicleType')}\n` +
+    `🛵 *نوع المركبة:* ${formData.get("vehicleType")}\n` +
-        `🔢 *هل منمرة:* ${formData.get('isNumbered')}\n` +
+    `🔢 *هل منمرة:* ${formData.get("isNumbered")}\n` +
-        `📄 *رقم اللوحة:* ${formData.get('plateNumber') || 'لا يوجد'}\n` +
+    `📄 *رقم اللوحة:* ${formData.get("plateNumber") || "لا يوجد"}\n` +
-        `💡 *عمل سابقاً في التوصيل:* ${formData.get('previousExperience')}\n` +
+    `💡 *عمل سابقاً في التوصيل:* ${formData.get("previousExperience")}\n` +
-        `🗺️ *خبرة بمناطق حلب:* ${formData.get('aleppKnowledge')}\n\n` +
+    `🗺️ *خبرة بمناطق حلب:* ${formData.get("aleppKnowledge")}\n\n` +
     `✅ *موافق على الشروط والتأمين*`;
 
   try {
+    const [compressedPhoto, compressedFront, compressedBack] =
+      await Promise.all([
+        compressImage(photoFile),
+        compressImage(idFrontFile),
+        compressImage(idBackFile),
+      ]);
+
     const backendFormData = new FormData();
-        backendFormData.append('photo',   photoFile);
+    backendFormData.append("photo", compressedPhoto);
-        backendFormData.append('idFront', idFrontFile);
+    backendFormData.append("idFront", compressedFront);
-        backendFormData.append('idBack',  idBackFile);
+    backendFormData.append("idBack", compressedBack);
-        backendFormData.append('message', message);
+    backendFormData.append("message", message);
 
     const response = await fetch(API_URL, {
-            method: 'POST',
+      method: "POST",
-            body: backendFormData
+      body: backendFormData,
     });
 
     const result = await response.json();
 
     if (result.ok) {
-            window.location.href = 'success.html';
+      window.location.href = "success.html";
     } else {
-            alert('حدث خطأ في الإرسال: ' + (result.description || 'فشل إرسال الطلب.'));
+      alert(
+        "حدث خطأ في الإرسال: " + (result.description || "فشل إرسال الطلب."),
+      );
     }
   } catch (error) {
-        alert('فشل الاتصال بالخادم.');
+    alert("فشل الاتصال بالخادم.");
   } finally {
     btn.disabled = false;
-        btn.innerText = 'إرسال طلب الانضمام';
+    btn.innerText = "إرسال طلب الانضمام";
   }
 });