fixup! Add front-end for image upload

arches/app/src/components/ControlledListManager/ItemEditor.vue

@@ -19,7 +19,7 @@ import {
 } from "@/components/ControlledListManager/const.ts";
 import { bestLabel } from "@/components/ControlledListManager/utils.ts";
 
-import type { FileUploadBeforeSendEvent } from "primevue/fileupload";
+import type { FileUploadBeforeSendEvent, FileUploadUploadEvent } from "primevue/fileupload";
 import type { ControlledListItem, Label, NewLabel } from "@/types/ControlledListManager";
 
 const { displayedRow: item } = inject(displayedRowKey);
@@ -55,6 +55,14 @@ const addHeader = (event: FileUploadBeforeSendEvent) => {
     event.xhr.setRequestHeader("X-CSRFToken", Cookies.get("csrftoken"));
     event.formData.set("item_id", item.value.id);
 };
+
+const onUpload = (event: FileUploadUploadEvent) => {
+    if (event.xhr.status !== 201) {
+        return;
+    }
+    const newImage = JSON.parse(event.xhr.responseText);
+    item.value.images.push(newImage);
+};
 </script>
 
 <template>
@@ -121,6 +129,7 @@ const addHeader = (event: FileUploadBeforeSendEvent) => {
             :with-credentials="true"
             name="item_image"
             @before-send="addHeader($event)"
+            @upload="onUpload($event)"
         />
     </div>
 </template>

arches/app/views/controlled_lists.py

@@ -554,7 +554,7 @@ def add_new_image(self, request):
             value=uploaded_file,
         )
         img.save()
-        return JSONResponse(status=201)
+        return JSONResponse(serialize(img), status=201)
 
     def post(self, request, **kwargs):
         if not (image_id := kwargs.get("id", None)):