Ticket #4165: 5116_new_admin_progress_bar.diff

File 5116_new_admin_progress_bar.diff, 10.3 KB (added by Michael Axiak <axiak@…>, 18 years ago)

New and improved version!

  • django/contrib/admin/media/js/UploadProgress.js

     
     1function getxy(){
     2    var x,y;
     3    if (self.innerHeight) // all except Explorer
     4        {
     5        x = self.innerWidth;
     6        y = self.innerHeight;
     7        }
     8    else if (document.documentElement && document.documentElement.clientHeight)
     9        // Explorer 6 Strict Mode
     10        {
     11        x = document.documentElement.clientWidth;
     12        y = document.documentElement.clientHeight;
     13        }
     14    else if (document.body) // other Explorers
     15        {
     16        x = document.body.clientWidth;
     17        y = document.body.clientHeight;
     18        }
     19    return {'x':x,'y':y}
     20    }
     21
     22var humanvalue = ['B','KB','MB','GB']
     23function humanize(bytes) {
     24    curbytes = bytes
     25    iterations = 0
     26    while (curbytes>1024) {
     27        iterations++
     28        curbytes=curbytes/1024
     29        }
     30    return curbytes.toFixed(1) + ' ' + humanvalue[iterations]
     31    }
     32
     33interval = null;
     34function fetch(uuid) {
     35    req = xmlhttp
     36    req.open("GET", "/admin/upload_progress/", 1);
     37    req.setRequestHeader("X-Progress-Id", uuid);
     38    req.onreadystatechange = function () {
     39    if (req.readyState == 4) {
     40        if (req.status == 200) {
     41
     42            var upload = eval( '(' + req.responseText + ')' );
     43
     44            if (upload.state == 'done' || upload.state == 'uploading')
     45                bar = document.getElementById('progress_bar');
     46                progress_wrap = document.getElementById('progress_wrap');
     47                if (upload.state == 'done') {
     48                    window.clearTimeout(interval);
     49                    progress_wrap.style.visibility = 'hidden';
     50                    return;   
     51                }
     52                bar_txt = document.getElementById('progress_text')
     53                bar_txt.innerHTML = ((upload.received / upload.size) * 100).toFixed(1) + '% - ' +
     54                    humanize(upload.received) + ' of ' + humanize(upload.size)
     55                w = 400 * upload.received / upload.size;
     56                bar.style.width = w + 'px';
     57
     58                }
     59            }
     60        }
     61    req.send(null);
     62
     63    }
     64
     65function closeprogress() {
     66
     67
     68
     69}
     70
     71function openprogress(e) {
     72
     73    uuid = "";
     74    for (i = 0; i < 32; i++) {
     75        uuid += Math.floor(Math.random() * 16).toString(16);
     76        }
     77    frm = e.target||e.srcElement;
     78
     79    if (frm.action.indexOf('?') == -1) {
     80       frm.action=frm.action+"?progress_id=" + uuid;
     81    } else {
     82       frm.action=frm.action+"&progress_id=" + uuid;
     83    }
     84
     85    if (document.getElementById('progress_wrap')) {
     86        document.getElementById('progress_wrap').style.visibility = 'visible';
     87        document.getElementById('progress_bar').style.width = '0';
     88        document.getElementById('progress_text').innerHTML = '0%';
     89
     90        interval = window.setInterval(
     91        function () {
     92            fetch(uuid);
     93            },
     94        1000
     95        );
     96        return;
     97    }
     98
     99    pos = getxy()
     100    posx = parseInt((pos.x/2)-(420/2), 10)
     101    posy = parseInt((pos.y/2)-(50/2), 10)
     102
     103    progress_wrap = quickElement('div', document.body, '', 'style',
     104        'position: absolute; top: '+posy+'px; left: '+posx+'px; height: 50px; ' +
     105        'padding: 10px; width: 420px; background: #ffffff; ' +
     106        'border: solid 1px #dddddd;', 'id', 'progress_wrap')
     107
     108    progress_label = quickElement('h1', progress_wrap, 'Upload progress')
     109
     110    progress = quickElement('div', progress_wrap, '', 'style',
     111        'top: 0; left: 0; width: 0px; ', 'id', 'progress_bar', 'class', 'submit-row')
     112
     113    progress_text = quickElement('div', progress_wrap, '0%', 'style',
     114        'color: #000000; ', 'id', 'progress_text')
     115 
     116    interval = window.setInterval(
     117        function () {
     118            fetch(uuid);
     119            },
     120        1000
     121        );
     122    }
     123
     124addEvent(window, 'load', function() {
     125        frms = document.getElementsByTagName('form');
     126        for (var i=0; i<frms.length; i++) {
     127           if (frms[i].encoding.toLowerCase() == 'multipart/form-data') {
     128              addEvent(frms[i], 'submit',  openprogress);
     129              return;
     130           }
     131        }
     132    });
     133function getxy(){
     134    var x,y;
     135    if (self.innerHeight) // all except Explorer
     136        {
     137        x = self.innerWidth;
     138        y = self.innerHeight;
     139        }
     140    else if (document.documentElement && document.documentElement.clientHeight)
     141        // Explorer 6 Strict Mode
     142        {
     143        x = document.documentElement.clientWidth;
     144        y = document.documentElement.clientHeight;
     145        }
     146    else if (document.body) // other Explorers
     147        {
     148        x = document.body.clientWidth;
     149        y = document.body.clientHeight;
     150        }
     151    return {'x':x,'y':y}
     152    }
     153
     154var humanvalue = ['B','KB','MB','GB']
     155function humanize(bytes) {
     156    curbytes = bytes
     157    iterations = 0
     158    while (curbytes>1024) {
     159        iterations++
     160        curbytes=curbytes/1024
     161        }
     162    return curbytes.toFixed(1) + ' ' + humanvalue[iterations]
     163    }
     164
     165interval = null;
     166function fetch(uuid) {
     167    req = xmlhttp
     168    req.open("GET", "/admin/upload_progress/", 1);
     169    req.setRequestHeader("X-Progress-Id", uuid);
     170    req.onreadystatechange = function () {
     171    if (req.readyState == 4) {
     172        if (req.status == 200) {
     173
     174            var upload = eval( '(' + req.responseText + ')' );
     175
     176            if (upload.state == 'done' || upload.state == 'uploading')
     177                bar = document.getElementById('progress_bar');
     178                progress_wrap = document.getElementById('progress_wrap');
     179                if (upload.state == 'done') {
     180                    window.clearTimeout(interval);
     181                    progress_wrap.style.visibility = 'hidden';
     182                    return;   
     183                }
     184                bar_txt = document.getElementById('progress_text')
     185                bar_txt.innerHTML = ((upload.received / upload.size) * 100).toFixed(1) + '% - ' +
     186                    humanize(upload.received) + ' of ' + humanize(upload.size)
     187                w = 400 * upload.received / upload.size;
     188                bar.style.width = w + 'px';
     189
     190                }
     191            }
     192        }
     193    req.send(null);
     194
     195    }
     196
     197function closeprogress() {
     198
     199
     200
     201}
     202
     203function openprogress(e) {
     204
     205    uuid = "";
     206    for (i = 0; i < 32; i++) {
     207        uuid += Math.floor(Math.random() * 16).toString(16);
     208        }
     209    frm = e.target||e.srcElement;
     210
     211    if (frm.action.indexOf('?') == -1) {
     212       frm.action=frm.action+"?progress_id=" + uuid;
     213    } else {
     214       frm.action=frm.action+"&progress_id=" + uuid;
     215    }
     216
     217    if (document.getElementById('progress_wrap')) {
     218        document.getElementById('progress_wrap').style.visibility = 'visible';
     219        document.getElementById('progress_bar').style.width = '0';
     220        document.getElementById('progress_text').innerHTML = '0%';
     221
     222        interval = window.setInterval(
     223        function () {
     224            fetch(uuid);
     225            },
     226        1000
     227        );
     228        return;
     229    }
     230
     231    pos = getxy()
     232    posx = parseInt((pos.x/2)-(420/2), 10)
     233    posy = parseInt((pos.y/2)-(50/2), 10)
     234
     235    progress_wrap = quickElement('div', document.body, '', 'style',
     236        'position: absolute; top: '+posy+'px; left: '+posx+'px; height: 50px; ' +
     237        'padding: 10px; width: 420px; background: #ffffff; ' +
     238        'border: solid 1px #dddddd;', 'id', 'progress_wrap')
     239
     240    progress_label = quickElement('h1', progress_wrap, 'Upload progress')
     241
     242    progress = quickElement('div', progress_wrap, '', 'style',
     243        'top: 0; left: 0; width: 0px; ', 'id', 'progress_bar', 'class', 'submit-row')
     244
     245    progress_text = quickElement('div', progress_wrap, '0%', 'style',
     246        'color: #000000; ', 'id', 'progress_text')
     247 
     248    interval = window.setInterval(
     249        function () {
     250            fetch(uuid);
     251            },
     252        1000
     253        );
     254    }
     255
     256addEvent(window, 'load', function() {
     257        frms = document.getElementsByTagName('form');
     258        for (var i=0; i<frms.length; i++) {
     259           if (frms[i].encoding.toLowerCase() == 'multipart/form-data') {
     260              addEvent(frms[i], 'submit',  openprogress);
     261              return;
     262           }
     263        }
     264    });
     265 No newline at end of file

  • django/contrib/admin/urls.py

     
    1010    ('^$', 'django.contrib.admin.views.main.index'),
    1111    ('^r/(\d+)/(.*)/$', 'django.views.defaults.shortcut'),
    1212    ('^jsi18n/$', i18n_view, {'packages': 'django.conf'}),
     13    ('^upload_progress/$', 'django.contrib.admin.views.main.upload_progress'),
    1314    ('^logout/$', 'django.contrib.auth.views.logout'),
    1415    ('^password_change/$', 'django.contrib.auth.views.password_change'),
    1516    ('^password_change/done/$', 'django.contrib.auth.views.password_change_done'),

  • django/contrib/admin/views/main.py

     
    8181def get_javascript_imports(opts, auto_populated_fields, field_sets):
    8282# Put in any necessary JavaScript imports.
    8383    js = ['js/core.js', 'js/admin/RelatedObjectLookups.js']
     84    if opts.has_field_type(models.FileField):
     85        js.append('js/UploadProgress.js')
    8486    if auto_populated_fields:
    8587        js.append('js/urlify.js')
    8688    if opts.has_field_type(models.DateTimeField) or opts.has_field_type(models.TimeField) or opts.has_field_type(models.DateField):
    … …  
    777779                               'admin/%s/change_list.html' % app_label,
    778780                               'admin/change_list.html'], context_instance=c)
    779781change_list = staff_member_required(never_cache(change_list))
     782
     783def upload_progress(request):
     784    """
     785    Given this request, returns a JSON
     786    object that has information on a file upload progress.
     787    If there is no file upload in progress, returns an
     788    empty dictionary, '{}'.
     789    """
     790
     791    from django.utils import simplejson
     792
     793    content = simplejson.dumps(request.file_progress)
     794
     795    return HttpResponse(content=content, mimetype='text/plain')
Back to Top