firstcommit

resources/js/backend/displayUploadedImage.js

@@ -0,0 +1,48 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const fileInput = document.querySelector(".input-file");
+    const uploadedImage = document.querySelector(".show-image");
+    const resetButton = document.querySelector(".image-reset");
+
+    // Check if the necessary elements exist before proceeding
+    if (fileInput && uploadedImage && resetButton) {
+        const resetImage = uploadedImage.src;
+
+        fileInput.addEventListener("change", function () {
+            if (fileInput.files && fileInput.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    uploadedImage.src = e.target.result;
+                };
+                reader.readAsDataURL(fileInput.files[0]);
+            }
+        });
+
+        resetButton.addEventListener("click", function () {
+            fileInput.value = null;
+            uploadedImage.src = resetImage;
+        });
+    }
+
+    const secondaryInput = document.querySelector(".input-secondary");
+    const uploadedSecondary = document.querySelector(".show-secondary");
+    const resetSecondaryButton = document.querySelector(".secondary-reset");
+
+    if (secondaryInput && uploadedSecondary && resetSecondaryButton) {
+        const resetSecondaryImage = uploadedSecondary.src;
+
+        secondaryInput.addEventListener("change", function () {
+            if (secondaryInput.files && secondaryInput.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    uploadedSecondary.src = e.target.result;
+                };
+                reader.readAsDataURL(secondaryInput.files[0]);
+            }
+        });
+
+        resetSecondaryButton.addEventListener("click", function () {
+            secondaryInput.value = null;
+            uploadedSecondary.src = resetSecondaryImage;
+        });
+    }
+});