Added delete record button and redefined stores/services

src/service/KsDocumentService.js

@@ -1,11 +1,20 @@
 import axios from 'axios';
 export const KsDocumentService = {
     getKsDocuments() {
-        return axios.get('/fe-api/ksdocuments')
+        return axios.get('/fe-api/ksdocuments');
     },
     downloadKsDocument(doc) {
-        return axios.post('/fe-api/ksdocuments/downloadKSDocument', doc, { responseType: "blob", });
+        return axios.post('/fe-api/ksdocuments/downloadKSDocument', doc, { responseType: 'blob' });
+    },
+    deleteKsDocumentRecord(requestPayload) {
+        return axios.post('/fe-api/vector-store/deleteRecords', requestPayload);
+    },
+    uploadKsDocument(formData, onUploadProgress) {
+        return axios.post('/upload', formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            },
+            onUploadProgress
+        });
     }
-
+};
-
-}

src/service/KsVideoService.js

@@ -10,6 +10,10 @@ export const KsVideoService = {
     },
 
     downloadKsVideo(video) {
-        return axios.get(`/fe-api/ksvideos/downloadKSVideo`, video, {responseType: 'blob', });
+        return axios.get(`/fe-api/ksvideos/downloadKSVideo`, video, { responseType: 'blob' });
+    },
+
+    deleteKsVideoRecord(requestPayload) {
+        return axios.post('/fe-api/vector-store/deleteVideoRecords', requestPayload);
     }
 };

src/stores/KsDocumentStore.js

@@ -3,34 +3,47 @@ import { computed, ref } from 'vue';
 import { KsDocumentService } from '../service/KsDocumentService';
 import { LoadingStore } from './LoadingStore';
 
-
 export const KsDocumentStore = defineStore('ksdocument_store', () => {
-
+    const lstKsDocument = ref([]);
-    const lstKsDocument = ref([])
+    const selectedKsDocument = ref(null);
-    const selectedKsDocument = ref(null)
+    const loadingStore = LoadingStore();
-    const loadingStore = LoadingStore()
-
 
     async function fetchKsDocument() {
         loadingStore.scenario_loading = true;
-        await KsDocumentService.getKsDocuments().then(resp => {
+        await KsDocumentService.getKsDocuments().then((resp) => {
             lstKsDocument.value = resp.data;
             loadingStore.scenario_loading = false;
         });
-        
     }
     const ksDocument = computed(() => {
-        return lstKsDocument.value
+        return lstKsDocument.value;
-    })
+    });
 
     const getSelectedKsDocument = computed(() => {
-        return selectedKsDocument.value
+        return selectedKsDocument.value;
-    })
+    });
 
-    async function setSelectedKsDocument(ksDoc){
+    async function setSelectedKsDocument(ksDoc) {
-        selectedKsDocument.value = ksDoc
+        selectedKsDocument.value = ksDoc;
-        console.log("selectedExecScenario", selectedKsDocument.value);
+        console.log('selectedExecScenario', selectedKsDocument.value);
     }
- 
+    async function deleteKsDocumentRecord(requestPayload) {
-    return { fetchKsDocument, selectedKsDocument, lstKsDocument, ksDocument, getSelectedKsDocument, setSelectedKsDocument}
+        try {
-  })
+            const response = await KsDocumentService.deleteKsDocumentRecord(requestPayload);
+            return response;
+        } catch (error) {
+            throw error;
+        }
+    }
+
+    async function uploadKsDocument(formData, onUploadProgress) {
+        try {
+            const response = await KsDocumentService.uploadKsDocument(formData, onUploadProgress);
+            return response;
+        } catch (error) {
+            throw error;
+        }
+    }
+
+    return { fetchKsDocument, deleteKsDocumentRecord, uploadKsDocument, selectedKsDocument, lstKsDocument, ksDocument, getSelectedKsDocument, setSelectedKsDocument };
+});

src/stores/KsVideoStore.js

@@ -4,11 +4,9 @@ import { KsVideoService } from '../service/KsVideoService';
 import { LoadingStore } from './LoadingStore';
 
 export const KsVideoStore = defineStore('ksvideo_store', () => {
-
+    const lstKsVideo = ref([]);
-    const lstKsVideo = ref([])
+    const selectedKsVideo = ref(null);
-    const selectedKsVideo = ref(null)
+    const loadingStore = LoadingStore();
-    const loadingStore = LoadingStore()
-
 
     async function fetchKsVideoByGroupId(groupId) {
         try {
@@ -38,5 +36,14 @@ export const KsVideoStore = defineStore('ksvideo_store', () => {
         console.log('selectedExecScenario', selectedKsVideo.value);
     }
 
-    return {fetchKsVideoByGroupId, selectedKsVideo, lstKsVideo, ksVideo, getKsVideoByGroupId, getSelectedKsVideo, setSelectedKsVideo };
+    async function deleteKsVideoRecord(requestPayload) {
+        try {
+            const response = await KsVideoService.deleteKsVideoRecord(requestPayload);
+            return response;
+        } catch (error) {
+            throw error;
+        }
+    }
+
+    return { fetchKsVideoByGroupId, selectedKsVideo, lstKsVideo, ksVideo, getKsVideoByGroupId, getSelectedKsVideo, setSelectedKsVideo, deleteKsVideoRecord };
 });

src/views/pages/KsVideos/KsNewVideoForm.vue

@@ -138,7 +138,9 @@
                 </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 in few minutes.</p>
+                    <p class="text-center">Wait until the upload is completed. You will be automatically redirected in
+                      few
+                      minutes.</p>
                     <ProgressBar :value="uploadPercentage" class="w-full" />
                   </div>
                 </div>
@@ -311,7 +313,7 @@ const onFileRemove = () => {
 };
 
 
-const deleteRecord = (name) => {
+const deleteRecord = async (name) => {
   const videoToDelete = ksVideos.value.find(video => video.name === name);
   if (!videoToDelete) {
     console.error('Video not found');
@@ -327,15 +329,12 @@ const deleteRecord = (name) => {
     ksApplicationName: videoToDelete.ingestionInfo.metadata.KsApplicationName,
   };
 
-  axios.post('/fe-api/vector-store/deleteVideoRecords', requestPayload)
+  try {
-    .then(response => {
+    await ksVideoStore.deleteKsVideoRecord(requestPayload);
-      console.log('Delete resource:', response.data)
+  } catch (error) {
-    })
+    console.error('Error overwriting records: ', error)
-    .catch(error => {
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
-      console.error('Error overwriting records: ', error)
+  }
-      toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
-    });
-
 };
 
 const submitForm = async () => {

src/views/pages/KsVideos/KsVideos.vue

@@ -71,7 +71,8 @@
 			</Column>
 			<Column field="ingestionInfo.metadata.KsDoctype" header="DocType" sortable style="min-width: 12rem">
 				<template #body="{ data }">
-					{{ mapDocType(data.ingestionInfo.metadata.KsDoctype) }}
+					{{data.ingestionInfo.metadata.KsDoctype.replace(/_/g, ' ').replace(/\b\w/g, char =>
+						char.toUpperCase())}}
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
 					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
@@ -96,10 +97,10 @@
 							:disabled="slotProps.data.ingestionStatus === 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS' || slotProps.data.ingestionStatus == 'INGESTING' || slotProps.data.ingestionStatus == 'INGESTION_QUEUE'"
 							:class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }"></Button>
 						<Button type="button" icon="pi pi-trash" rounded
-							@click="confirmDeleteFromVectorStore(slotProps.data.id)"
+							@click="(slotProps.data.ingestionStatus === 'LOADED' || slotProps.data.ingestionStatus === 'ERROR') ? deleteLoadedRecord(slotProps.data.id) : confirmDeleteFromVectorStore(slotProps.data.id)"
 							v-tooltip.left="'Delete the ingested Record'"
-							:disabled="slotProps.data.ingestionStatus !== 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS'"
+							:disabled="(slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' && slotProps.data.ingestionStatus !== 'ERROR') || slotProps.data.ingestionStatus == 'IN PROGRESS'"
-							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
+							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' }"></Button>
 
 						<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
 							v-tooltip.left="'Similarity Search'"
@@ -107,11 +108,17 @@
 							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
 						<Button type="button" icon="pi pi-download" rounded @click="downloadFile(slotProps.data)"
 							v-tooltip.left="'Download file'" class="mr-2 p-button"></Button>
+						<!-- <Button type="button" icon="pi pi-play" rounded @click="playVideo(slotProps.data)"
+							v-tooltip.left="'Play Video'" class="mr-2 p-button"></Button> -->
 					</div>
 				</template>
 			</Column>
 
 		</DataTable>
+		<!-- <Dialog v-model:visible="isVideoPlayerVisible" :header="selectedVideo?.fileName || 'Video Player'" :modal="true"
+			:closable="true" :style="{ width: '80vw' }">
+			<video v-if="selectedVideo" :src="selectedVideo.filePath" controls autoplay style="width: 100%;"></video>
+		</Dialog> -->
 	</div>
 </template>
 
@@ -121,13 +128,14 @@ import axios from 'axios';
 import moment from 'moment';
 import { useConfirm } from "primevue/useconfirm";
 import { useToast } from 'primevue/usetoast';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import Button from 'primevue/button';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import DatePicker from 'primevue/datepicker';
+import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
 import Select from 'primevue/select';
 import Tag from 'primevue/tag';
@@ -155,6 +163,35 @@ const loadingStore = LoadingStore();
 const fe_status = ref('');
 let updateTimer = null; // Variabile per memorizzare l'ID del timer
 
+const isVideoPlayerVisible = ref(false);
+const selectedVideoUrl = ref(null);
+
+const playVideo = async (video) => {
+	try {
+		// 1) Scarica il video come arraybuffer o blob
+		const response = await KsVideoService.downloadKsVideo(video)
+		// 2) Leggi il content-type dinamico
+		const contentType = response.headers['content-type'] || 'video/mp4'
+		// 3) Crea il blob
+		const blob = new Blob([response.data], { type: contentType })
+		// 4) Crea e registra l'ObjectURL
+		const url = window.URL.createObjectURL(blob)
+		blobUrls.add(url)
+		// 5) Mostra il player
+		selectedVideoUrl.value = url
+		isVideoPlayerVisible.value = true
+
+	} catch (err) {
+		console.error('Error while preparing video for playback:', err)
+		toast.add({
+			severity: 'error',
+			summary: 'Playback Error',
+			detail: 'Impossibile caricare il video.',
+			life: 3000
+		})
+	}
+}
+
 const initFilters = () => {
 	filters.value = {
 		global: { value: null, matchMode: FilterMatchMode.CONTAINS },
@@ -199,8 +236,6 @@ const onRowCollapse = (event) => {
 };
 
 
-// watch(() => userPrefStore.getSelApp, updateVideos, { immediate: true });
-
 function updateVideos() {
 	ksVideoStore.fetchKsVideoByGroupId(route.params.groupId).then(() => {
 		ksVideos.value = getCustomDatewithAllResponse();
@@ -214,9 +249,6 @@ const getCustomDatewithAllResponse = () => {
 	});
 };
 
-const allVideosIngested = computed(() => {
-	return ksVideos.value && ksVideos.value.every(doc => doc.ingestionStatus == 'INGESTED');
-});
 
 const getStatus = (data) => {
 	if (data.ingestionStatus == 'INGESTED') {
@@ -235,9 +267,6 @@ const updateFilterModel = () => {
 	console.log("updateFilterModel")
 }
 
-// Variabile reattiva per il nome del file
-const filename = ref("");
-
 // Funzione per scaricare il file
 const downloadFile = async (video) => {
 	console.log("video", video)
@@ -330,6 +359,32 @@ const confirmDeleteFromVectorStore = (id) => {
 	})
 };
 
+// Funzione per cancellare record in stato LOADED
+const deleteLoadedRecord = async (id) => {
+	toast.add({ severity: 'info', summary: 'Info', detail: 'Deleting record...', life: 3000 });
+	const videoToDelete = ksVideos.value.find(video => video.id === id);
+	if (!videoToDelete) {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Video not found', life: 3000 });
+		return;
+	}
+	const requestPayload = {
+		ksDocumentId: videoToDelete.id,
+		ksIngestionInfoId: videoToDelete.ingestionInfo.id,
+		ksDocType: videoToDelete.ingestionInfo.metadata.KsDoctype,
+		ksDocSource: videoToDelete.ingestionInfo.metadata.KsDocSource,
+		ksFileSource: videoToDelete.ingestionInfo.metadata.KsFileSource,
+		ksApplicationName: videoToDelete.ingestionInfo.metadata.KsApplicationName,
+	};
+	try {
+		await ksVideoStore.deleteKsVideoRecord(requestPayload);
+		toast.add({ severity: 'success', summary: 'Success', detail: 'Record deleted', life: 3000 });
+		updateVideos();
+	} catch (error) {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Error deleting record', life: 3000 });
+	}
+};
+
+
 //ingestion
 const startIndividualngestion = (id) => {
 	toast.add({ severity: 'info', summary: 'Info', detail: 'Starting indexing...', life: 3000 });
@@ -358,28 +413,6 @@ const startIndividualngestion = (id) => {
 		});
 };
 
-const startlngestion = () => {
-	axios.get('/test/ingestion_loop')
-		.then(response => {
-			ingestionResult.value = response.data;
-			if (response.data.status == "OK") {
-				ksVideos.value.forEach(element => {
-					if (response.data.ingestedVideoId.includes(element.id)) {
-						element.status = "INGESTED"
-					}
-				});
-			} else {
-				ingestionResult.value = `Error: ${response.data.message}`;
-			}
-
-			//ingestionDialogVisible.value = true;
-		})
-		.catch(error => {
-			//ingestionDialogVisible.value = true;
-			console.error('Error ingesting records: ', error)
-			toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Ingestion', life: 3000 });
-		});
-};
 
 //new record creation
 const newKsVideo = () => {
@@ -413,13 +446,10 @@ const mapDocType = (type) => {
 	return mapping[type] || type;
 };
 
-// Function to format date string
 function formatDate(dateString) {
-	// Parse the date string using moment
 	return moment(dateString).format('DD/MM/YYYY');
 }
 
-
 </script>
 
 <style scoped>

src/views/pages/ksDocuments/KsDocuments.vue

@@ -94,10 +94,10 @@
 							:disabled="slotProps.data.ingestionStatus === 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS' || slotProps.data.ingestionStatus == 'INGESTING' || slotProps.data.ingestionStatus == 'INGESTION_QUEUE'"
 							:class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }"></Button>
 						<Button type="button" icon="pi pi-trash" rounded
-							@click="confirmDeleteFromVectorStore(slotProps.data.id)"
+							@click="(slotProps.data.ingestionStatus === 'LOADED' || slotProps.data.ingestionStatus === 'ERROR') ? deleteLoadedRecord(slotProps.data.id) : confirmDeleteFromVectorStore(slotProps.data.id)"
 							v-tooltip.left="'Delete the ingested Record'"
-							:disabled="slotProps.data.ingestionStatus !== 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS'"
+							:disabled="(slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' && slotProps.data.ingestionStatus !== 'ERROR') || slotProps.data.ingestionStatus == 'IN PROGRESS'"
-							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
+							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' && slotProps.data.ingestionStatus !== 'ERROR' }"></Button>
 
 						<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
 							v-tooltip.left="'Similarity Search'"
@@ -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, onUnmounted} from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import Button from 'primevue/button';
@@ -324,6 +324,30 @@ const confirmDeleteFromVectorStore = (id) => {
 	})
 };
 
+// Funzione per cancellare record in stato LOADED
+const deleteLoadedRecord = async (id) => {
+	toast.add({ severity: 'info', summary: 'Info', detail: 'Deleting record...', life: 3000 });
+	const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
+	if (!documentToDelete) {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Document not found', life: 3000 });
+		return;
+	}
+	const requestPayload = {
+		ksDocumentId: documentToDelete.id,
+		ksIngestionInfoId: documentToDelete.ingestionInfo.id,
+		ksDoctype: documentToDelete.ingestionInfo.metadata.KsDoctype,
+		ksDocSource: documentToDelete.ingestionInfo.metadata.KsDocSource,
+		ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
+		ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
+	};
+	try {
+		await ksDocumentStore.deleteKsDocumentRecord(requestPayload);
+		toast.add({ severity: 'success', summary: 'Success', detail: 'Record deleted', life: 3000 });
+	} catch (error) {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Error deleting record', life: 3000 });
+	}
+};
+
 //ingestion
 const startIndividualngestion = (id) => {
 	toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion...', life: 3000 });

src/views/pages/ksDocuments/KsNewDocumentForm.vue

@@ -19,9 +19,9 @@
         <StepPanels>
           <StepPanel value="1" v-slot="{ activateCallback }">
             <div class="flex flex-col h-48">
-              <FileUpload ref="fileUpload" :maxFileSize="52428800" chooseLabel="Select File (max 50 MB)" class="p-button"
+              <FileUpload ref="fileUpload" :maxFileSize="52428800" chooseLabel="Select File (max 50 MB)"
-                style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
+                class="p-button" style="width: 150px;" @select="onFileSelect" @remove="onFileRemove"
-                :showCancelButton="false" v-model:files="selectedFile" :fileLimit=1>
+                :showUploadButton="false" :showCancelButton="false" v-model:files="selectedFile" :fileLimit=1>
                 <template #empty>
                   <div class="flex items-center justify-center flex-col">
                     <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
@@ -101,8 +101,8 @@
                           <label for="defaultChunkSize">Default Chunk Size</label>
                           <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                             v-tooltip="'Define the default size for chunks of data'"></i>
-                          <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required
+                          <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full"
-                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
+                            :disabled="userPrefStore.user.role !== 'ADMIN'" />
                         </span>
                         <small v-if="errors.defaultChunkSize" class="text-red-500">{{ errors.defaultChunkSize }}</small>
                       </div>
@@ -111,8 +111,8 @@
                           <label for="minChunkSize">Min Chunk Size</label>
                           <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                             v-tooltip="'Specify the minimum allowable size for chunks'"></i>
-                          <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" 
+                          <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full"
-                          :disabled="userPrefStore.user.role !== 'ADMIN'"/>
+                            :disabled="userPrefStore.user.role !== 'ADMIN'" />
                         </span>
                         <small v-if="errors.minChunkSize" class="text-red-500">{{ errors.minChunkSize }}</small>
                       </div>
@@ -122,7 +122,7 @@
                           <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                             v-tooltip="'Define the minimum chunk size that can be embedded'"></i>
                           <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required
-                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
+                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'" />
                         </span>
                         <small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
                         }}</small>
@@ -133,7 +133,7 @@
                           <i class="pi pi-info-circle text-violet-600 cursor-pointer"
                             v-tooltip="'Set the maximum number of chunks allowed'"></i>
                           <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required
-                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
+                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'" />
                         </span>
                         <small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
                         }}</small>
@@ -187,19 +187,17 @@
 </template>
 
 <script setup>
-import axios from 'axios';
 import Step from 'primevue/step';
 import StepList from 'primevue/steplist';
 import StepPanel from 'primevue/steppanel';
 import StepPanels from 'primevue/steppanels';
 import Stepper from 'primevue/stepper';
 import { useToast } from 'primevue/usetoast';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { KsDocumentStore } from '../../../stores/KsDocumentStore';
 import { LoadingStore } from '../../../stores/LoadingStore';
 import { UserPrefStore } from '../../../stores/UserPrefStore';
-import { onMounted } from 'vue';
 
 const toast = useToast();
 const router = useRouter();
@@ -331,7 +329,7 @@ const onFileRemove = () => {
   });
 };
 
-const deleteRecord = (name) => {
+const deleteRecord = async (name) => {
   const documentToDelete = ksdocuments.value.find(doc => doc.name === name);
   if (!documentToDelete) {
     console.error('Document not found');
@@ -347,15 +345,12 @@ const deleteRecord = (name) => {
     ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
   };
 
-  axios.post('/fe-api/vector-store/deleteRecords', requestPayload)
+  try {
-    .then(response => {
+    await ksDocumentStore.deleteKsDocumentRecord(requestPayload);
-      console.log('Delete resource:', response.data)
+  } catch (error) {
-    })
+    console.error('Error overwriting records: ', error)
-    .catch(error => {
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
-      console.error('Error overwriting records: ', error)
+  }
-      toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
-    });
-
 };
 
 
@@ -399,20 +394,13 @@ const cancelOverwrite = () => {
 
 const uploadFile = async (formDataToSend) => {
   try {
-    const response = await axios.post('/upload', formDataToSend, {
+    await ksDocumentStore.uploadKsDocument(formDataToSend, (progressEvent) => {
-      headers: {
+      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-        'Content-Type': 'multipart/form-data'
+      uploadPercentage.value = percentCompleted;
-      },
+      console.log(`Upload progress: ${percentCompleted}%`);
-      onUploadProgress: (progressEvent) => {
-        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-        uploadPercentage.value = percentCompleted;
-        console.log(`Upload progress: ${percentCompleted}%`);
-      }
     });
-
     toast.add({ severity: 'info', summary: 'Info', detail: 'Uploading done. Ingestion will start in few seconds.', life: 3000 });
     router.push({ name: 'ks-document' });
-
   } catch (error) {
     console.error('Ingestion failed:', error);
   }