Do not install nginx from the repo. Uninstall if it’s already installed.

apt-get remove nginx

mkdir -p /opt/downloads
cd /opt/downloads

Download nginx sources from nginx.net and unpack (I’m working with nginx-0.6.36):

tar zxf nginx-0.6.36.tar.gz

Download an untar upload progress module from nginx wiki

tar zxf Nginx_uploadprogress_module-0.5.tar.gz
cd nginx-0.6.36
./configure --prefix=/opt/nginx --add-module=/opt/downloads/nginx_uploadprogress_module
make install

This’ll install nginx in /opt/nginx

Configuration

open up /opt/nginx/conf/nginx.conf and add following lines:

http {
     client_max_body_size 30M; # adjust as per your need
     upload_progress proxied 1m;
 
     server {
         server_name my.server.com;
         listen 80;
         root /var/www/nginx-default/my-static-files;
 
         location /ajax {
             proxy_pass http://localhost:2300;
             proxy_redirect default;
             track_uploads proxied 30s;
         }
         location ^~ /report_file_uploads {
              report_uploads proxied;
         }
     }
}

This assumes  ‘/ajax’ is the backend application proxy.

In Javascript, to get progress bar going, send following AJAX message in a loop, after the form with file upload field has been submitted.

Lots of details are omitted since these are dependent upon your javascript library of choice (which, btw, for us is extjs).

var upload_id = 'MyUniqueID'; // upload_id must be unique for each upload session
this.send_ajax_message({
       url: '/report_file_uploads',
       headers: {'X-Progress-ID' : upload_id},
       method:'GET',
       success: function(r) {
              r = this.parse_ajax_response(r);
             if(r.state == 'uploading' || r.state == 'starting') {
                var percent = (Number(r.received)/Number(r.size));
                if(percent > 1.0)
                    percent = 1.0;
                 //show percent as you wish on your progress meter
                 // sleep for few seconds and send this ajax message again
             } else if(r.state == 'done' || r.state == 'error') {
                // kill your loop timer
                // finish your progress meter
             }
        }
});

Let me know if you’d like javascript fragment for extjs and I’ll post it but it’s relatively straightforward.

At Yellowfish, we specialize in web2.0 Ajax web application development using open source tools and modern software trends.

Goes on to prove the geeks have it all wrong when it comes to selling!

Good, slick user interface is quite hard to achieve. It requires vision, imagination, training in human psychology AND a quite a bit of technical wizardy. Try navigating all corners of CSS and then make yourself cross browser. You’ll know what I’m talking about. Apple is where it is today simply because of it’s fantastic user interface. There’s nothing one could not do with good old PCs before Macs made a comeback. Yet people rushed to pay extra dollars to get the coolest computer on earth. Ease of use ? Stylish? Marketing? Status Symbol? Be different syndrome? You can call it what you like but if it were not for the beatiful interface, Apple wouldn’t have survived it’s comeback for this long.

Javascript is an awesome language. It’s super flexible. It empowers the developer with immense flexibility. You can use the power to advance world peace or choose to shoot yourself. It’s totally upto you. As spiderman said – with power comes responsibility. Since there are no private namespaces in Javascript, it’s ultra important that the library you choose NEVER dirties your namespace and lives completely inside it’s own namespace. One of the most popular javascript library – prototype.js – violates this principle completely and IMHO, should be used with care.

Javascript started in Browsers and even today it’s most often found in the browsers. Browsers are the modern UI paradigm. The javascript library must not be limited to cookie-cutter DOM manipulation APIs. That was cool in the 90s. The Libraries now must provide a rich set of UI Widgets. You don’t want to be using two Javascript libraries – one for Ajax and other for UI widgets.

Documentation. If the developer has to resort to ‘grep’ the source code to find essential pieces of functionality, the library becomes a time hog instead of rapid development platform!

We looked at quite a few js libraries :

* JQuery
* Qooxdoo
* Dojo
* Prototype.js
* mootools
* extjs

and settled for extjs as our framework of choice.

Here are our reasons for picking a commercial open source library like extjs.
The overall design of extjs is exemplary. One can learn a lot from it’s unified architecture – no matter which language one is programming in.

It lives within it’s own namespace. Prototype.js was out at this point.

The UI widget set is extremely rich. Dojo, qooxdoo and mootools – although promising, were nowhere close to extjs in widgets collection. Although jquery , with it’s collection of opensource plugins, has a rich collection, it suffers from one major disadvantage. The plugins are from multiple vendors and there is no consistent Object model to dictate their design. Extjs requires you to start with one of their base classes – ensuring a consitent model. Consistency is extremely important for the library to be reusable.

Not to mention, extjs documentation seems to be very comprehensive and well maintained. In a library as comprehensive as extjs, one should always be prepared to look into the source code to fund missing bits but all essential pieces are very well documented.

Many people seem to object to commercial licencing of extjs – however, we believe, the licencing is quite fair and inexpensive. A single developer licence costs less than $300 and one can deploy on unlimited domains. You can develop your application for free and purchase a licence when you go live. For most businesses this shouldn’t be an issue at all.
On the other hand, if your business can’t come up with $300.00, you’ve bigger issues and shouldn’t be worried about javascript libraries !!