Status bar timeleft NaN

[ilic993]

Initial checklist

• [X] I understand this is a bug report and questions should be posted in the Community Forum
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

I am sorry for bringing this up again as i see it was closed multiple times before. Okay, so I am using vuejs3 and have a uppy dashboard nested inside a custom modal (for some specific options, I can't use a built in modal) I am also using two StatusBars one in the Dashboard itself (the default one) and one I created additionally that would show up if the modal is closed. Everything looks fine and the timeleft in the Dashboard itself works as intended until I close the modal, now custom StatusBar shows up with the same data and also displaying the time left, the issue starts when I bring back the main modal that will show NaN for the timeleft in its own StatusBar like so: 396 MB of 2.9 GB · NaNh NaNm left

I see other issue tickets about this and the fixes but it seems im hitting a specific use case here.

Im running: "@uppy/core": "^3.3.1", "@uppy/dashboard": "^3.4.2", "@uppy/drag-drop": "^3.0.2", "@uppy/progress-bar": "^3.0.2", "@uppy/status-bar": "^3.2.2", "@uppy/vue": "^1.0.2", "@uppy/webcam": "^3.3.1", "@uppy/xhr-upload": "^3.3.1",

<dashboard ref="dash" :uppy="uppy" :props="{ theme: 'dark', showLinkToFileUploadResult: true, showProgressDetails: true, }" />

uppy.use(StatusBar, { target: '#external-statusbar', showProgressDetails: true })

This will happen for every next upload as well, at first it would look okay and after closing and opening the modal timeleft will be displayed as NaN.

Expected behavior

Time left should be displayed correctly at all times.

Actual behavior

After closing and opening the main modal timeleft data is lost and will show NaN instead. (All other data is displayed correctly.)

[arturi]

Hi, we just tried to reproduce again with the team, and the first time I was able to, then I cleared cache (re-built local files) and the issue is gone, tried multiple StatusBars, plain JS, React, Vue — shows correct ETA, no NaNs.

Could you try removing your node_modules (rm -rf node_modules) and yarn / npm install again? If still experiencing the issue, could you try to create a reproducible example we could access, on https://codesandbox.io/ for instance?

[ilic993]

@arturi Hello mate, thanks for replying to my issue and taking time to investigate. I managed to setup a sandbox of the issue which you can find here: https://codesandbox.io/s/uppy-vue-example-forked-rpsmd2?file=/src/components/UploadComponent.vue

To reproduce add a working endpoint URL, test by upload a bigger file so you have time to hide the modal and show it again with the click of the button. It will display NaN for timeleft variables (In the main StatusBar of Dashboard).

While trying to setup this sandbox I noticed that it did work as intended in the previous versions of the @uppy/core (1.0.0 iirc).

[ilic993]

@arturi @aduh95 Just wanted to say thank you for going through with my issue and finding the time to investigate and fix it, I appreciate you guys very much. Best wishes ♥.