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