Add ImageWidget for image upload and deletion functionality with toast notifications

inventory/static/js/image.js

@@ -0,0 +1,52 @@
+const ImageWidget = (() => {
+    function submitImageUpload(id) {
+        const form = document.getElementById(`image-upload-form-${id}`);
+        const formData = new FormData(form);
+
+        fetch("/api/images", {
+            method: "POST",
+            body: formData
+        }).then(async response => {
+            if (!response.ok) {
+                // Try to parse JSON, fallback to text
+                const contentType = response.headers.get("Content-Type") || "";
+                let errorDetails;
+                if (contentType.includes("application/json")) {
+                    errorDetails = await response.json();
+                } else {
+                    errorDetails = { error: await response.text() };
+                }
+                throw errorDetails;
+            }
+            return response.json();
+        }).then(data => {
+            Toast.renderToast({ message: `Image uploaded.`, type: "success" });
+            location.reload();
+        }).catch(err => {
+            const msg = typeof err === "object" && err.error ? err.error : err.toString();
+            Toast.renderToast({ message: `Upload failed: ${msg}`, type: "danger" });
+        });
+    }
+
+    function deleteImage(inventoryId, imageId) {
+        if (!confirm("Are you sure you want to delete this image?")) return;
+
+        fetch(`/api/images/${imageId}`, {
+            method: "DELETE"
+        }).then(response => response.json()).then(data => {
+            if (data.success) {
+                Toast.renderToast({ message: "Image deleted.", type: "success" });
+                location.reload();  // Update view
+            } else {
+                Toast.renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
+            }
+        }).catch(err => {
+            Toast.renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
+        });
+    }
+
+    return {
+        submitImageUpload,
+        deleteImage
+    }
+})();

inventory/static/js/widget.js

@@ -1,56 +1,3 @@
-const ImageWidget = (() => {
-    function submitImageUpload(id) {
-        const form = document.getElementById(`image-upload-form-${id}`);
-        const formData = new FormData(form);
-
-        fetch("/api/images", {
-            method: "POST",
-            body: formData
-        }).then(async response => {
-            if (!response.ok) {
-                // Try to parse JSON, fallback to text
-                const contentType = response.headers.get("Content-Type") || "";
-                let errorDetails;
-                if (contentType.includes("application/json")) {
-                    errorDetails = await response.json();
-                } else {
-                    errorDetails = { error: await response.text() };
-                }
-                throw errorDetails;
-            }
-            return response.json();
-        }).then(data => {
-            Toast.renderToast({ message: `Image uploaded.`, type: "success" });
-            location.reload();
-        }).catch(err => {
-            const msg = typeof err === "object" && err.error ? err.error : err.toString();
-            Toast.renderToast({ message: `Upload failed: ${msg}`, type: "danger" });
-        });
-    }
-
-    function deleteImage(inventoryId, imageId) {
-        if (!confirm("Are you sure you want to delete this image?")) return;
-
-        fetch(`/api/images/${imageId}`, {
-            method: "DELETE"
-        }).then(response => response.json()).then(data => {
-            if (data.success) {
-                Toast.renderToast({ message: "Image deleted.", type: "success" });
-                location.reload();  // Update view
-            } else {
-                Toast.renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
-            }
-        }).catch(err => {
-            Toast.renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
-        });
-    }
-
-    return {
-        submitImageUpload,
-        deleteImage
-    }
-})();
-
 const EditorWidget = (() => {
     let tempIdCounter = 1;
 

inventory/templates/fragments/_image_fragment.html

@@ -6,7 +6,7 @@
     {% if image %}
         <img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
             style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
-            <div class="modal fade" id="imageModal-{{ id }}" tabindex="-1">
+            <div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
                 <div class="modal-dialog modal-dialog-centered modal-lg">
                     <div class="modal-content">
                         <div class="modal-body text-center">
@@ -17,7 +17,7 @@
                             <button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
                                 {{ icons.render_icon('trash') }}
                             </button>
-                        
+
                             <form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
                                 <input type="file" id="image-upload-input-{{ id }}" name="file"
                                        onchange="ImageWidget.submitImageUpload('{{ id }}')">
@@ -25,7 +25,7 @@
                                 <input type="hidden" name="model_id" value="{{ id }}">
                                 <input type="hidden" name="caption" value="Uploaded via UI">
                             </form>
-                        
+
                             <label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
                                 {{ icons.render_icon('upload') }}
                             </label>

inventory/templates/layout.html

@@ -76,6 +76,7 @@
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
     <script src="{{ url_for('static', filename='js/csv.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/image.js') }}"></script>
     <script src="{{ url_for('static', filename='js/toast.js') }}" defer></script>
     <script src="{{ url_for('static', filename='js/widget.js') }}"></script>
     <script>