Dropzone

app/assets/js/custom.js

@@ -199,7 +199,20 @@ function ajax_request(options) {
     }
 
     options.data = { json: JSON.stringify(payloadJson) };
+
+    // IF formData exist, we pass as $_POST [not json]
+    if (options.formData instanceof FormData) {
+      // THE BYPASS: If formData exists, move all text data into it
+      Object.entries(payloadJson).forEach(([key, value]) => {
+        options.formData.append(key, value);
+      });
+      // Override options.data with the full FormData object
+      options.data = options.formData;
     }
+  }
+
+  // --- START MODIFIED $.AJAX BLOCK ---
+  let isSendingFiles = (options.data instanceof FormData);
 
   if (options.debugMode) {
     console.log("REQUEST DATA:", options.data);
@@ -219,7 +232,10 @@ function ajax_request(options) {
     type: options.type || "POST",
     url: options.url,
     data: options.data,
-    dataType: "json"
+    dataType: "json",
+    // These two settings are only triggered when sending files
+    processData: isSendingFiles ? false : true,
+    contentType: isSendingFiles ? false : "application/x-www-form-urlencoded; charset=UTF-8"
   })
   .then(function (res) {
 

app/assets/utils/db_auth.php

@@ -58,14 +58,19 @@ if(!empty($_SESSION["login_company_id"])){
 // set up ANSWER
 $answer = array("success"=>0, "message"=>"");
 
-if(!isset($_POST['json']))
-{
-    $answer["message"] = "No data receive!";
+if (isset($_POST['json'])) {
+// Old Method: Data is wrapped in a JSON string
+$data = json_decode($_POST['json'], true);
+} else if (isset($_POST['otp'])) { 
+    // New Method: Data is sent directly (FormData)
+    // We check for 'otp' because every request should have one
+    $data = $_POST;
+} else {
+    // Truly no data received
+    $answer["message"] = "Request denied: No valid JSON payload or Form Data detected.";
     exit(json_encode($answer));
 }
 
-$data = json_decode($_POST['json'],true);
-
 // incase logging in
 if(!empty($_SESSION["login_company_id"])){
 

app/contact/api/engine/manage_contact.php

@@ -0,0 +1,15 @@
+<?php 
+    session_start();
+
+    require '../../../preset.php';
+    require '../../../assets/utils/db_auth.php';
+
+    $id = (int)$data['id'];
+
+    $answer["testA"] = $data;
+    $answer["testB"] = $_FILES;
+    exit(json_encode($answer));
+
+    $answer["success"] = 1;
+    exit(json_encode($answer));
+?>

app/contact/manage_contact.php

@@ -104,7 +104,7 @@
           <div class="card mb-5">
             <div class="card-body p-6">
               <h2 class="fs-4 mb-3">Contact Images</h2>
-              <div id="my-dropzone" class="dropzone border border-dashed rounded-3">
+              <div id="custom-dropzone" class="dropzone border border-dashed rounded-3">
                 <div class="fallback"><input type="file" name="file" id="file" /></div>
               </div>
 
@@ -151,13 +151,35 @@
   <?php require "../include_ending.php";?>
 
   <script>
+
+  let myDropzone;
+
+  $(document).ready(function() {
+      // Use the ID to initialize, ensuring NO conflict with theme classes
+      myDropzone = new Dropzone("#custom-dropzone", { 
+          url: "<?php echo $server_url?>contact/api/engine/manage_contact.php",
+          autoProcessQueue: false,
+          uploadMultiple: true,
+          paramName: "contact_files"
+      });
+  });
+  
   function manage_contact() {
+    let formData = new FormData();
+
+    let files = myDropzone.getQueuedFiles();
+
+    files.forEach(function(file) {
+        // Use 'contact_files[]' so PHP creates an array in $_FILES
+        formData.append('contact_files[]', file);
+    })
 
     return ajax_request({
       url: "<?php echo $server_url?>contact/api/engine/manage_contact.php",
       autoPrepare: true,
       checkRequired: 1,
       debugMode: 1,
+      formData: formData,
       action: 'manage',
       onSuccess: function(res) {
 

app/include_header.php

@@ -12,22 +12,37 @@
 
   <!-- jquery  -->
   <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+
   <!-- bootstrap  -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
+
   <!-- bootbox  -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
+
   <!-- overlay loader -->
   <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script>
+
   <!-- bootstrap css  -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+
   <!-- flatpickr date -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
   <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+
   <!-- autocomplete  -->
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>
+
   <!-- alasql  -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/4.6.6/alasql.min.js" integrity="sha512-a0dn7nW2exqcTrj7ZcLhRW3iDxCKOh9GPa1jf27qljXfwhYp4tnNmm+8aRNp9c3ijpGsm7EmeGSQmcu80ZB3NA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <!-- dropzone  -->
+  <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
+  <script>
+    // This kills the CDN's auto-scanner so it doesn't conflict with main.js
+    Dropzone.autoDiscover = false; 
+  </script>
+  
   <!-- theme script  -->
   <link rel="stylesheet" href="<?php echo $server_url?>assets/css/main.css">
   <link rel="stylesheet" href="<?php echo $server_url?>assets/css/custom.css">