admin/apollo-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 114: Insert progress bar for video upload

Browse Source 
Insert progress bar for video upload
This commit is contained in:
Ferrelli, Emanuele
2025-05-08 15:02:45 +00:00
parent 5b36a053a9 a6492ba0a0
commit ff3cdb4406
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/pages/KsVideos/KsNewVideoForm.vue
View File

@@ -11,7 +11,7 @@
<StepPanels> <StepPanels>
<StepPanel value="1" v-slot="{ activateCallback }"> <StepPanel value="1" v-slot="{ activateCallback }">
<div class="flex flex-col h-48"> <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" style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
:showCancelButton="false" v-model:files="selectedFile" :fileLimit="1" :showCancelButton="false" v-model:files="selectedFile" :fileLimit="1"
accept=".mp3,.mp4,.mkv,.flv,.mov,.ts"> accept=".mp3,.mp4,.mkv,.flv,.mov,.ts">
@@ -139,12 +139,18 @@
</div> </div>
</StepPanel> </StepPanel>
<StepPanel value="3" v-slot="{ activateCallback }"> <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">You can execute the indexing for the following file:</p>
<p v-if="selectedFile" class="text-center">{{ selectedFile.name }}</p> <p v-if="selectedFile" class="text-center">{{ selectedFile.name }}</p>
<div class="flex justify-center mt-4"> <div class="flex justify-center mt-4">
<Button type="submit" label="Index" :fluid="false"></Button> <Button type="submit" label="Index" :fluid="false"></Button>
</div> </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>
<div class="flex justify-between pt-6"> <div class="flex justify-between pt-6">
<Button label="Back" <Button label="Back"
@@ -199,6 +205,7 @@ const showDialog = ref(false);
const existingVideo = ref(null); const existingVideo = ref(null);
const formDataToSend = ref(new FormData()); const formDataToSend = ref(new FormData());
const groupDocType = ref(''); const groupDocType = ref('');
const uploadPercentage = ref(0);
const videoTypeOptions = ref([ const videoTypeOptions = ref([
{ name: 'Functional video', value: 'functional_video' }, { name: 'Functional video', value: 'functional_video' },
@@ -408,6 +415,11 @@ const uploadFile = async (formDataToSend) => {
const response = await axios.post('/upload_video', formDataToSend, { const response = await axios.post('/upload_video', formDataToSend, {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
uploadPercentage.value = percentCompleted;
console.log(`Upload progress: ${percentCompleted}%`);
} }
}); });