@@ -131,93 +135,109 @@ $array = json_decode($result, true);
+
+
@@ -248,7 +268,6 @@ $array = json_decode($result, true);
+
-
+
- 
- " alt="edit" />
+
+ ?>
-
-
-
-
-
-
-
+
- 
+ $image_url) {
+ $image_url = trim($image_url);
+ ?>
+
-
+ $image_url) {
+ $image_url = trim($image_url);
+ ?>
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -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);
+ });
}
}
+
+