ref #5876

src/pages/Claim/Card/ClaimPhoto.vue

@@ -25,7 +25,8 @@ const client = ref({});
 
 const inputFile = ref();
 const files = ref({});
-
+const spinnerRef = ref();
+const progress = ref(0);
 const claimDmsRef = ref();
 const dmsType = ref({});
 const config = ref({});
@@ -98,13 +99,8 @@ function setClaimDms(data) {
 }
 
 async function create() {
-    const formData = new FormData();
     const inputFiles = files.value;
-    for (let i = 0; i < inputFiles.length; i++)
-        formData.append(inputFiles[i].name, inputFiles[i]);
-
     const query = `claims/${claimId.value}/uploadFile`;
-
     const dms = {
         hasFile: false,
         hasFileAttached: false,
@@ -119,9 +115,16 @@ async function create() {
         }).toUpperCase(),
     };
 
-    await axios.post(query, formData, {
-        params: dms,
-    });
+    spinnerRef.value.show();
+    for (let i = 0; i < inputFiles.length; i++) {
+        const formData = new FormData();
+        formData.append(inputFiles[i].name, inputFiles[i]);
+        await axios.post(query, formData, {
+            params: dms,
+        });
+        progress.value = i;
+    }
+    spinnerRef.value.hide();
 
     quasar.notify({
         message: t('globals.dataSaved'),
@@ -234,7 +237,16 @@ function onDrag() {
             </div>
         </div>
     </div>
-
+    <QDialog ref="spinnerRef">
+        <QCard>
+            <QCardSection class="row justify-center">
+                <QSpinner color="orange" size="xl" />
+            </QCardSection>
+            <QCardSection>
+                <p>{{ `${progress} de ${files.length} archivos subidos` }}</p>
+            </QCardSection>
+        </QCard>
+    </QDialog>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <label for="fileInput">
             <QBtn fab @click="inputFile.nativeEl.click()" icon="add" color="primary">