Skip to content
This repository was archived by the owner on May 25, 2023. It is now read-only.

Demo implementation

blueimp edited this page Feb 15, 2011 · 48 revisions

The jQuery File Upload Demo is always equipped with the latest version of the source files (jquery.fileupload.js and jquery.fileupload-ui.js).

In addition to the the jQuery and jQuery UI libraries and the files distributed with the jQuery File Upload Plugin, the demo utilizes the jQuery Templates Plugin and a simple jQuery Cookie Plugin. For Performance Optimizations, the JavaScript files are merged and minified.

An un-minified version of the demo JavaScript application can be found here:
http://aquantum-demo.appspot.com/static/js/application.js
Note that this file is sent with a far future Expires header, so you might need to refresh your browser cache to retrieve the latest version (the demo itself uses IDs appended as query parameter to the file to make sure browsers get the latest version).

The most reusable addition of the demo implementation is a TemplateHelper function used in conjunction with the jQuery Templates Plugin:

var TemplateHelper = function (locale, settings) {
    var roundDecimal = function (num, dec) {
            return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
        };
    this.locale = locale;
    this.settings = settings;
    this.formatFileSize = function (bytes) {
        if (isNaN(bytes) || bytes === null) {
            return '';
        }
        if (bytes >= 1000000000) {
            return roundDecimal(bytes / 1000000000, 2) + ' GB';
        }
        if (bytes >= 1000000) {
            return roundDecimal(bytes / 1000000, 2) + ' MB';
        }
        return roundDecimal(bytes / 1000, 2) + ' KB';
    };
    this.formatFileName = function (fileName) {
        // Remove any path information:
        return fileName.replace(/^.*[\/\\]/, '');
    };
}

The server-side of the demo is written in Python on Google App Engine.
With App Engine, adding a thumbnail picture for uploaded files is very easy thanks to the get_serving_url method of the Images API. You basically just create a special link to the uploaded file with the thumbnail size as parameter.

Clone this wiki locally