Progress event arguments bug

[BlueBazze]

Problem

The progress event seems to fire with an object as the only argument: {"IsTrusted":false} The actual upload seems to work fine, without problems.

Code

this.uploader.on('progress', (progress) => {
  console.log(JSON.stringify(progress))
})

Output

{"IsTrusted":false}

Affected versions

I have tried versions 2.3.1, 3.2.0 & 3.1.0 The same outcome on all three versions

My environment

Web framework: Nuxt 2, webpack 4 I've tested this both in production and locally, with the same outcome.

Source code

https://gist.github.com/BlueBazze/4f05a44d5e5712b3fdfa7e50aed2ac8d

The function responsible for uploading the video is on line 247: https://gist.github.com/BlueBazze/4f05a44d5e5712b3fdfa7e50aed2ac8d#file-uploadupchunk-vue-L247

What i've tried

Originally i was using the version 2.3.1 because of another error last year: https://github.com/muxinc/upchunk/issues/88 Tried to update to both version 3.1.0 and 3.2.0

Already tried the different imports * as UpChunk, {UpChunk} & {createUpload} Tried all three js versions mjs, cjs & regular

The keyword IsTrusted does not appear as part of UpChunk source. Did see it in the dist js files being initiated as a property on a class (if im not mistaken)

Cant deny it might be a problem on my end, but i have gone through everything and i dont see the problem.

[dylanjha]

@BlueBazze thanks for opening -- can you try the console.log without JSON.stringify? Update to this:

this.uploader.on('progress', (progress) => {
  console.log(progress)
})

[BlueBazze]

@dylanjha Thanks for the swift response. The outcome is the same. Except now theres a little arrow i can click to expand the object tree. Still only contains a single value "IsTrusted": false

[BlueBazze]

If i try to render this.uploader.progress?.IsTrusted in the component, it will just render false

[mmcc]

You're not finding IsTrusted in the UpChunk source because that key/value is coming from the native Event implementation. Just say that to say, that's a bit of a red herring here I think, all that means is that the event didn't come from an explicit user action.

Any chance you can put this reduced test case somewhere we can play with it like JSFiddle or Codesandbox?

[BlueBazze]

https://codesandbox.io/p/sandbox/frosty-resonance-dzwhkc

All you need to do is insert an upload url on line 54 in components/UploadComponent.vue

[mmcc]

Ugh I'm chasing down what in the world is going on with this import mess, because I'm running into that original thing you mentioned as a footnote re: import errors.

That being said, while I look into that, if you have an environment where this is working, the detail value is going to be what you want, didn't notice that missing in your examples initially. Can you try logging that and letting us know what you see?

this.uploader.on('progress', (progress) => {
  console.log(progress.detail)
  this.upload.progress = progress
})

[BlueBazze]

Nuxt is heavily biased towards esm. The import import * as UpChunk from '@mux/upchunk/dist/upchunk' or with .mjs should work

I didnt actually look at the prototype object before, but the value seems to be present as you described. Code

        this.uploader.on('progress', (progress) => {
          console.log(JSON.stringify(progress), { progress })
          this.upload.progress = progress.detail
        })

[mmcc]

Great! Going to close this one, and #88 is where we'll continue to push on the ESM work.

[BlueBazze]

Thanks for your help