Create variable to stop video polling

src/views/pages/ksDocuments/KsDocuments.vue

@@ -119,7 +119,7 @@ import axios from 'axios';
 import moment from 'moment';
 import { useConfirm } from "primevue/useconfirm";
 import { useToast } from 'primevue/usetoast';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch, onUnmounted} from 'vue';
 import { useRouter } from 'vue-router';
 
 import Button from 'primevue/button';
@@ -148,6 +148,7 @@ const userPrefStore = UserPrefStore();
 const ksDocumentStore = KsDocumentStore();
 const loadingStore = LoadingStore();
 const fe_status = ref('');
+let updateTimer = null;
 
 const initFilters = () => {
 	filters.value = {
@@ -169,12 +170,18 @@ onMounted(() => {
 	userPrefStore.fetchUserData().then(() => {
 		updateDocuments();
 
-		setInterval(() => {
+		updateTimer = setInterval(() => {
 			updateDocuments();
 		}, 5000);
 	});
 
+});
 
+onUnmounted(() => {
+	if (updateTimer) {
+		clearInterval(updateTimer); // Cancella il timer quando il componente viene distrutto
+		updateTimer = null;
+	}
 });
 
 

src/views/pages/ksDocuments/KsNewDocumentForm.vue

@@ -156,7 +156,13 @@
                 <p v-if="selectedFile" class="text-center">You can execute the ingestion for the following file:</p>
                 <p v-if="selectedFile" class="text-center">{{ selectedFile.name }}</p>
                 <div class="flex justify-center mt-4">
-                  <Button type="submit" label="Ingest" :fluid="false"></Button>
+                  <Button type="submit" label="Upload" :fluid="false" :disabled="uploadPercentage > 0"></Button>
+                </div>
+                <div class="flex justify-center mt-8 w-1/2 mx-auto" v-if="uploadPercentage > 0">
+                  <div class="flex flex-col items-center gap-4 w-full">
+                    <p class="text-center">Wait until the upload is completed. You will be automatically redirected.</p>
+                    <ProgressBar :value="uploadPercentage" class="w-full" />
+                  </div>
                 </div>
               </div>
               <div class="flex justify-between pt-6">
@@ -213,6 +219,7 @@ const ksdocuments = ref(null);
 const showDialog = ref(false);
 const existingDocument = ref(null);
 const formDataToSend = ref(new FormData());
+const uploadPercentage = ref(0);
 
 const documentTypeOptions = ref([
   { name: 'Functional', value: 'functional' },
@@ -302,14 +309,15 @@ const onFileSelect = (event) => {
   });
 };
 
-onMounted(() => {
-  updateDocuments();
+onMounted(async () => {
+  await updateDocuments();
 });
 
-function updateDocuments() {
+const updateDocuments = async () => {
   ksDocumentStore.fetchKsDocument().then(() => {
 
     ksdocuments.value = [...(ksDocumentStore.ksDocument || [])];
+    console.log('ksdocuments', ksdocuments.value);
   });
 };
 
@@ -323,29 +331,6 @@ const onFileRemove = () => {
   });
 };
 
-const startIndividualngestion = async (id) => {
-  toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion', life: 3000 });
-
-  axios.get(`/test/ingest_document/${id}`)
-    .then(response => {
-      if (response.data.status == "OK") {
-        toast.add({ severity: 'success', summary: 'Success', detail: 'Document ingestion started...', life: 3000 });
-
-      }
-      if (response.data.status == "ERROR") {
-        toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting document:' + response.data.message, life: 3000 });
-      }
-
-    })
-    .catch(error => {
-      //ingestionDialogVisible.value = true;
-      console.error('Error ingesting record: ', error)
-      toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting document:' + error, life: 3000 });
-    });
-
-
-};
-
 const deleteRecord = (name) => {
   const documentToDelete = ksdocuments.value.find(doc => doc.name === name);
   if (!documentToDelete) {
@@ -374,10 +359,8 @@ const deleteRecord = (name) => {
 };
 
 
-
-
 const submitForm = async () => {
-  existingDocument.value = null
+  existingDocument.value = null;
   formDataToSend.value = new FormData(); // Reset del formData ogni volta
 
   if (selectedFile.value) {
@@ -419,12 +402,15 @@ const uploadFile = async (formDataToSend) => {
     const response = await axios.post('/upload', formDataToSend, {
       headers: {
         'Content-Type': 'multipart/form-data'
+      },
+      onUploadProgress: (progressEvent) => {
+        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+        uploadPercentage.value = percentCompleted;
+        console.log(`Upload progress: ${percentCompleted}%`);
       }
     });
 
-    ksdocuments.value.push(response.data);
-
-    startIndividualngestion(response.data.id);
+    toast.add({ severity: 'info', summary: 'Info', detail: 'Uploading done. Ingestion will start in few seconds.', life: 3000 });
     router.push({ name: 'ks-document' });
 
   } catch (error) {