TODO: submitSale()

feat: image preview and front end on make sale

client/css/make-sale.css

@@ -63,9 +63,10 @@
 }
 .input-image-field {
     width: 25vw;
-    height: 25vw;
+    max-height: 25vw;
+    display: inline-flex;
+    flex-direction: column;
     border-radius: 10px;
-    background-color: azure;
     transition: max-height 0.5s;
 }
 .input-text-fields {
@@ -101,11 +102,11 @@
     color: black;
 }
 
-#product_image {
+/* #product_image {
     background-color: azure;
-}
+} */
 
-input {
+.input-field input {
     width: 100%;
     padding: 18px;
     border-color: transparent;
@@ -133,4 +134,10 @@ input {
     outline: 0;
     cursor: pointer;
     transition: background 1s;
+}
+
+#image-preview {
+    background-color: azure;
+    width: 24vw;
+    max-height: 24vw;
 }
\ No newline at end of file

client/js/make-sale.js

@@ -35,4 +35,21 @@ function invalidStyle(param_field, reason, criteria_p) {
 function resetFieldStyle(param_field, criteria_p) {
     param_field.style.borderColor = "black";
     criteria_p.textContent = ' ';
+}
+
+var openFile = function(file) {
+    var input = file.target;
+    var reader = new FileReader();
+    reader.onload = function(){
+      var dataURL = reader.result;
+      var output = document.getElementById('image-preview');
+      output.src = dataURL;
+    };
+    reader.readAsDataURL(input.files[0]);
+};
+
+function submitSale() {
+    
+    var saleData = new FormData();
+    // saleData.append('item_id', )
 }
\ No newline at end of file

client/pages/make-sale.php

@@ -23,7 +23,8 @@
                 <form id="saleform">
                     <div class="input-group">
                         <div class="input-image-field">
-                            <input type="image" id="product_image" placeholder="Product Image" title="Product Image">
+                            <img src="#" id="image-preview" alt="">
+                            <input accept=".jpg, .jpeg"  type="file" id="product_image" placeholder="Product Image" title="Product Image" onchange="openFile(event)">
                         </div>
                         <div class="input-text-fields">
                             <div class="input-field">
@@ -44,7 +45,7 @@
                         
                     </div>
                     <div class="button-field">
-                        <button type="button" id="salesubmit">Done</button>
+                        <button type="button" id="salesubmit" onclick="submitSale()">Done</button>
                     </div>
                 </form>
             </div>

server/controllers/upload_product_image.php

+<?php
+$target_dir = "../assets/product_image/";
+$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
+$uploadOk = 1;
+$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
+
+// Check if image file is a actual image or fake image
+if(isset($_POST["submit"])) {
+  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
+  if($check !== false) {
+    echo "File is an image - " . $check["mime"] . ".";
+    $uploadOk = 1;
+  } else {
+    echo "File is not an image.";
+    $uploadOk = 0;
+  }
+}
+
+// Check if file already exists
+if (file_exists($target_file)) {
+  echo "Sorry, file already exists.";
+  $uploadOk = 0;
+}
+
+// Check file size
+if ($_FILES["fileToUpload"]["size"] > 500000) {
+  echo "Sorry, your file is too large.";
+  $uploadOk = 0;
+}
+
+// Allow certain file formats
+if($imageFileType != "jpg" && $imageFileType != "jpeg") {
+  echo "Sorry, only JPG & JPEG files are allowed.";
+  $uploadOk = 0;
+}
+
+// Check if $uploadOk is set to 0 by an error
+if ($uploadOk == 0) {
+  echo "Sorry, your file was not uploaded.";
+// if everything is ok, try to upload file
+} else {
+  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
+    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
+  } else {
+    echo "Sorry, there was an error uploading your file.";
+  }
+}
+?>
\ No newline at end of file