Bootstrap progress bar visible when downloading file from java servlet

Question

I want to show the BootStrap's progress bar while am downloading file from Sevlet API.

Application architecture designed like - From React JS using SuperAgent am invoking Servlet API which is responsible for writing a Excel file and it will return that Excel file to the SuperAgent to download the same.

While doing this process i want to show the BootStrap's progress bar for UX.

Please find my code below

Servlet API code for writting a Excel file and return the same to SuperAgent

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);

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

ReactJS method which is using SuperAgent to download file from Servlet API

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();
     } 

  });
}

I want to show the below bootstrap's progress bar while downloading the file.

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

How do i integrate progress bar in ReactJS code ( SuperAgent is invoking the Java Servlet API).

Answer 1

Your code which writes the headers and data is as follows..

int fileSize=outArray.length;
outStream = resp.getOutputStream();
outStream.write(outArray);
outStream.flush();
outStream.close();
resp.setHeader("Content-Length", ""+fileSize);

Note that the content length is being set after the output stream has been written to. HTTP responses consist of a series of headers followed the content, which you write to via the OutputStream. Here you have simply set the content length after streaming the content. So this value is not sent at the start of the response.

The content length of the output is not mandatory (it might not be known by the process streaming it). But of course you can't produce a progress bar unless you know the length of the data. Simply set the content length before writing the data so it makes it into the response headers.

int fileSize=outArray.length;
resp.setHeader("Content-Length", ""+fileSize);
outStream = resp.getOutputStream();
outStream.write(outArray);
outStream.flush();
outStream.close();