Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Need feature of Upload Progress Status  RSS feed

 
Venkata Sirish
Ranch Hand
Posts: 112
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 77
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 112
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Rancher
Posts: 15385
6
 
Venkata Sirish
Ranch Hand
Posts: 112
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
thank you
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!