From d5022ab0e3293c1d0715057ef5fdf632393be3c7 Mon Sep 17 00:00:00 2001
From: christodharma <13521009@std.stei.itb.ac.id>
Date: Sun, 8 Oct 2023 21:07:02 +0700
Subject: [PATCH] TODO: submitSale() feat: image preview and front end on make
sale
---
client/css/make-sale.css | 17 +++++---
client/js/make-sale.js | 17 ++++++++
client/pages/make-sale.php | 5 ++-
server/controllers/upload_product_image.php | 48 +++++++++++++++++++++
4 files changed, 80 insertions(+), 7 deletions(-)
create mode 100644 server/controllers/upload_product_image.php
diff --git a/client/css/make-sale.css b/client/css/make-sale.css
index 278b0bb..0e79785 100644
--- a/client/css/make-sale.css
+++ b/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
diff --git a/client/js/make-sale.js b/client/js/make-sale.js
index a1a2af5..10e7f9b 100644
--- a/client/js/make-sale.js
+++ b/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
diff --git a/client/pages/make-sale.php b/client/pages/make-sale.php
index 04f7d47..911ec56 100644
--- a/client/pages/make-sale.php
+++ b/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>
diff --git a/server/controllers/upload_product_image.php b/server/controllers/upload_product_image.php
new file mode 100644
index 0000000..29472ff
--- /dev/null
+++ b/server/controllers/upload_product_image.php
@@ -0,0 +1,48 @@
+<?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
--
GitLab