Project

General

Profile

Bug #1300 » index.2.html

working example of upload progress in action, uses YUI framework for ajax calls - yelims, 2007-08-14 11:46

 
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
<html>
3

    
4

    
5
	<head>
6
		
7
		<title>Lighttpd Upload Progress example (works since Lighttpd 1.5 svn version r1897 and above )</title>
8

    
9

    
10

    
11

    
12

    
13
		<!-- this example uses YUI (Yahoo user interface library) for reseting the css and javascript needed from ajax calls -->
14
		<link 	rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/reset/reset-min.css" />   
15
		<link 	rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/fonts-min.css" /> 
16
		<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>	
17
		<script type="text/javascript"src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"></script>
18
		<!-- this example uses YUI (Yahoo user interface library) for reseting the css and javascript needed from ajax calls -->
19
		
20
		
21
		
22
		
23
		
24
		<script type="text/javascript">
25
			
26
			//start progress meter funciton
27
			function startProgressMeter( upload_url, progress_url, update_interval ){
28
			 	
29
				 	
30
				//generate random 32 char progress-id 
31
			 	var uuid = "";
32
			 	for (i = 0; i < 32; i++) {
33
			  		uuid += Math.floor(Math.random() * 16).toString(16);
34
			 	}
35
			 	
36
			 	//hide the file upload panel and show the progress + notification panels only
37
			 	YAHOO.util.Dom.setStyle('uploadControlPanel', 'display', 'none'); 
38
			 	YAHOO.util.Dom.setStyle('uploadProgressPanel', 'display', 'block'); 
39
			 	YAHOO.util.Dom.setStyle('uploadProgressBarField', 'display', 'block'); 
40
			 	YAHOO.util.Dom.setStyle('uploadNotificationPanel', 'display', 'block'); 
41

    
42
					
43
			 	//patch the form-action tag to include the progress-id
44
			 	//lighttpd expects file uploads in the format
45
			 	//http://example.com/upload.php?X-Progress-ID=<32_character_unique_id_goes_here> 
46
			 	document.getElementById("uploadFrm").action = "" + upload_url + uuid;
47
				//notify user
48
			 	document.getElementById('uploadNotificationPanel').innerHTML =	'Upload started'
49
			 	
50
	
51
				 
52
				 //call the progress-updater every so often
53
			 	interval = window.setInterval(
54
			   		
55
					function () {
56
			     		updateProgress( uuid, progress_url );
57
			   		},
58
			   		update_interval
59
			 	);
60
				
61
			}
62
			
63
			
64
			
65
			//ajax send an upload progress request
66
			function updateProgress( uuid, progress_url ){
67

    
68
				//response
69
				var responseSuccess = function(o){
70
					
71
					//json decode the response form the server
72
					var upload =  eval( o.responseText );
73
					
74
					
75
					//output to debug panel, remove this later
76
					document.getElementById('debugPanel').innerHTML +=	o.responseText + '<br />';
77
					
78
					
79
					
80
					//uploading
81
				    if (upload.state == 'done' || upload.state == 'uploading') {
82
				    	
83
				    	//get the current width of the upload box from the stylesheet
84
				    	var progressBarFieldStyleWidth = parseInt( 
85
							YAHOO.util.Dom.getStyle('uploadProgressPanel', 'width') 
86
						);
87

    
88
						//calculate the new width when the response comes in
89
						progressBarFieldWidth = progressBarFieldStyleWidth * upload.received / upload.size;
90
				     	
91
						//set the style expanding the width of field
92
						YAHOO.util.Dom.setStyle('uploadProgressBarField', 'width', progressBarFieldWidth+'px'); 
93
						
94
						
95
						//calculate percentage
96
						var percentage		= 	upload.received / upload.size;	
97
						percentage			=	percentage * 100;
98
						var percentageStr 	= 	String(percentage);
99
						percentageStr		=	percentageStr.split('.');
100
						percentageStr		=	percentageStr[0];
101
						
102
						
103
						
104
						//notify user
105
						document.getElementById('uploadNotificationPanel').innerHTML =	percentageStr + '%&nbsp;&nbsp;&nbsp;'
106
				 	
107
				 		//show progress in megabytes
108
						document.getElementById('uploadNotificationPanel').innerHTML +=	convertToMegaBytes( upload.received ) + '&nbsp;/&nbsp;' + convertToMegaBytes( upload.size );
109
				    }
110
				    
111
				    //finished upload clear the timer
112
				    if (upload.state == 'done') {
113
				     	
114
						window.clearTimeout(interval);
115
				    }
116
				}
117
				
118
				var callback = {
119
					
120
					success:responseSuccess
121
				}
122

    
123

    
124
				//the line bellow is VERY IMPORTANT, the upload id is sent as X-Progress-ID http header
125
				YAHOO.util.Connect.initHeader('X-Progress-ID', uuid );   
126
				var request = YAHOO.util.Connect.asyncRequest(
127
					'GET', 
128
					progress_url, 
129
					callback
130
				)
131
			}
132
			
133
			
134
			//converts bytes into megabytes
135
			function convertToMegaBytes( bytes ) {
136
  				
137
				var mb		=	Math.round((bytes/[Math.pow(1024,2)])*1000000)/1000000;
138
				
139
				var mbStr 	= String(mb);
140
				
141
				var mbArr	=	mbStr.split('.');
142
				
143
				var	rhs		=	mbArr[1];
144
				
145
				mbStr		=	mbArr[0] + '.' + rhs.substr(0,2) + 'MB';
146
				
147
				return mbStr;
148
			}
149
			
150
		</script>
151
		
152
		
153
		<!-- quick stylesheet, all is self explanotary here -->
154
		<style  type="text/css">
155
			
156
			#uploadPanel{
157
				
158
				margin:				0px;
159
				padding:			0px;
160
				border:				0px;
161
				width: 				302px;
162
        		text-align: 		left;
163
			}
164
			
165
			#uploadControlPanel{
166
				
167
				display:			block;
168
				text-align: 		left;
169
			}
170
			
171
			#uploadNotificationPanel{
172
				
173
				text-align: 		left;
174
				display:			none;
175
				font-family:		courier;
176
				font-size:			100%;
177
				font-weight:		bold;
178
				color:				blue;
179
			}
180
			
181
			#uploadProgressPanel{
182
				
183
				text-align: 		left;
184
				display:			none;
185
				width: 				300px; 
186
				border: 			1px solid blue;
187
			}
188
			
189
			#uploadProgressBarField{
190
				
191
				display:			none;
192
				text-align: 		left;
193
				width: 				1px; 
194
				background-color: 	#CCCFFF; 
195
				border: 			1px solid white;
196
			}
197
			
198
			h1{
199
				
200
				font-size:			140%;
201
				margin:				20px;
202
			}
203
			
204
			h2{
205
				
206
				font-size:			120%;
207
				margin:				20px;
208
			}
209
		</style>	
210
</head>
211

    
212
<body>
213
	<h1>Lighttpd Upload Progress example (works since Lighttpd 1.5 svn version r1897 and above )</h1>
214
	<h2>this example uses YUI (Yahoo user interface library) for reseting the css and javascript needed from ajax calls</h2>
215
	
216
	<hr />
217
	
218
	<p>
219
	The file is uploaded to:
220
	<strong>http://example.com/upload.php?X-Progress-ID=<32_character_unique_id_goes_here> </strong>
221
	<br />
222
	<br />
223
	The progress meter ajax requests go to:
224
	<strong>http://example.com/progress</strong>
225
	<br />
226
	<br />
227
	see html source for more comments
228
	</p>
229
	
230
	<hr />
231
	
232
	<div id="uploadPanel">
233
			
234
		<div id="uploadControlPanel">
235
		
236
			<form 	id="uploadFrm" 
237
					enctype="multipart/form-data" 
238
					action="" 
239
					method="POST" 
240
					onsubmit="startProgressMeter( 'upload.php?X-Progress-ID=', '/progress', 1000 );">
241
				
242
					<input id="fileFld" type="file" name="fileFld" />
243
					<input id="uploadBtn" type="submit" value="Upload" />
244
					
245
			</form>
246
			
247
		</div>
248
		
249
		<div id="uploadProgressPanel">
250

    
251
			<div id="uploadProgressBarField" >&nbsp;</div>
252
			
253
		</div>
254
		
255
		<div id="uploadNotificationPanel">&nbsp;</div>
256
		
257
	</div>
258

    
259
	
260
	<!-- shows the result of the ajax calls, handy for illustration/debugging purposes -->
261
	<div id="debugPanel">&nbsp;</div>
262
	<!-- shows the result of the ajax calls, handy for illustration/debugging purposes -->
263
	
264
</body>
265

    
266
</html>
(2-2/2)