fix upload function

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,
@@ -17,7 +17,7 @@
     "@popperjs/core": "^2.11.7",
     "@vueuse/core": "^9.13.0",
     "bootstrap": "^5.3.0-alpha2",
-    "bootstrap-icons": "^1.10.3",
+    "bootstrap-icons": "^1.10.4",
     "cookie-universal-nuxt": "^2.2.2",
     "dayjs": "^1.11.7",
     "jwt-decode": "^3.1.2",
@@ -25,21 +25,20 @@
     "mpegts.js": "^1.7.2",
     "pinia": "^2.0.33",
     "sortablejs": "^1.15.0",
-    "sortablejs-vue3": "^1.2.8",
+    "sortablejs-vue3": "^1.2.9",
     "splitpanes": "^3.1.5",
-    "video.js": "^8.0.4",
+    "video.js": "^8.0.4"
-    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^12.0.0",
     "@types/bootstrap": "^5.2.6",
-    "@types/lodash": "^4.14.191",
+    "@types/lodash": "^4.14.192",
     "@types/splitpanes": "^2.2.1",
     "@types/video.js": "^7.3.51",
-    "eslint": "^8.36.0",
+    "eslint": "^8.37.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "nuxt": "3.3.2",
+    "nuxt": "3.3.3",
     "sass": "^1.60.0",
-    "sass-loader": "^13.2.1"
+    "sass-loader": "^13.2.2"
   }
 }

pages/media.vue

@@ -330,6 +330,7 @@
                             <input
                                 class="form-control"
                                 type="file"
+                                ref="fileInputName"
                                 :accept="extensions"
                                 v-on:change="onFileChange"
                                 multiple
@@ -338,6 +339,18 @@
                             <div class="row">
                                 <div class="col-10">
                                     <div class="row progress-row">
+                                        <div class="col-1" style="min-width: 125px">Current:</div>
+                                        <div class="col-10">
+                                            <div class="progress">
+                                                <div
+                                                    class="progress-bar bg-warning"
+                                                    role="progressbar"
+                                                    :aria-valuenow="currentProgress"
+                                                    :style="`width: ${currentProgress}%`"
+                                                />
+                                            </div>
+                                        </div>
+                                        <div class="w-100" />
                                         <div class="col-1" style="min-width: 125px">
                                             Overall ({{ currentNumber }}/{{ inputFiles.length }}):
                                         </div>
@@ -352,18 +365,6 @@
                                             </div>
                                         </div>
                                         <div class="w-100" />
-                                        <div class="col-1" style="min-width: 125px">Current:</div>
-                                        <div class="col-10">
-                                            <div class="progress">
-                                                <div
-                                                    class="progress-bar bg-warning"
-                                                    role="progressbar"
-                                                    :aria-valuenow="currentProgress"
-                                                    :style="`width: ${currentProgress}%`"
-                                                />
-                                            </div>
-                                        </div>
-                                        <div class="w-100" />
                                         <div class="col-1" style="min-width: 125px">Uploading:</div>
                                         <div class="col-10">
                                             <strong>{{ uploadTask }}</strong>
@@ -427,6 +428,7 @@ const uploadModal = ref()
 const extensions = ref('')
 const folderName = ref('')
 const inputFiles = ref([] as File[])
+const fileInputName = ref()
 const currentNumber = ref(0)
 const uploadTask = ref('')
 const overallProgress = ref(0)
@@ -619,21 +621,11 @@ function onFileChange(evt: any) {
     inputFiles.value = files
 }
 
-async function onSubmitUpload(evt: any) {
+function upload(file: any): Promise<null> {
-    evt.preventDefault()
+    const formData = new FormData()
-
+    formData.append(file.name, file)
-    lastPath.value = mediaStore.folderTree.source
+    xhr.value = new XMLHttpRequest()
-
+    return new Promise(resolve => {
-    for (let i = 0; i < inputFiles.value.length; i++) {
-        const file = inputFiles.value[i]
-        uploadTask.value = file.name
-        currentNumber.value = i + 1
-
-        const formData = new FormData()
-        formData.append(file.name, file)
-
-        xhr.value = new XMLHttpRequest()
-
         xhr.value.open(
             'PUT',
             `/api/file/${configStore.configGui[configStore.configID].id}/upload/?path=${encodeURIComponent(
@@ -651,28 +643,48 @@ async function onSubmitUpload(evt: any) {
             indexStore.alertVariant = 'alert-danger'
             indexStore.alertMsg = `Upload error: ${xhr.value.status}`
             indexStore.showAlert = true
+            resolve(undefined)
         }
 
         // upload completed successfully
         xhr.value.onload = function () {
-            overallProgress.value = (currentNumber.value * 100) / inputFiles.value.length
             currentProgress.value = 100
+            resolve(xhr.response)
         }
 
         xhr.value.send(formData)
+    });
+}
+
+async function onSubmitUpload(evt: any) {
+    evt.preventDefault()
+
+    lastPath.value = mediaStore.folderTree.source
+
+    for (let i = 0; i < inputFiles.value.length; i++) {
+        const file = inputFiles.value[i]
+        uploadTask.value = file.name
+        currentProgress.value = 0
+        currentNumber.value = i + 1
+
+        await upload(file)
+
+        overallProgress.value = (currentNumber.value * 100) / inputFiles.value.length
     }
 
     uploadTask.value = 'Done...'
     getPath(lastPath.value)
 
     setTimeout(() => {
+        fileInputName.value.value = null
         thisUploadModal.value.hide()
         currentNumber.value = 0
         currentProgress.value = 0
         overallProgress.value = 0
         inputFiles.value = []
         indexStore.showAlert = false
-    }, 1000)
+        uploadTask.value = ''
+    }, 1500)
 }
 
 function onResetUpload(evt: any) {
@@ -687,7 +699,6 @@ function onResetUpload(evt: any) {
 </script>
 
 <style lang="scss">
-
 .browser-container .browser-item:hover {
     background-color: $item-hover;
 
@@ -706,6 +717,14 @@ function onResetUpload(evt: any) {
     min-width: 30px;
 }
 
+#deleteModal strong {
+    display:inline-block;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .file-delete,
 .file-rename {
     margin-right: 0.8em;