fix progress bar

This commit is contained in:
2023-08-28 15:21:10 +10:00
parent 64e45b1892
commit 9197a86670

View File

@@ -19,7 +19,9 @@
@dragover.prevent="handleDragOver"> @dragover.prevent="handleDragOver">
<div <div
class="flex flex-col m-4 border-1 bg-white rounded-xl text-gray-5 px-4 md:px-12 py-4 md:py-8 w-full overflow-hidden"> class="flex flex-col m-4 border-1 bg-white rounded-xl text-gray-5 px-4 md:px-12 py-4 md:py-8 w-full overflow-hidden">
<SMLoading v-if="progressText" overlay :text="progressText" /> <SMLoading v-if="progressText" overlay>{{
progressText
}}</SMLoading>
<h2 class="mb-4">Select or Upload Media</h2> <h2 class="mb-4">Select or Upload Media</h2>
<SMTabGroup v-model="selectedTab" class="flex flex-col flex-1"> <SMTabGroup v-model="selectedTab" class="flex flex-col flex-1">
<SMTab <SMTab
@@ -227,7 +229,11 @@
:style="{ :style="{
width: `${ width: `${
(100 / uploadFileList.length) * (100 / uploadFileList.length) *
(currentUploadFileNum - 1) (currentUploadFileNum - 1) +
(100 /
uploadFileList.length /
100) *
currentUploadFileProgress
}%`, }%`,
}"></div> }"></div>
</div> </div>
@@ -630,6 +636,7 @@ const applicationStore = useApplicationStore();
const progressText = ref(""); const progressText = ref("");
const currentUploadFileNum = ref(0); const currentUploadFileNum = ref(0);
const currentUploadFileProgress = ref(0);
const uploadFileList: Ref<File[]> = ref(null); const uploadFileList: Ref<File[]> = ref(null);
/** /**
@@ -897,15 +904,15 @@ const startFilesUpload = async () => {
progress: (progressEvent) => { progress: (progressEvent) => {
const currentUploadFileNumStr = const currentUploadFileNumStr =
currentUploadFileNum.value.toString(); currentUploadFileNum.value.toString();
currentUploadFileProgress.value = Math.floor(
(progressEvent.loaded / progressEvent.total) *
100,
);
mediaItems.value.every((item, index) => { mediaItems.value.every((item, index) => {
if (item.id == currentUploadFileNumStr) { if (item.id == currentUploadFileNumStr) {
mediaItems.value[ mediaItems.value[
index index
].status = `${Math.floor( ].status = `${currentUploadFileProgress.value}% Uploaded`;
(progressEvent.loaded /
progressEvent.total) *
100,
)}% Uploaded`;
return false; return false;
} }