From 2451f714051bb74a7178e620d09ac4a0c0220508 Mon Sep 17 00:00:00 2001
From: Raymart De Guzman <tramyardg@gmail.com>
Date: Sat, 26 Oct 2019 10:15:12 -0400
Subject: [PATCH] #24 refactoring image upload

---
 admin/api/uploadCarImages.php   |  9 +++--
 admin/inventory.php             |  7 ++--
 admin/js/routine/car-actions.js | 58 +++++++++++++++++++++------------
 admin/server/CarDAO.php         |  4 +++
 4 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/admin/api/uploadCarImages.php b/admin/api/uploadCarImages.php
index f28db92..5e4e8f0 100644
--- a/admin/api/uploadCarImages.php
+++ b/admin/api/uploadCarImages.php
@@ -4,10 +4,9 @@
 
 // car diagram upload with ajax
 $v = new CarDAO();
+
 if (isset($_POST)) {
-    echo 'hello....';
-    print_r($_POST);
-    var_dump(file_get_contents('php://input'));
-    // echo $this->addDiagram($_POST['filesData'], $_GET["id"]) != null ? 1 : 0;
-    // exit();
+    if (isset($_POST['fd']) && isset($_POST['id'])) {
+        echo $v->isDiagramAdded($_POST['fd'], $_POST['id']);
+    }
 }
\ No newline at end of file
diff --git a/admin/inventory.php b/admin/inventory.php
index a5eae1a..7bb44c2 100644
--- a/admin/inventory.php
+++ b/admin/inventory.php
@@ -261,7 +261,7 @@
 
                 <div class="row">
                     <div class="col-md-12">
-                        <form method="post" id="add-car-photos-form" enctype="multipart/form-data">
+                        <form id="add-car-photos-form" enctype="multipart/form-data">
                             <div class="panel panel-info">
                                 <div class="panel-heading">Upload photos for this car</div>
                                 <div class="panel-body">
@@ -273,8 +273,7 @@
                                             <output id="list"></output>
                                         </div>
                                         <div class="col-md-12">
-                                            <input type="submit" class="btn btn-success btn-sm" value="Upload" id="upload-car-photos-btn"
-                                            name="upload-car-photos-btn">
+                                            <input type="submit" name="upload-car-photos-btn" value="Submit" carid="null" />
                                         </div>
                                     </div>
                                 </div>
@@ -288,7 +287,6 @@
     <?php } ?>
 
 </div>
-
 <script src="../js/jquery-3.1.1.min.js"></script>
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
@@ -332,7 +330,6 @@ function previewSelectedImages(evt) {
 
       // Read in the image file as a data URL.
       reader.readAsDataURL(f);
-      console.log(f);
     }
   }
   document.getElementById('files').addEventListener('change', previewSelectedImages, false);
diff --git a/admin/js/routine/car-actions.js b/admin/js/routine/car-actions.js
index 0d01fc2..d7a905c 100644
--- a/admin/js/routine/car-actions.js
+++ b/admin/js/routine/car-actions.js
@@ -2,19 +2,20 @@ let template = new CommonTemplate();
 let CarActions = (function () {
 
   let deleteCarSel = {},
-      confirmDeleteRecordSel = {},
-      deleteConfirmBtnSel = {};
+    confirmDeleteRecordSel = {},
+    deleteConfirmBtnSel = {};
 
   let uploadCarPhotoLink = {},
-      uploadDeleteCarPhotoModal = {},
-      uploadCarPhotoBtn = {};
+    uploadDeleteCarPhotoModal = {},
+    uploadCarPhotoSubmitBtn = {},
+    uploadCarPhotoForm = {};
 
   let getPhotosByCarIdFn = {},
-      displayImagesOfThisCarSel = {},
-      updateCarLink = {},
-      updateCarModal = {},
-      updateCarInfoModalContent = {},
-      checkedField = {};
+    displayImagesOfThisCarSel = {},
+    updateCarLink = {},
+    updateCarModal = {},
+    updateCarInfoModalContent = {},
+    checkedField = {};
 
   let loader = {};
 
@@ -33,7 +34,8 @@ let CarActions = (function () {
 
       uploadCarPhotoLink = $('.dropdown a.upload-car-photos');
       uploadDeleteCarPhotoModal = $('#upload-delete-car-photos-modal');
-      uploadCarPhotoBtn = $('input[name=upload-car-photos-btn]');
+      uploadCarPhotoForm = $('#add-car-photos-form');
+      uploadCarPhotoSubmitBtn = $('input[name=upload-car-photos-btn]');
 
       updateCarLink = $('a#updateCar_link');
       updateCarModal = $('.update-car-modal');
@@ -71,7 +73,7 @@ let CarActions = (function () {
       });
 
       // load data of this car to be updated
-      updateCarLink.click(function(event) {
+      updateCarLink.click(function (event) {
         let carId = $(this).attr('data-id');
         // console.log($(this).attr('data-id'));
         updateCarModal.modal('show');
@@ -125,29 +127,45 @@ let CarActions = (function () {
         // ajax request to display list of photos of this car
         // not using DataTables
         getPhotosByCarIdFn(carId);
+        uploadCarPhotoSubmitBtn.attr('carid', carId);
 
         return false;
       });
 
-      uploadCarPhotoBtn.click(function () {
+      uploadCarPhotoForm.submit(function (e) {
         uploadDeleteCarPhotoModal.modal('hide');
+        e.preventDefault();
+
+        let fd = new FormData(this);
+        fd.append('id', uploadCarPhotoSubmitBtn.attr('carid'));
 
         let thumbImageSel = $('img[model=thumb]');
-        let filesDataArray = [];
         for (let i = 0; i < thumbImageSel.length; i++) {
-          filesDataArray.push(thumbImageSel.eq(i).attr('src'));
+          let srcImg = thumbImageSel.eq(i)[0].currentSrc;
+          let cleanBase64Img = srcImg.substring(srcImg.indexOf(',') + 1);
+          fd.append('fd[]', cleanBase64Img);
         }
-        console.log(filesDataArray);
+
+        loader.css('display', 'block');
 
         $.ajax({
-          url: 'api/uploadCarImages.php',
           type: 'POST',
-          data: {imagesData: filesDataArray},
+          url: "api/uploadCarImages.php",
+          data: fd,
           dataType: 'json',
-          success: function (data) {
-            console.log(data);
+          contentType: false,
+          cache: false,
+          processData: false,
+          success: function (r) {
+            if (r) {
+              loader.css('display', 'none');
+            } else {
+              alert('fail');
+            }
           }
         });
+
+        e.preventDefault();
         return false;
       });
 
@@ -172,7 +190,7 @@ let CarActions = (function () {
           success: function (diagramArray) {
             // console.log(diagramArray);
             let diagramData = {diagrams: diagramArray};
-            console.log(diagramData);
+            // console.log(diagramData);
             if (diagramArray.length > 0) {
               let html = Mustache.to_html(template.getPhotosByCarIdModalContent(), diagramData);
               displayImagesOfThisCarSel.empty();
diff --git a/admin/server/CarDAO.php b/admin/server/CarDAO.php
index f81878d..07c2100 100644
--- a/admin/server/CarDAO.php
+++ b/admin/server/CarDAO.php
@@ -219,6 +219,10 @@ function addDiagram($files, $id) {
         }
     }
 
+    function isDiagramAdded($files, $id) {
+        return $this->addDiagram($files, $id) ? 1 : 0;
+    }
+
     function update(&$carObject) {
         // some of them needs to be a varchar (string)
         $sql =  '   UPDATE  '.