Login

Improve ajax progress bar by jquery extensions

Author:
williamcai
Posted:
December 11, 2010
Language:
JavaScript
Version:
Not specified
Score:
1 (after 3 ratings)

This snippet in the one to improve the method described in http://djangosnippets.org/snippets/679/. It uses some jquery extensions to make the task more easier: jquery.timers.js, jquery.progressbar.js, jquery.form.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// to generate uuid
function genUUID() {
    var uuid = ""
    for (var i=0; i < 32; i++) {
        uuid += Math.floor(Math.random() * 16).toString(16);
    }
    return uuid;
};

// to update progress info
function updateProgressInfo() {
    var progress_url = "/upload/upload_progress/"; // ajax view serving progress info
    var uuid = $('#X-Progress-ID').val();
    $.getJSON(progress_url, {'X-Progress-ID': uuid}, function(data, status){
        if (data) {
            // uncomment to check in firebug
            //console.log("uploaded: " + data.uploaded);
            var progress = parseInt(data.uploaded) * 100 / parseInt(data.length);
            $("#upload-progress-bar").progressBar(progress);
            // trigger the next one after 1s
            $("#upload-progress-bar").oneTime(1000, function() {
                updateProgressInfo();
            });
        }
    });
};

// pre-submit callback
function beforeSubmitHandler(formData, jqForm, options) {
    $("#upload-progress-bar").fadeIn();
    $("#upload-progress-bar").progressBar({
        boxImage: '{{ STATIC_URL }}img/progressbar/progressbar.gif',
        barImage: '{{ STATIC_URL }}img/progressbar/progressbg_orange.gif'
    });
    // trigger the 1st one
    $("#upload-progress-bar").oneTime(1000, function(){
        updateProgressInfo();
    });

    return true;
};

// post-submit callback
function successHandler(responseText, statusText, xhr, $form) {
    // delay and redirect the page to somewhere else
    $("#upload-file-form").oneTime(1000, function() {
        {% url tracefiles-root as tracefiles_root_url %}
        window.location.replace("{{ tracefiles_root_url }}process/");
    });

    return true;
};

// on page load
$(function() {
    var uuid = genUUID(); // id for this upload so we can fetch progress info.
    // save the uuid with the element
    $('#X-Progress-ID').val(uuid);
    var options = {
        dataType: "xml",
        url: "/upload/?X-Progress-ID="+$('#X-Progress-ID').val(),
        beforeSubmit: beforeSubmitHandler,
        success: successHandler
    };
    $("#upload-file-form").ajaxForm(options);
});


// template code
<form action="" method="post" id="upload-file-form" enctype="multipart/form-data">{% csrf_token %}
    <fieldset>
        <legend>{% trans 'Upload File' %}</legend>
        <input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>
        <div>
            <div>
                {{ form.as_p }}
            </div>
            <div><span id="upload-progress-bar"></span></div>
            <div class="submit-row">
                <input type="submit" value="{% trans 'Upload the file' %}" class="default"/>
            </div>
        </div>
    </fieldset>
</form>

More like this

  1. Django Collapsed Stacked Inlines by applecat 1 year, 10 months ago
  2. Django Collapsed Stacked Inlines by mkarajohn 3 years, 11 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 7 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 8 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 12 years ago

Comments

jhl (on December 12, 2010):

Unless you need the information X-Progress-ID for reasons other than tracking upload progress (and if you do, then you should probably use another parameter name anyway), then the X-Progress-ID input won't do you any good because the file upload handler on the server side doesn't have access to POST data. In other words, you can remove

<input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>

because it's not doing anything.

#

Please login first before commenting.