Need feature of Upload Progress Status

[Venkata Sirish]

Hi,
This is Venkat. Iam working on file uploading feature. So during my file upload process, i need to show the end user a progress indication. It may be a image, or a pop up window.

How can i achieve this.

Iam using

struts framework,
apache commons-file upload api,
javascript, html, ajax.

Please let me know ASAP.

Thanks in advance,
Venkat

[Justin Russo]

Hi Venkat,

You can use javascript to achieve this

Adding Progress Bar Element
------------------------------
A custom progress bar may be implemented in several ways. For example, you can use a standard ActiveX component Progress Bar, or use the IMG element (or some other element) changing its width. Let's use the DIV element and change its width via styles:


<span id="ProgressBarText" style="display:none;"></span>
<br />
<div id="ProgressBar" style="width:0px;height:20px;background-color:blue;display:none;"></div>

Changing Progress Bar Position on Progress Status Change
---------------------------------------------------------

<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
//Max width of progress bar
var progresBarWidth = 200;
var progresBar = document.getElementById("ProgressBar");
var progresBarText = document.getElementById("ProgressBarText");
switch(Status)
{
case "START":
//Show progress bar
progresBar.style.display = "block";
progresBarText.style.display = "block";
//Set width of progress bar to 0px
progresBar.style.width = "0px";
break;
case "PREPARE":
//Show preparing progress
progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
//Set width of progress bar
progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
break;
case "UPLOAD":
//Show uploading progress
progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
//Set width of progress bar
progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
break;
case "COMPLETE":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("All images were successfully uploaded.");
//Redirect to galery.asp page when upload process is completed
//window.location.replace('gallery.asp');
break;
case "CANCEL":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Uploading were canceled.");
break;
case "ERROR":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Error arrised during uploading.");
break;
}
}
</script>


Concurrent Upload
---------------------

In case of a concurrent upload, the example above will not work as ValueMax and Value arguments contain different values for different connections. Instead, you may use the Progress argument that contains a value reflecting the whole process completion in percentage terms. A modified version of the ImageUploader_Progress handler may look like the following:

<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
//Max width of progress bar
var progresBarWidth = 200;
var progresBar = document.getElementById("ProgressBar");
var progresBarText = document.getElementById("ProgressBarText");
switch(Status)
{
case "START":
//Show progress bar
progresBar.style.display = "block";
progresBarText.style.display = "block";
//Set width of progress bar to 0px
progresBar.style.width = "0px";
break;
case "PREPARE":
//Show preparing progress
progresBarText.innerText = Status + " " + Progress + "%";
//Set width of progress bar
progresBar.style.width = Progress + "px";
break;
case "UPLOAD":
//Show uploading progress
progresBarText.innerText = Status + " " + Progress + "%";
//Set width of progress bar
progresBar.style.width = Progress + "px";
break;
case "COMPLETE":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("All images were successfully uploaded.");
break;
case "CANCEL":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Uploading were canceled.");
break;
case "ERROR":
//Hide progress bar
progresBar.style.display = "none";
progresBarText.style.display = "none";
//Show custom message
alert("Error arrised during uploading.");
break;
}
}
</script>

[Venkata Sirish]

Thanks Justin,
Could you please integrate this code with the AJAX as the progess bar is based on content uploading to the server.

[Eric Pascarello]

You might want to look at this:

http://www.ioncannon.net/java/38/ajax-file-upload-progress-for-java-using-commons-fileupload-and-prototype/

Eric

[Venkata Sirish]

thank you