fix: file upload rate displays NaN instead of an actual value (#1777)

src/components/TheTopbar.vue

@@ -110,7 +110,7 @@ import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { validGcodeExtensions } from '@/store/variables'
 import Component from 'vue-class-component'
-import axios from 'axios'
+import axios, { AxiosProgressEvent } from 'axios'
 import { formatFilesize } from '@/plugins/helpers'
 import TheTopCornerMenu from '@/components/TheTopCornerMenu.vue'
 import TheSettingsMenu from '@/components/TheSettingsMenu.vue'
@@ -128,10 +128,6 @@ type uploadSnackbar = {
     speed: number
     total: number
     cancelTokenSource: any
-    lastProgress: {
-        time: number
-        loaded: number
-    }
 }
 
 @Component({
@@ -162,10 +158,6 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         speed: 0,
         total: 0,
         cancelTokenSource: null,
-        lastProgress: {
-            time: 0,
-            loaded: 0,
-        },
     }
 
     formatFilesize = formatFilesize
@@ -317,8 +309,6 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         this.uploadSnackbar.status = true
         this.uploadSnackbar.percent = 0
         this.uploadSnackbar.speed = 0
-        this.uploadSnackbar.lastProgress.loaded = 0
-        this.uploadSnackbar.lastProgress.time = 0
 
         formData.append('file', file, filename)
         formData.append('print', 'true')
@@ -329,18 +319,10 @@ export default class TheTopbar extends Mixins(BaseMixin) {
                 .post(this.apiUrl + '/server/files/upload', formData, {
                     cancelToken: this.uploadSnackbar.cancelTokenSource.token,
                     headers: { 'Content-Type': 'multipart/form-data' },
-                    onUploadProgress: (progressEvent: ProgressEvent) => {
-                        this.uploadSnackbar.percent = (progressEvent.loaded * 100) / progressEvent.total
-                        if (this.uploadSnackbar.lastProgress.time) {
-                            const time = progressEvent.timeStamp - this.uploadSnackbar.lastProgress.time
-                            const data = progressEvent.loaded - this.uploadSnackbar.lastProgress.loaded
-
-                            if (time) this.uploadSnackbar.speed = data / (time / 1000)
-                        }
-
-                        this.uploadSnackbar.lastProgress.time = progressEvent.timeStamp
-                        this.uploadSnackbar.lastProgress.loaded = progressEvent.loaded
-                        this.uploadSnackbar.total = progressEvent.total
+                    onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+                        this.uploadSnackbar.percent = (progressEvent.progress ?? 0) * 100
+                        this.uploadSnackbar.speed = progressEvent.rate ?? 0
+                        this.uploadSnackbar.total = progressEvent.total ?? 0
                     },
                 })
                 .then((result) => {

src/components/gcodeviewer/Viewer.vue

@@ -277,7 +277,7 @@
 import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import GCodeViewer from '@sindarius/gcodeviewer'
-import axios from 'axios'
+import axios, { AxiosProgressEvent } from 'axios'
 import { formatFilesize } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import CodeStream from '@/components/gcodeviewer/CodeStream.vue'
@@ -304,10 +304,6 @@ interface downloadSnackbar {
     speed: number
     total: number
     cancelTokenSource: any
-    lastProgress: {
-        time: number
-        loaded: number
-    }
 }
 
 let viewer: any = null
@@ -357,10 +353,6 @@ export default class Viewer extends Mixins(BaseMixin) {
         speed: 0,
         total: 0,
         cancelTokenSource: {},
-        lastProgress: {
-            time: 0,
-            loaded: 0,
-        },
     }
 
     private excludeObject = {
@@ -634,28 +626,17 @@ export default class Viewer extends Mixins(BaseMixin) {
     async loadFile(filename: string) {
         this.downloadSnackbar.status = true
         this.downloadSnackbar.speed = 0
-        this.downloadSnackbar.lastProgress.time = 0
         this.downloadSnackbar.filename = filename.startsWith('gcodes/') ? filename.slice(7) : filename
         const CancelToken = axios.CancelToken
         this.downloadSnackbar.cancelTokenSource = CancelToken.source()
         const text = await axios
             .get(this.apiUrl + '/server/files/' + encodeURI(filename), {
                 cancelToken: this.downloadSnackbar.cancelTokenSource.token,
                 responseType: 'blob',
-                onDownloadProgress: (progressEvent) => {
-                    this.downloadSnackbar.percent = (progressEvent.loaded * 100) / progressEvent.total
-                    if (this.downloadSnackbar.lastProgress.time) {
-                        const time = progressEvent.timeStamp - this.downloadSnackbar.lastProgress.time
-                        const data = progressEvent.loaded - this.downloadSnackbar.lastProgress.loaded
-
-                        if (time > 1000 || this.downloadSnackbar.speed === 0) {
-                            this.downloadSnackbar.speed = data / (time / 1000)
-                            this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp
-                            this.downloadSnackbar.lastProgress.loaded = progressEvent.loaded
-                        }
-                    } else this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp
-
-                    this.downloadSnackbar.total = progressEvent.total
+                onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
+                    this.downloadSnackbar.percent = (progressEvent.progress ?? 0) * 100
+                    this.downloadSnackbar.speed = progressEvent.rate ?? 0
+                    this.downloadSnackbar.total = progressEvent.total ?? 0
                 },
             })
             .then((res) => res.data.text())

src/components/panels/Machine/ConfigFilesPanel.vue

@@ -601,10 +601,6 @@ interface uploadSnackbar {
     number: number
     max: number
     cancelTokenSource: any
-    lastProgress: {
-        time: number
-        loaded: number
-    }
 }
 
 interface draggingFile {
@@ -719,10 +715,6 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin, ThemeMixin) {
         number: 0,
         max: 0,
         cancelTokenSource: {},
-        lastProgress: {
-            time: 0,
-            loaded: 0,
-        },
     }
     private draggingFile: draggingFile = {
         item: {

src/store/files/actions.ts

@@ -10,7 +10,7 @@ import {
 import { RootState } from '@/store/types'
 import i18n from '@/plugins/i18n'
 import { hiddenDirectories, validGcodeExtensions } from '@/store/variables'
-import axios from 'axios'
+import axios, { AxiosProgressEvent } from 'axios'
 import { BatchMessage } from '@/plugins/webSocketClient'
 
 export const actions: ActionTree<FileState, RootState> = {
@@ -316,34 +316,17 @@ export const actions: ActionTree<FileState, RootState> = {
         await commit('uploadSetFilename', payload.file.name)
         await commit('uploadSetShow', true)
 
-        let lastTime = 0
-        let lastLoaded = 0
-
         return new Promise((resolve) => {
             axios
                 .post(apiUrl + '/server/files/upload', formData, {
                     cancelToken: cancelTokenSource.token,
                     headers: { 'Content-Type': 'multipart/form-data' },
-                    onUploadProgress: (progressEvent: any) => {
-                        const percent = (progressEvent.loaded * 100) / progressEvent.total
+                    onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+                        const percent = (progressEvent.progress ?? 0) * 100
                         commit('uploadSetPercent', percent)
 
-                        if (lastTime === 0) {
-                            lastTime = progressEvent.timeStamp
-                            lastLoaded = progressEvent.loaded
-
-                            return
-                        }
-
-                        const time = progressEvent.timeStamp - lastTime
-                        if (time < 1000) return
-
-                        const data = progressEvent.loaded - lastLoaded
-                        const speed = data / (time / 1000)
-                        commit('uploadSetSpeed', speed)
-
-                        lastTime = progressEvent.timeStamp
-                        lastLoaded = progressEvent.loaded
+                        const rate = progressEvent.rate ?? 0
+                        commit('uploadSetSpeed', rate)
                     },
                 })
                 .then((result: any) => {