From 70d8bcb4d225c4b25c85313aeb4ac2a0ffefee90 Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 2 Mar 2026 12:16:44 +0100
Subject: [PATCH] fix(upload): auto-upload on drag-drop and fix FormData
 serialization

---
 resources/js/Components/SlideUploader.vue | 41 +++++++++++++----------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/resources/js/Components/SlideUploader.vue b/resources/js/Components/SlideUploader.vue
index 18ef74d..b825163 100644
--- a/resources/js/Components/SlideUploader.vue
+++ b/resources/js/Components/SlideUploader.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { router } from '@inertiajs/vue3'
+import axios from 'axios'
 import Vue3Dropzone from '@jaxtheprime/vue3-dropzone'
 import '@jaxtheprime/vue3-dropzone/dist/style.css'
 
@@ -44,6 +45,12 @@ const acceptedExtensions = ['.png', '.jpg', '.jpeg', '.ppt', '.pptx', '.zip']
 const isUploading = computed(() => uploading.value)
 const progressPercent = computed(() => Math.round(uploadProgress.value))
 
+watch(files, (newFiles) => {
+    if (newFiles.length > 0 && !uploading.value) {
+        processFiles()
+    }
+})
+
 function processFiles() {
     if (files.value.length === 0) return
 
@@ -63,6 +70,9 @@ function uploadNextFile(index) {
         files.value = []
         emit('uploaded')
 
+        // Reload Inertia page data to reflect newly uploaded slides
+        router.reload({ preserveScroll: true })
+
         // Reset progress after brief display
         setTimeout(() => {
             uploadProgress.value = 0
@@ -95,25 +105,22 @@ function uploadNextFile(index) {
         formData.append('expire_date', expireDate.value)
     }
 
-    router.post(route('slides.store'), formData, {
-        forceFormData: true,
-        preserveScroll: true,
-        preserveState: true,
-        onProgress: (event) => {
-            if (event.percentage) {
-                // Per-file progress weighted across total
+    axios.post(route('slides.store'), formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+        onUploadProgress: (event) => {
+            if (event.total) {
+                const percent = Math.round((event.loaded / event.total) * 100)
                 const perFileWeight = 100 / totalCount.value
-                uploadProgress.value = (index * perFileWeight) + (event.percentage / 100 * perFileWeight)
+                uploadProgress.value = (index * perFileWeight) + (percent / 100 * perFileWeight)
             }
         },
-        onSuccess: () => {
-            uploadedCount.value = index + 1
-            uploadNextFile(index + 1)
-        },
-        onError: (errors) => {
-            uploading.value = false
-            uploadError.value = errors.file?.[0] || errors.message || 'Upload fehlgeschlagen.'
-        },
+    }).then(() => {
+        uploadedCount.value = index + 1
+        uploadNextFile(index + 1)
+    }).catch((error) => {
+        uploading.value = false
+        const errors = error.response?.data?.errors
+        uploadError.value = errors?.file?.[0] || error.response?.data?.message || 'Upload fehlgeschlagen.'
     })
 }