Good videos are available on below link for Sharepoint 2007.
Specially “Sharepoint Overview” (video-13) is nice.
September 20, 2008
August 8, 2007
Simple File Upload Progress bar without Using AJAX
Hi all,
In one of my project there was a requirement in which I have to show a progress bar during the file upload. Its easily possible using Update Panel if we are using AJAX. But my application was not AJAX enabled. So I had to create a simple JavaScript progress bar. I had search on internet and found some helpful java scripts. I collected the needed code and started it. And finally I made a good simple and easy to implement Progress bar. Here I have used a simple Form which can be shown when your server side process of file upload is going on. Here in this example I also have shown different kinds of validations which can be useful while uploading files. E.g. file size, file type, file already exists in designation folder etc.
Click here To download the whole code.
Follow below mentioned steps to implement the simple progress bar into your application.
1. Add following block of code into your Head section of your aspx page:
<head runat=”server”>
<title>Simple Progress bar</title>
<style>
<!–
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
–>
</style>
</head>
2. Then add following Script into your aspx page on top of the page.
<script script language=”javascript” type=”text/javascript”>
var duration=2 // Specify duration of progress bar in seconds
var _progressWidth = 100; // Display width of progress bar
var _progressBar = new String(“»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»”);
var _progressEnd = 10;
var _progressAt = 0; // Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0; // Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = ’show’;
progress.style.left = (document.body.clientWidth/2) – (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) – (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) – 100;
document.progress.top = pageYOffset+(window.innerHeight/2) – 40;
} else if (document.getElementById) { // Netscape 6+
document.getElementById(“progress”).className = ’show’;
var l = (window.innerWidth/2) – 100;
var t = pageYOffset + (window.innerHeight/2) – 40;
document.getElementById(“progress”).style.left = l + “px”;
document.getElementById(“progress”).style.top = t + “px”;
// document.getElementById(“progress”).style.left = (window.innerWidth/2) – 100;
// document.getElementById(“progress”).style.top = pageYOffset+(window.innerHeight/2) – 40;
// Above 2 lines modified by Nilesh Thakkar on 23-July-2007
} ProgressUpdate(); // Initialize bar
} // Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = ‘hide’;
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById(“progress”).className = ‘hide’;
}
} // Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
} // Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = document.all["dialog"].document.getElementById(“bar”);
//var bar = dialog.bar;
//Above line is modified by Nilesh on 23-July-2007
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.dialog.bar
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout(“Click()”, 100);
}function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout(“Click()”, (duration-1)*1000/10);
}function CallJS(jsStr) {
return eval(jsStr);
//return true;
}
</script>3. Then add below script block at bottom of your aspx page.
First i tried to keep below script block with above script block on top of the page, but it was not working properly, so i tried to put it bottom of the page before Forms tag over and it works. I don’t know the reason why it is so, if anybody came to know please update me.<script language=”JavaScript” type=”text/javascript”>
// Create layer for progress dialog
document.write(“progress\” class=\”hide\”>”);
document.write(“<FORM name=\”dialog\” id=\”dialog\”>”);
document.write(“<TABLE border=2 style=\”background-color:Navy;\” >”);
document.write(“<TR><TD ALIGN=\”center\” style=\”FONT-FAMILY:trebuchet ms; PADDING:0px; FONT-WEIGHT:bold; COLOR:white;\”>”);
document.write(“Please wait<BR>”);
document.write(“<input type=label name=\”bar\” value=\”Please Wait………\” size=\”" + _progressWidth/2 + “\”");
if(document.all || document.getElementById) // Microsoft, NS6
document.write(” bar.style=\”color:navy;\”>”);
else // Netscape
document.write(“>”);
document.write(“</TD></TR>”);
document.write(“</TABLE>”);
document.write(“</FORM>”);
document.write(“”);
ProgressDestroy(); // Hides</script>
4. Now you script section is over. Now add file upload control into your page where required and also add Upload button as below.
<asp:FileUpload ID="FileUpload1" runat="server"/> <asp:Button ID="btnUpload" runat="server" Text="Upload File" OnClick="btnUpload_Click" OnClientClick="return CallJS('Demo()');" />5. Now your aspx page side work is over. You can write server side code to upload and save your file at appropriate place. you can download the code and implement the same.
Your guidance & suggestions are always welcome.
