CODEWITHSUNDEEP
ajaxservletsfile-uploadprogress-bar
Rookie
Rookie

Reputation: 5467

file upload with progress bar

I am writing the code from scratch using Ajax, jsp and servlets to show progress bar for the file being uploaded by the client. I have coded a simple form, and Ajax call back function in javascript of the client. I am using multipart/form-data onSubmit on the form to upload the file to a webservlet. I am able to upload the file to the server and write it to the desired location byte-wise, so that I also have the actual number of bytes being written.

My problem is this.

Now, I want to use ajax to get the bytes being written inside the while loop and display on the the same page. When I submit my form, the page redirects to the webservlet. How do I stay on the same page and use Ajax to display the returned progress (bytes being uploaded)?

//Code inside My POST method of webservlet
//write to file byte by byte (count stored in "totalBytesWritten") 
            while(totalBytesWritten < formDataLength){
                fileOuputStream.write(dataBytes, totalBytesWritten ,1);
                totalBytesWritten ++;

            }

I wish to return the "totalBytesWritten" value to the client page via AJAX from within the while loop since this is the current progress of the file being written. But how do I do this from within the while loop? When I submit the form, the page gets redirected to other page, but I want to display the progress on the same page.

code I am using to return data to client from servlet: 

response.getOutputStream().write(totalBytesWritten); 
response.getOutputStream().flush();
response.getOutputStream().close();

My ajax call back function:

function ajaxCallProgressBar(){
        var xmlhttp;
        if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
        else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {   
                        document.getElementById( "actualCount" ).innerHTML=xmlhttp.responseText();; 
                }
                else {
                      document.getElementById("actualCount").innerHTML="readystate error!";
                 }

xmlhttp.open("GET","progressBar",true);
xmlhttp.send();
} //end of function

The actual form is:

<form action="./progressBar"  enctype="multipart/form-data" method="post"      
onsubmit="ajaxCallProgressBar()">

<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file, or a set of files:<br>
<input type="file" name="datafile" size="40">
 </p>  
<div>
<input type="submit" value="Send">
</div>
</form>

How do I display the progressbar on the same page?

Upvotes: 1

Views: 2223

Answers (1)

MeTitus
MeTitus

Reputation: 3428

If you're submitting the form you can't stay in the same page, I think you can use a blank target as in:

target="_blank"

but I've not tried.

The other way as it is stated here would be to use Ajax to submit the data. maybe converting the file data to base64 and not submitting the form at all. Have a look here:

Submit form and stay on same page?

Upvotes: 1

Related Questions