basic user file upload working

vue3/src/composables/useFileApi.ts

@@ -0,0 +1,46 @@
+import {useDjangoUrls} from "@/composables/useDjangoUrls";
+import {ref} from "vue";
+import {getCookie} from "@/utils/cookie";
+import {UserFile, UserFileFromJSON} from "@/openapi";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+
+/**
+ * function to upload files to the multipart endpoints accepting file uploads
+ */
+export function useFileApi() {
+    const {getDjangoUrl} = useDjangoUrls()
+
+    const fileApiLoading = ref(false)
+
+    function createOrUpdateUserFile(name: string, file: File | null, id?: number): Promise<UserFile> {
+        let formData = new FormData()
+        formData.append('name', name)
+
+        if (file != null) {
+            formData.append('file', file)
+        }
+
+        fileApiLoading.value = true
+
+        let fetchUrl = getDjangoUrl('api/user-file/')
+        let fetchMethod = 'POST'
+        if (id) {
+            fetchUrl += `${id}/`
+            fetchMethod = 'PUT'
+        }
+
+        return fetch(fetchUrl, {
+            method: fetchMethod,
+            headers: {'X-CSRFToken': getCookie('csrftoken')},
+            body: formData
+        }).then(r => {
+            return r.json().then(r => {
+                return UserFileFromJSON(r)
+            })
+        }).finally(() => {
+            fileApiLoading.value = false
+        })
+    }
+
+    return {fileApiLoading, createOrUpdateUserFile}
+}