# Progress bar percentage and text update manually

**URL:** <https://community.transloadit.com/t/progress-bar-percentage-and-text-update-manually/15173>\
**Category:** Uppy\
**Created:** [December 20, 2019, 6:35am UTC](https://community.transloadit.com/t/progress-bar-percentage-and-text-update-manually/15173 "2019-12-20T06:35:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![vietnguyen09](https://avatars.discourse-cdn.com/v4/letter/v/e36b37/32.png) [@vietnguyen09](https://community.transloadit.com/u/vietnguyen09)\
**Post date:** [December 20, 2019, 6:35am UTC](https://community.transloadit.com/t/progress-bar-percentage-and-text-update-manually/15173/1 "2019-12-20T06:35:29Z")

</div>

Hi,

Because I’m using Uppy for upload file to CloudFlare stream, after upload success CloudFlare will return encoding progress. So I need to change the text `Uploading...` to `Encoding...` and set progress bar percentage manually, but my code is not updated percentage, progress bar always show 100%.

```
uppy.on('upload-success', (file, response) => {
    if(typeof response.uploadURL !== "undefined")
    {
      uppy.setFileState(file.id, {
          progress: {
              uploadComplete: false,
              uploadStarted: true,
              percentage: response.result.status.pctComplete
          }
      });
    }
});

```

Can anyone help?

---

<div class="post-metadata">

**Author:** ![ajkachnic](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/ajkachnic/32/260_2.png) [@ajkachnic](https://community.transloadit.com/u/ajkachnic)\
**Post date:** [July 10, 2020, 7:26pm UTC](https://community.transloadit.com/t/progress-bar-percentage-and-text-update-manually/15173/2 "2020-07-10T19:26:10Z")

</div>

I know this is an old question, but I still hope I can clear it up

After digging through the docs, I found code that does something similar:

```javascript
// We use Object.assign({}, obj) to create a copy of `obj`.
const updatedFiles = Object.assign({}, uppy.getState().files)
// We use Object.assign({}, obj, update) to create an altered copy of `obj`.
const updatedFile = Object.assign({}, updatedFiles[fileID], {
  progress: Object.assign({}, updatedFiles[fileID].progress, {
    bytesUploaded: data.bytesUploaded,
    bytesTotal: data.bytesTotal,
    percentage: Math.floor((data.bytesUploaded / data.bytesTotal * 100).toFixed(2))
  })
))
updatedFiles[data.id] = updatedFile
uppy.setState({files: updatedFiles})

```

The main concern is making sure that you aren’t mutating the object, and instead copying it and then updating it

Here is some code that should achieve what you are looking for

```javascript
uppy.on("upload-success", (file, response) => {
  if (typeof response.uploadURL !== "undefined") {
    const updatedFiles = Object.assign({}, uppy.getState().files);
    const updatedFile = Object.assign({}, updatedFiles[file.id], {
      progress: Object.assign({}, updatedFiles[file.id].progress, {
        uploadComplete: false,
        uploadStarted: true,
        percentage: response.result.status.pctComplete,
      }),
    });
    updatedFiles[data.id] = updatedFile;
    uppy.setState({ files: updatedFiles });
  }
});

```

This should update the percent

As for changing the text of the progress bar, the only way I know of is to do it initially. To my knowledge, you can’t update it after you’ve `use`'d the plugin.

If you’d like to update the text when you `use` it, here’s the code

```javascript
uppy.use(StatusBar, {
  locale: {
     uploading: 'Encoding',
  }
})

```

I hope this helps!

- Andrew