Ticket #4165: 5116_progress_bar_newforms_admin.diff

File 5116_progress_bar_newforms_admin.diff, 18.5 KB (added by Michael Axiak <axiak@…>, 8 years ago)

Newforms-Admin branch patch

  • 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    });
     265function getxy(){
     266    var x,y;
     267    if (self.innerHeight) // all except Explorer
     268        {
     269        x = self.innerWidth;
     270        y = self.innerHeight;
     271        }
     272    else if (document.documentElement && document.documentElement.clientHeight)
     273        // Explorer 6 Strict Mode
     274        {
     275        x = document.documentElement.clientWidth;
     276        y = document.documentElement.clientHeight;
     277        }
     278    else if (document.body) // other Explorers
     279        {
     280        x = document.body.clientWidth;
     281        y = document.body.clientHeight;
     282        }
     283    return {'x':x,'y':y}
     284    }
     285
     286var humanvalue = ['B','KB','MB','GB']
     287function humanize(bytes) {
     288    curbytes = bytes
     289    iterations = 0
     290    while (curbytes>1024) {
     291        iterations++
     292        curbytes=curbytes/1024
     293        }
     294    return curbytes.toFixed(1) + ' ' + humanvalue[iterations]
     295    }
     296
     297interval = null;
     298function fetch(uuid) {
     299    req = xmlhttp
     300    req.open("GET", "/admin/upload_progress/", 1);
     301    req.setRequestHeader("X-Progress-Id", uuid);
     302    req.onreadystatechange = function () {
     303    if (req.readyState == 4) {
     304        if (req.status == 200) {
     305
     306            var upload = eval( '(' + req.responseText + ')' );
     307
     308            if (upload.state == 'done' || upload.state == 'uploading')
     309                bar = document.getElementById('progress_bar');
     310                progress_wrap = document.getElementById('progress_wrap');
     311                if (upload.state == 'done') {
     312                    window.clearTimeout(interval);
     313                    progress_wrap.style.visibility = 'hidden';
     314                    return;   
     315                }
     316                bar_txt = document.getElementById('progress_text')
     317                bar_txt.innerHTML = ((upload.received / upload.size) * 100).toFixed(1) + '% - ' +
     318                    humanize(upload.received) + ' of ' + humanize(upload.size)
     319                w = 400 * upload.received / upload.size;
     320                bar.style.width = w + 'px';
     321
     322                }
     323            }
     324        }
     325    req.send(null);
     326
     327    }
     328
     329function closeprogress() {
     330
     331
     332
     333}
     334
     335function openprogress(e) {
     336
     337    uuid = "";
     338    for (i = 0; i < 32; i++) {
     339        uuid += Math.floor(Math.random() * 16).toString(16);
     340        }
     341    frm = e.target||e.srcElement;
     342
     343    if (frm.action.indexOf('?') == -1) {
     344       frm.action=frm.action+"?progress_id=" + uuid;
     345    } else {
     346       frm.action=frm.action+"&progress_id=" + uuid;
     347    }
     348
     349    if (document.getElementById('progress_wrap')) {
     350        document.getElementById('progress_wrap').style.visibility = 'visible';
     351        document.getElementById('progress_bar').style.width = '0';
     352        document.getElementById('progress_text').innerHTML = '0%';
     353
     354        interval = window.setInterval(
     355        function () {
     356            fetch(uuid);
     357            },
     358        1000
     359        );
     360        return;
     361    }
     362
     363    pos = getxy()
     364    posx = parseInt((pos.x/2)-(420/2), 10)
     365    posy = parseInt((pos.y/2)-(50/2), 10)
     366
     367    progress_wrap = quickElement('div', document.body, '', 'style',
     368        'position: absolute; top: '+posy+'px; left: '+posx+'px; height: 50px; ' +
     369        'padding: 10px; width: 420px; background: #ffffff; ' +
     370        'border: solid 1px #dddddd;', 'id', 'progress_wrap')
     371
     372    progress_label = quickElement('h1', progress_wrap, 'Upload progress')
     373
     374    progress = quickElement('div', progress_wrap, '', 'style',
     375        'top: 0; left: 0; width: 0px; ', 'id', 'progress_bar', 'class', 'submit-row')
     376
     377    progress_text = quickElement('div', progress_wrap, '0%', 'style',
     378        'color: #000000; ', 'id', 'progress_text')
     379 
     380    interval = window.setInterval(
     381        function () {
     382            fetch(uuid);
     383            },
     384        1000
     385        );
     386    }
     387
     388addEvent(window, 'load', function() {
     389        frms = document.getElementsByTagName('form');
     390        for (var i=0; i<frms.length; i++) {
     391           if (frms[i].encoding.toLowerCase() == 'multipart/form-data') {
     392              addEvent(frms[i], 'submit',  openprogress);
     393              return;
     394           }
     395        }
     396    });
     397function getxy(){
     398    var x,y;
     399    if (self.innerHeight) // all except Explorer
     400        {
     401        x = self.innerWidth;
     402        y = self.innerHeight;
     403        }
     404    else if (document.documentElement && document.documentElement.clientHeight)
     405        // Explorer 6 Strict Mode
     406        {
     407        x = document.documentElement.clientWidth;
     408        y = document.documentElement.clientHeight;
     409        }
     410    else if (document.body) // other Explorers
     411        {
     412        x = document.body.clientWidth;
     413        y = document.body.clientHeight;
     414        }
     415    return {'x':x,'y':y}
     416    }
     417
     418var humanvalue = ['B','KB','MB','GB']
     419function humanize(bytes) {
     420    curbytes = bytes
     421    iterations = 0
     422    while (curbytes>1024) {
     423        iterations++
     424        curbytes=curbytes/1024
     425        }
     426    return curbytes.toFixed(1) + ' ' + humanvalue[iterations]
     427    }
     428
     429interval = null;
     430function fetch(uuid) {
     431    req = xmlhttp
     432    req.open("GET", "/admin/upload_progress/", 1);
     433    req.setRequestHeader("X-Progress-Id", uuid);
     434    req.onreadystatechange = function () {
     435    if (req.readyState == 4) {
     436        if (req.status == 200) {
     437
     438            var upload = eval( '(' + req.responseText + ')' );
     439
     440            if (upload.state == 'done' || upload.state == 'uploading')
     441                bar = document.getElementById('progress_bar');
     442                progress_wrap = document.getElementById('progress_wrap');
     443                if (upload.state == 'done') {
     444                    window.clearTimeout(interval);
     445                    progress_wrap.style.visibility = 'hidden';
     446                    return;   
     447                }
     448                bar_txt = document.getElementById('progress_text')
     449                bar_txt.innerHTML = ((upload.received / upload.size) * 100).toFixed(1) + '% - ' +
     450                    humanize(upload.received) + ' of ' + humanize(upload.size)
     451                w = 400 * upload.received / upload.size;
     452                bar.style.width = w + 'px';
     453
     454                }
     455            }
     456        }
     457    req.send(null);
     458
     459    }
     460
     461function closeprogress() {
     462
     463
     464
     465}
     466
     467function openprogress(e) {
     468
     469    uuid = "";
     470    for (i = 0; i < 32; i++) {
     471        uuid += Math.floor(Math.random() * 16).toString(16);
     472        }
     473    frm = e.target||e.srcElement;
     474
     475    if (frm.action.indexOf('?') == -1) {
     476       frm.action=frm.action+"?progress_id=" + uuid;
     477    } else {
     478       frm.action=frm.action+"&progress_id=" + uuid;
     479    }
     480
     481    if (document.getElementById('progress_wrap')) {
     482        document.getElementById('progress_wrap').style.visibility = 'visible';
     483        document.getElementById('progress_bar').style.width = '0';
     484        document.getElementById('progress_text').innerHTML = '0%';
     485
     486        interval = window.setInterval(
     487        function () {
     488            fetch(uuid);
     489            },
     490        1000
     491        );
     492        return;
     493    }
     494
     495    pos = getxy()
     496    posx = parseInt((pos.x/2)-(420/2), 10)
     497    posy = parseInt((pos.y/2)-(50/2), 10)
     498
     499    progress_wrap = quickElement('div', document.body, '', 'style',
     500        'position: absolute; top: '+posy+'px; left: '+posx+'px; height: 50px; ' +
     501        'padding: 10px; width: 420px; background: #ffffff; ' +
     502        'border: solid 1px #dddddd;', 'id', 'progress_wrap')
     503
     504    progress_label = quickElement('h1', progress_wrap, 'Upload progress')
     505
     506    progress = quickElement('div', progress_wrap, '', 'style',
     507        'top: 0; left: 0; width: 0px; ', 'id', 'progress_bar', 'class', 'submit-row')
     508
     509    progress_text = quickElement('div', progress_wrap, '0%', 'style',
     510        'color: #000000; ', 'id', 'progress_text')
     511 
     512    interval = window.setInterval(
     513        function () {
     514            fetch(uuid);
     515            },
     516        1000
     517        );
     518    }
     519
     520addEvent(window, 'load', function() {
     521        frms = document.getElementsByTagName('form');
     522        for (var i=0; i<frms.length; i++) {
     523           if (frms[i].encoding.toLowerCase() == 'multipart/form-data') {
     524              addEvent(frms[i], 'submit',  openprogress);
     525              return;
     526           }
     527        }
     528    });
     529 No newline at end of file
  • django/contrib/admin/options.py

     
    154154        js = ['js/core.js', 'js/admin/RelatedObjectLookups.js']
    155155        if self.prepopulated_fields:
    156156            js.append('js/urlify.js')
     157        if self.opts.has_field_type(models.FileField):
     158            js.append('js/UploadProgress.js')
    157159        if self.opts.has_field_type(models.DateTimeField) or self.opts.has_field_type(models.TimeField) or self.opts.has_field_type(models.DateField):
    158160            js.extend(['js/calendar.js', 'js/admin/DateTimeShortcuts.js'])
    159161        if self.opts.get_ordered_objects():
  • django/contrib/admin/urls.py

     
    99    #('^password_change/done/$', 'django.contrib.auth.views.password_change_done'),
    1010    ('^template_validator/$', 'django.contrib.admin.views.template.template_validator'),
    1111
     12    # Upload progress bar support
     13    #('^upload_progress/$', 'django.contrib.admin.views.main.upload_progress'),
    1214    # "Add user" -- a special-case view
    1315    ('^auth/user/add/$', 'django.contrib.admin.views.auth.user_add_stage'),
    1416    # "Change user password" -- another special-case view
  • django/contrib/admin/views/main.py

     
    4848            res[i] = '_%02X' % ord(c)
    4949    return ''.join(res)
    5050
     51def upload_progress(request):
     52    """
     53    Given this request, returns a JSON
     54    object that has information on a file upload progress.
     55    If there is no file upload in progress, returns an
     56    empty dictionary, '{}'.
     57    """
     58
     59    from django.utils import simplejson
     60
     61    content = simplejson.dumps(request.file_progress)
     62
     63    return HttpResponse(content=content, mimetype='text/plain')
     64
    5165def model_admin_view(request, app_label, model_name, rest_of_url):
    5266    model = models.get_model(app_label, model_name)
    5367    if model is None:
Back to Top