Upload Progress Issue -- do not have "uploading" state
Yanxin Z.
lists at ruby-forum.com
Thu Apr 21 05:30:43 MSD 2011
Hello,
I am trying to use Nginx + Upload Module + Upload Progress Module, which
I follow the link
http://wiki.nginx.org/NginxHttpUploadProgressModule#Usage
I find some issue in initial config, like X-Progress-ID should be added
in upload_pass_form_field
Now I have the last problem is upload.state is not changing during file
transfer. When upload starts, the state is "Starting", when upload is
done, state becomes "done". But in the period, states never becomes
"uploading". This cause the status bar is not working.
Could anyone help me to solve this issue?
Thanks.
I post my config here:
//conf
246 location ~ /api/1.0/web/upload.php {
247 # limit_req zone=box; #set request limit for box
248 root html;
249 fastcgi_pass 127.0.0.1:9000;
250 fastcgi_param SCRIPT_FILENAME
/opt/nginx/html/script$fastcgi_script_name;
251 include fastcgi_params;
252
253 }
268 location ~ /api/1.0/web/upload_internal {
269 # Pass altered request body to this location
270
271 if ($request_method = POST) {
272 upload_pass @post_upload;
273 break;
274 }
275
276 #proxy to upstream server
277 proxy_pass http://127.0.0.1;
278 proxy_redirect default;
279
280 # Store files to this directory
281 upload_store /opt/nginx/html/upload_file;
282
283 # Allow uploaded files to be read only by user
284
285 upload_store_access user:rw group:rw all:rw;
286 upload_set_form_field $upload_field_name.name
"$upload_file_name";
287 upload_set_form_field $upload_field_name.content_type
"$upload_content_type";
288 upload_set_form_field $upload_field_name.path
"$upload_tmp_path";
289
290 # Inform backend about hash and size of a file
291 upload_aggregate_form_field "${upload_field_name}_md5"
$upload_file_md5;
292 upload_aggregate_form_field "${upload_field_name}_size"
$upload_file_size;
293
294 upload_pass_iform_field
"^X-Progress-ID$|^submit$|^email$";
295
296
297 # track uploads in the 'proxied' zone
298 # remember connections for 30s after they finished
299 track_uploads proxied 30s;
300
301 }
303 # Pass altered request body to a backend
304 location @post_upload {
305 rewrite /api/1.0/web/upload_internal
/api/1.0/web/upload.php last;
306 }
307
308 location ^~ /progress {
309 report_uploads proxied;
310 }
//form //
314 <form id="upload" method="POST" enctype="multipart/form-data"
action="/api/1.0/web/upload_internal" onsubmit="openProgressBar();
return true;">
315 Email:<input type="text" name="email" id="email"><br>
316 <input type="file" name="file"><br>
317 <input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
318 <input type="submit" name="submit" value="Upload">
319 </form>
320
321 <div>
322 <div id="progress" style="width: 400px; border: 10px solid black">
323 <div id="progressbar" style="width: 10px; background-color: black;
border: 5px solid white"> </div>
324 </div>
325 <div id="tp">Upload Progress</div>
326 </div>
327
// javascript //
54 interval = null;
55
56 function openProgressBar() {
57 /* generate random progress-id */
58 uuid = "";
59 for (i = 0; i < 32; i++) {
60 uuid += Math.floor(Math.random() * 16).toString(16);
61 }
62 /* patch the form-action tag to include the progress-id */
63
//document.getElementById("upload").action="/upload.php?X-Progress-ID="
+ uuid;
64
document.getElementById("upload").action="/api/1.0/web/upload_internal/?X-Progress-ID="
+ uuid;
65
66 /* call the progress-updater every 1000ms */
67 interval = window.setInterval(
68 function () {
69 fetch(uuid);
70 },
71 100
72 );
73 }
74
75 function fetch(uuid) {
76 req = new XMLHttpRequest();
77 req.open("GET", "/progress", 1);
78 req.setRequestHeader("X-Progress-ID", uuid);
79 req.onreadystatechange = function () {
80 if (req.readyState == 4) {
81 if (req.status == 200) {
82 /* poor-man JSON parser */
83 var upload = eval(req.responseText);
84
85 document.getElementById('tp').innerHTML = upload.state;
86
87
88 /* change the width if the inner progress-bar */
89 if (upload.state == 'done' || upload.state == 'uploading') {
90 //if (upload.state == 'done' || upload.state == 'start') {
91 //alert(req.responseText);
92 bar = document.getElementById('progressbar');
93 w = 400 * upload.received / upload.size;
94 bar.style.width = w + 'px';
95 }
96 /* we are done, stop the interval */
97 if (upload.state == 'done') {
98 //alert("Hello");
99 //alert(req.responseText);
100 window.clearTimeout(interval);
101 }
102 }
103 }
104 }
105 req.send(null);
106 }
--
Posted via http://www.ruby-forum.com/.
More information about the nginx
mailing list