Uppy: ProgressBar plugin doesn't show the progress bar anymore

Created on 4 May 2018 · 4Comments · Source: transloadit/uppy

Here is the minimal self-contained example that reproduces the problem (replace the XHRUpload declaration with your own custom endpoint):

<html>
  <head>
    <script src="https://unpkg.com/[email protected]/dist/uppy.min.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/uppy.min.css" rel="stylesheet" />
  </head>

  <body>
    <div class="upload"></div>

    <script>
      var uppy = Uppy.Core()
        .use(Uppy.FileInput, {
          target: '.upload',
        })
        .use(Uppy.XHRUpload, {
          endpoint: 'http://localhost:9292',
          getResponseData: function (responseText, response) { return {} },
        })
        .use(Uppy.ProgressBar, {
          target: '.upload',
        })

      uppy.run()
    </script>
  </body>
</html>

On version 0.22.0 this shows the progress bar, but on 0.24.2 nothing is shown.

Bug WIP

Source

janko

Most helpful comment

@janko-m 0.24.3 is live! should be fixed, please re-open if not.

arturi on 10 May 2018

🎉2

All 4 comments

I believe it’s a regression that was accidentally introduced when we added automated !important declarations in CSS. And since ProgressBar relies on setting width: {progressPercentage} in inline styles, it broke things, since !important has more weight. I’ve fixed this https://github.com/transloadit/uppy/commit/bb4376571eba3adf017c3a26fdc4e28752548537, but haven’t release a patch yet, will do soon 👌

arturi on 5 May 2018

Great, thanks for the quick fix!

janko on 5 May 2018

@janko-m 0.24.3 is live! should be fixed, please re-open if not.

arturi on 10 May 2018

🎉2

Hi, i'm currently trying to use your Dashboard's example javascript snippet : https://uppy.io/examples/dashboard/, and I'm not able to see the progress bar...
Any idea ?
Running on 0.24.4