Merged PR 114: Insert progress bar for video upload

Insert progress bar for video upload

src/views/pages/KsVideos/KsNewVideoForm.vue

@@ -11,7 +11,7 @@
         <StepPanels>
           <StepPanel value="1" v-slot="{ activateCallback }">
             <div class="flex flex-col h-48">
-              <FileUpload ref="fileUpload" chooseLabel="Select Video" class="p-button"
+              <FileUpload ref="fileUpload" :maxFileSize="1000000000000" chooseLabel="Select Video" class="p-button"
                 style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
                 :showCancelButton="false" v-model:files="selectedFile" :fileLimit="1"
                 accept=".mp3,.mp4,.mkv,.flv,.mov,.ts">
@@ -139,12 +139,18 @@
               </div>
             </StepPanel>
             <StepPanel value="3" v-slot="{ activateCallback }">
-              <div class="flex flex-col mt-8 h-48">
+              <div class="flex flex-col mt-8 h-64">
                 <p v-if="selectedFile" class="text-center">You can execute the indexing 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="Index" :fluid="false"></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 indexing is completed. You will be automatically redirected.</p>
+                    <ProgressBar :value="uploadPercentage" class="w-full" />
+                  </div>
+                </div>
               </div>
               <div class="flex justify-between pt-6">
                 <Button label="Back"
@@ -199,6 +205,7 @@ const showDialog = ref(false);
 const existingVideo = ref(null);
 const formDataToSend = ref(new FormData());
 const groupDocType = ref('');
+const uploadPercentage = ref(0);
 
 const videoTypeOptions = ref([
   { name: 'Functional video', value: 'functional_video' },
@@ -408,6 +415,11 @@ const uploadFile = async (formDataToSend) => {
     const response = await axios.post('/upload_video', 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}%`);
       }
     });