feat: Display Upload Progress as Percentage and File Size / Total File Size (#3111)
parent
e2d72706cc
commit
236ca637f9
|
@ -10,6 +10,12 @@
|
||||||
<div class="upload-info">
|
<div class="upload-info">
|
||||||
<div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
|
<div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
|
||||||
<div class="upload-eta">{{ formattedETA }} remaining</div>
|
<div class="upload-eta">{{ formattedETA }} remaining</div>
|
||||||
|
<div class="upload-percentage">
|
||||||
|
{{ getProgressDecimal }}% Completed
|
||||||
|
</div>
|
||||||
|
<div class="upload-fraction">
|
||||||
|
{{ getTotalProgressBytes }} / {{ getTotalSize }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="action"
|
class="action"
|
||||||
|
@ -72,6 +78,10 @@ export default {
|
||||||
"filesInUploadCount",
|
"filesInUploadCount",
|
||||||
"uploadSpeed",
|
"uploadSpeed",
|
||||||
"getETA",
|
"getETA",
|
||||||
|
"getProgress",
|
||||||
|
"getProgressDecimal",
|
||||||
|
"getTotalProgressBytes",
|
||||||
|
"getTotalSize",
|
||||||
]),
|
]),
|
||||||
...mapWritableState(useFileStore, ["reload"]),
|
...mapWritableState(useFileStore, ["reload"]),
|
||||||
formattedETA() {
|
formattedETA() {
|
||||||
|
@ -91,7 +101,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(useUploadStore, ["reset"]), // Mapping reset action from upload store
|
...mapActions(useUploadStore, ["reset"]), // Mapping reset action from upload store
|
||||||
toggle: function () {
|
toggle: function () {
|
||||||
this.open = !this.open;
|
this.open = !this.open;
|
||||||
},
|
},
|
||||||
|
@ -100,8 +110,8 @@ export default {
|
||||||
abortAllUploads();
|
abortAllUploads();
|
||||||
buttons.done("upload");
|
buttons.done("upload");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.reset(); // Resetting the upload store state
|
this.reset(); // Resetting the upload store state
|
||||||
this.reload = true; // Trigger reload in the file store
|
this.reload = true; // Trigger reload in the file store
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -13,6 +13,15 @@ const beforeUnload = (event: Event) => {
|
||||||
// event.returnValue = "";
|
// event.returnValue = "";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Utility function to format bytes into a readable string
|
||||||
|
function formatSize(bytes: number): string {
|
||||||
|
if (bytes === 0) return "0 Bytes";
|
||||||
|
|
||||||
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||||
|
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
export const useUploadStore = defineStore("upload", {
|
export const useUploadStore = defineStore("upload", {
|
||||||
// convert to a function
|
// convert to a function
|
||||||
state: (): {
|
state: (): {
|
||||||
|
@ -47,6 +56,31 @@ export const useUploadStore = defineStore("upload", {
|
||||||
const sum = state.progress.reduce((acc, val) => +acc + +val) as number;
|
const sum = state.progress.reduce((acc, val) => +acc + +val) as number;
|
||||||
return Math.ceil((sum / totalSize) * 100);
|
return Math.ceil((sum / totalSize) * 100);
|
||||||
},
|
},
|
||||||
|
getProgressDecimal: (state) => {
|
||||||
|
if (state.progress.length === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalSize = state.sizes.reduce((a, b) => a + b, 0);
|
||||||
|
|
||||||
|
// TODO: this looks ugly but it works with ts now
|
||||||
|
const sum = state.progress.reduce((acc, val) => +acc + +val) as number;
|
||||||
|
return ((sum / totalSize) * 100).toFixed(2);
|
||||||
|
},
|
||||||
|
getTotalProgressBytes: (state) => {
|
||||||
|
if (state.progress.length === 0 || state.sizes.length === 0) {
|
||||||
|
return "0 Bytes";
|
||||||
|
}
|
||||||
|
const sum = state.progress.reduce((acc, val) => +acc + +val, 0) as number;
|
||||||
|
return formatSize(sum);
|
||||||
|
},
|
||||||
|
getTotalSize: (state) => {
|
||||||
|
if (state.sizes.length === 0) {
|
||||||
|
return "0 Bytes";
|
||||||
|
}
|
||||||
|
const totalSize = state.sizes.reduce((a, b) => a + b, 0);
|
||||||
|
return formatSize(totalSize);
|
||||||
|
},
|
||||||
filesInUploadCount: (state) => {
|
filesInUploadCount: (state) => {
|
||||||
return Object.keys(state.uploads).length + state.queue.length;
|
return Object.keys(state.uploads).length + state.queue.length;
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue