feat: Display Upload Progress as Percentage and File Size / Total File Size (#3111)

pull/3175/head
Alex Yong 2024-04-28 14:40:24 -04:00 committed by GitHub
parent e2d72706cc
commit 236ca637f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 3 deletions

View File

@ -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
} }
}, },
}, },

View File

@ -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;
}, },