How to set progress bar value using jsp

Question

I am trying to make a servlet to download files online. For this, I have made a progress bar element in jsp.

<progress id="p1" max="100" value="0"><span>0</span>%</progress>

and the java script code to update the progress value:

function setProgress(value)
{
var progressBar = document.getElementById("p1");
progressBar.value = value;
progressBar.getElementsByTagName('span')[0].textContent = value;
}

Now, In the servlet code to change the progress:

InputStream is = ..........;
byte[] bytes = new byte[size*1024];
int read = in.read();
for(int j=0;read!=-1;j++)
{
   bytes[j] = (byte)read;
   setProgress((int)getProgressDownload(bytes.length));
   read = in.read();
}

public float getProgressDownload(int dsize)
{
    return ((float)dsize/tsize)*100;//tsize is total file's size;
}
public void setProgress(int value)
{
    try
    {
       response.getWriter().write("<script>");
       response.getWriter().write("setProgress(\"p1\","+value+");");
       response.getWriter().write("</script>");
    }
    catch(Exception e)
    {
       e.printStackTrace();
    }
}

Now the problem is that is makes the HTML code lengthy because for every byte it will print a script code.

What should I do to prevent this?

Thanks for help

Answer 1

Hi first I think you should store the process in session. And then using ajax call you can regularly update the progress bar using response received from below some servlet. Add the mapping and all I am just writing the doGet stuff.. Also I assume URL mapping as 'progressServlet' for this particular servlet.. Below is doGet method

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String downloadId = "longProcess_" + request.getParameter("downloadId");
        LongProcess longProcess = (LongProcess) request.getSession().getAttribute(downloadId);
        int progress = longProcess.getProgress();

        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(String.valueOf(progress));
    }

And then in JS you can use setTimeout() /setInterval() to call checkProgress method given below at certain intervals and stop calling if progress received is 100% complete. You can use this to repeatedly fire Ajax requests to request current status of the progress.

var refreshprogessbar = setInterval(checkProgress, 10000);// 10 seconds
function checkProgress() {/*pass the actual id instead of 12345*/
    $.getJSON('progressServlet?downloadId=12345', function(progress) {
        if(progress == 100){clearInterval(refreshprogessbar);}
        setProgress(progress);
    });
}

LongProcess is basically the class you use to keep track of the on going process. Below is the example of one of such:

class LongProcess extends Thread {
    private int progress;
    public void run() {
        while (progress < 100) {
            try { sleep(1000); } catch (InterruptedException ignore) {}
            progress++;
        }
    }    
    public int getProgress() {
        return progress;
    }
}

I am just incrementing the progress filed member but you can have a setProgress() method and add logic to increase the progress.