From 8bd8211b3d05ce8478ae31ca54d1fbf91dd31bea Mon Sep 17 00:00:00 2001 From: Jun Barroga Date: Thu, 15 Feb 2024 17:32:28 +0800 Subject: [PATCH] Vendor Product Add and Edit page Multiple Image --- vendor-uploads.php | 406 +++++++++++++++++++++++++-------------------- 1 file changed, 228 insertions(+), 178 deletions(-) diff --git a/vendor-uploads.php b/vendor-uploads.php index 709251a..026a2e4 100644 --- a/vendor-uploads.php +++ b/vendor-uploads.php @@ -111,6 +111,7 @@ $array = json_decode($result, true);
+
+ +
+
@@ -131,93 +135,109 @@ $array = json_decode($result, true);
- +
- edit - " alt="edit" /> + + ?> edit
+ +
-
-
- - -
-
-
- edit + $image_url) { + $image_url = trim($image_url); + ?> +
+
+ + +
+
+
+ edit + +
+
+
+ +
+
+ + +
+
+
+ edit +
-
-
-
- - -
-
-
- edit -
-
-
-
-
- - -
-
-
- edit -
-
-
-
-
- - -
-
-
- edit -
-
-
-
-
- - -
-
-
- edit -
-
-
-
-
- - -
-
-
- edit -
-
-
+ + + + +
+
@@ -248,7 +268,6 @@ $array = json_decode($result, true);
- - - - - - - - - - -
-
- - -
-
- - -
+ + +
+
+ + +
+
+ + +
@@ -409,104 +428,135 @@ $array = json_decode($result, true); function uploadProductImage() { var productId = ''; var fileInput = document.getElementById('imageUpload'); - var file = fileInput.files[0]; + var files = fileInput.files; - if (file) { - const reader = new FileReader(); - reader.onload = function(e) { - const img = new Image(); - img.onload = function() { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); + if (files.length > 0) { + var promises = []; + var existingImages = []; - // Resize the image - const maxWidth = 1200; // Set your desired maximum width - const maxHeight = 1000; // Set your desired maximum height - const aspectRatio = img.width / img.height; + fetch('https://api.obanana.shop/api/v1/products/' + productId) + .then(response => response.json()) + .then(product => { + existingImages = product.images || []; + existingImages = Array.isArray(existingImages) ? existingImages : [existingImages]; + existingImages = existingImages.filter(image => image); + }) + .catch(error => { + console.error('Error fetching existing images:', error); + }); - let newWidth = img.width; - let newHeight = img.height; + for (let i = 0; i < files.length; i++) { + const file = files[i]; + const reader = new FileReader(); - if (img.width > maxWidth) { - newWidth = maxWidth; - newHeight = newWidth / aspectRatio; - } + const promise = new Promise((resolve, reject) => { + reader.onload = function(e) { + const img = new Image(); + img.onload = function() { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + const maxWidth = 1200; + const maxHeight = 1000; + const aspectRatio = img.width / img.height; + let newWidth = img.width; + let newHeight = img.height; - if (newHeight > maxHeight) { - newHeight = maxHeight; - newWidth = newHeight * aspectRatio; - } + if (img.width > maxWidth) { + newWidth = maxWidth; + newHeight = newWidth / aspectRatio; + } - canvas.width = newWidth; - canvas.height = newHeight; + if (newHeight > maxHeight) { + newHeight = maxHeight; + newWidth = newHeight * aspectRatio; + } - // Draw the image on the canvas - ctx.drawImage(img, 0, 0, newWidth, newHeight); + canvas.width = newWidth; + canvas.height = newHeight; + ctx.drawImage(img, 0, 0, newWidth, newHeight); - // Convert the canvas content to a new image file - canvas.toBlob((blob) => { - const resizedFile = new File([blob], file.name, { - type: 'image/jpeg' - }); - - // Continue with the rest of your upload logic using the resized file - var formData = new FormData(); - formData.append('image_id', productId); - formData.append('category', 'product'); - formData.append('image', resizedFile); - - fetch('https://api.obanana.shop/api/v1/upload_image', { - method: 'POST', - body: formData - }) - .then(response => { - if (response.ok) { - return response.json(); - } else { - console.error('File upload failed'); - throw new Error('File upload failed'); - } - }) - .then(result => { - const filename = result.filename; - - const payload = { - product_image: `https://api.obanana.shop/images/storage/product_uploads/${filename}`, - }; - - console.log('Payload:', payload); - const token = ''; - return fetch('https://api.obanana.shop/api/v1/products/' + productId, { - method: 'PATCH', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + token, - }, - body: JSON.stringify(payload) + canvas.toBlob((blob) => { + const resizedFile = new File([blob], file.name, { + type: 'image/jpeg' }); - }) - .then(secondResponse => { - if (secondResponse.ok) { - console.log('Second request successful'); - location.reload(); - } else { - console.error('Second request failed'); - } - }) - .catch(error => { - console.error('Error during fetch:', error); - }); - }, 'image/jpeg'); - }; - img.src = e.target.result; - }; + var formData = new FormData(); + formData.append('image_id', productId); + formData.append('category', 'product'); + formData.append('image', resizedFile); - reader.readAsDataURL(file); + fetch('https://api.obanana.shop/api/v1/upload_image', { + method: 'POST', + body: formData + }) + .then(response => { + if (response.ok) { + return response.json(); + } else { + console.error('File upload failed'); + reject(new Error('File upload failed')); + } + }) + .then(result => { + const filename = result.filename; + resolve(filename); + }) + .catch(error => { + console.error('Error during fetch:', error); + reject(error); + }); + }, 'image/jpeg'); + }; + + img.src = e.target.result; + }; + + reader.readAsDataURL(file); + }); + + promises.push(promise); + } + + Promise.all(promises) + .then(filenames => { + const updatedImages = existingImages.concat(filenames.map(filename => `https://api.obanana.shop/images/storage/product_uploads/${filename}`)); + + if (!Array.isArray(updatedImages)) { + console.error('Updated images is not an array:', updatedImages); + throw new Error('Updated images is not an array'); + } + const imagesString = updatedImages.join(','); + const payload = { + images: imagesString, + }; + + const token = ''; + return fetch('https://api.obanana.shop/api/v1/products/' + productId, { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + token, + }, + body: JSON.stringify(payload) + }); + }) + .then(response => { + if (response.ok) { + console.log('Images uploaded successfully'); + location.reload(); + } else { + console.error('Image upload failed'); + } + }) + .catch(error => { + console.error('Error during image upload:', error); + }); } } + +