yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add ImageWidget for image upload and deletion functionality with toast notifications

Browse source
This commit is contained in:
Yaro Kasear 2025-07-25 08:42:07 -05:00
parent 8710c09917
commit d488324c50
4 changed files with 56 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

52
inventory/static/js/image.js Normal file
View file

@ -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
}
})();

53
inventory/static/js/widget.js
View file

@ -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;

6
inventory/templates/fragments/_image_fragment.html
View file

@ -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>

1
inventory/templates/layout.html
View file

@ -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>