Progress bar percentage and text update manually

Uppy
1

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?

2

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:

// 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

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

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

I hope this helps!

- Andrew