Dynamically Change Bootstrap Progress Bar Value in react

Question

First of all, apologise if I couldn't explain properly. Please do comment so I can explain again if something missing. Will really appreciate any kind of help

I am trying to implement a bootstrap progress bar dynamically in my react upload component while send a post request by using axios.

At the moment what I implement it's directly going to 95 per cent and then done

But I am looking to implement like this example:

https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=dynamically-change-bootstrap-progress-bar-value

my full component will be found here: https://jsfiddle.net/7mgtkub3/

 sendRequest(file) {
    return new Promise((resolve, reject) => {
      const dataForm = new FormData();
      dataForm.append("datafile", file, file.name);
      var self = this;
      self.setState({
        uploadProgress: 95
      });
      axios
        .post(
          `/api/dataset/${this.props.spreadSheetData._id}/upload`,
          dataForm,
          {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          }
        )
        .then(function(response) {
          self.setState({
            uploadProgress: 100
          });
          //console.log("SUCCESS!!");
          self.props.formSubmitted(response.data, 3);
          let filesToUpload = self.state.filesToUpload.slice();
          filesToUpload = filesToUpload.filter(fileObj => {
            return fileObj.name !== file.name;
          });
          self.setState({
            filesToUpload: filesToUpload
          });
          let toastMsg = {
            msg: file.name + " is uploaded successfully",
            className: "lobibox-notify-success"
          };
          notify(toastMsg);
        })
        .catch(function() {
          //console.log("FAILURE!!");
          self.setState(
            {
              uploadState: "Error"
            },
            () => {
              let toastMsg = {
                msg: file.name + " is not uploaded",
                className: "lobibox-notify-error"
              };
              notify(toastMsg);
            }
          );
        });
    })
      .then(response => {})
      .catch(err => {
        console.log(err);
      });
  }

  <div className="Content">
            {this.state.uploadProgress > 0 ?  <ProgressBar
               // now={uploading}
               // label={`${uploading}`}
               now={this.state.uploadProgress} 
               label={`${this.state.uploadProgress}%`}
                animated now={this.state.uploadProgress}
              /> : ""}

Answer 1

About your question

You need subscribe on upload process progress event. If you use axios, you can try onUploadProgress method.

Modify you code like there:

.post(
  `/api/dataset/${this.props.spreadSheetData._id}/upload`,
  dataForm,
  {
    headers: {
      "Content-Type": "multipart/form-data",
      onUploadProgress: (progressEvent) => self.setState({
         uploadProgress: progressEvent.loaded
      })
    }
  }
)

(You may need to change calculated upload progress function)

Some other words

You don't have to create new Promise on the second line of your code. Axios already return Promise, and you can return result of axios:

const dataForm = new FormData();
      dataForm.append("datafile", file, file.name);
      var self = this;
      self.setState({
        uploadProgress: 95
      });
      return axios // .....