integrate Bootstrap's progress bar in reactjs - invoking java servlet API call from superagent

Question

I have a requirement that, i have to generate a Excel report and have to download the same from the react js application. I do want to integrate Bootstrap's progress bar while doing this process.

How i can integrate progress bar here.?

Please find my code below.

BootStrap Progress bar code:

<div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="" aria-
      valuemin="0" aria-valuemax="100" style="width: 60%;">
      </div>
</div>

ReactJS (SuperAgent) code for generating Excel sheet and download the same.

handleInvoice(e)
 {
    e.preventDefault()
    var item = this.state.item;
    var lines = item.order;
    var request = require('superagent');
    var apiBaseUrl = "api/Invoice";
    var req = request.get(apiBaseUrl);
    req.query({ item : item.id})
    req.end(function(err,res){
         if(err){
             alert(" error"+err);
             confirmAlert({
                    message: 'Invoice is not prepared properly.....', 
                    confirmLabel: 'Ok', 
                });
          }
         else{
                window.location= 'api/Invoice?item=' + item.id,'';
                element.click();
            } 

        });
}

ReactJS Botton code to invoke handleInvoice() method :

return ( <button type="submit" className="btn btn-primary"  onClick={ 
         this.handleInvoice } > Invoice </button> );

Please find my servlet code :

try {
        String reportname = "Invoice";  
        resp.setContentType("application/vnd.ms-excel");
        resp.setHeader("Content-Disposition", "attachment; filename=" + 
        reportname + ".xls");
        HSSFWorkbook workbook1=service.getCommercialInvoiceService(id);
        ByteArrayOutputStream outByteStream = new ByteArrayOutputStream();
        workbook1.write(outByteStream);
            byte [] outArray = outByteStream.toByteArray();
            int fileSize=outArray.length;
            outStream = resp.getOutputStream();
            outStream.write(outArray);
            outStream.flush();
            outStream.close();
            resp.setHeader("Content-Length", ""+fileSize);
            System.out.println("File Size"+fileSize);

    } catch (IOException ioe) {
        throw new ServletException(ioe);
        }

Please find my servlet code., where am getting the size of the file and am setting it to the response header also.

Answer 1

superagent package has a progress tracking feature.

SuperAgent fires progress events on upload and download of large files.

You can use this feature to get current get requests percentage and apply that percentage to the progress bar.

Example

handleInvoice(e) {
  e.preventDefault()
  var item = this.state.item;
  var lines = item.order;
  var request = require('superagent');
  var apiBaseUrl = "api/Invoice";
  var req = request.get(apiBaseUrl);
  req.query({
    item: item.id
  });

  req.on('progress', event => {
    // set state for the current progress percentage
    this.setState({ progress: event.percent });
  });

  req.end(function (err, res) {
    if (err) {
      alert(" error" + err);
      confirmAlert({
        message: 'Invoice is not prepared properly.....',
        confirmLabel: 'Ok',
      });
    }
    else {
      window.location = 'api/Invoice?item=' + item.id, '';
      element.click();
    }
  });
}

---

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow={this.state.progress} aria-
      valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div>
</div>