Ticket #4165: 5116_progress_bar_newforms_admin.2.diff

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

@@ +1 @@
+
+var upload_progress_failures = 0;
+var TOTAL_UPLOAD_PROGRESS_FAILURES = 10;
+
+function getxy(){
+    var x,y;
+    if (self.innerHeight) // all except Explorer
+        {
+        x = self.innerWidth;
+        y = self.innerHeight;
+        }
+    else if (document.documentElement && document.documentElement.clientHeight)
+        // Explorer 6 Strict Mode
+        {
+        x = document.documentElement.clientWidth;
+        y = document.documentElement.clientHeight;
+        }
+    else if (document.body) // other Explorers
+        {
+        x = document.body.clientWidth;
+        y = document.body.clientHeight;
+        }
+    return {'x':x,'y':y}
+    }
+
+
+function upload_ajax_problem() {
+    /* If there's a problem, will cancel after
+       TOTAL_UPLOAD_PROGRESS_FAILURES tries.   */
+
+    progress_wrap = document.getElementById('progress_wrap');
+    upload_progress_failures++;
+    if (upload_progress_failures >= TOTAL_UPLOAD_PROGRESS_FAILURES){
+      window.clearTimeout(interval);
+    } 
+    progress_wrap.style.visibility = 'hidden';
+}
+
+var humanvalue = ['B','KB','MB','GB']
+function humanize(bytes) {
+  curbytes = bytes;
+  iterations = 0;
+  while (curbytes>1024) {
+    iterations++;
+    curbytes=curbytes/1024;
+  }
+  return curbytes.toFixed(1) + ' ' + humanvalue[iterations];
+}
+
+interval = null;
+function fetch(uuid) {
+  /* no ajax here */
+  if (!xmlhttp) {
+    upload_ajax_problem();
+    return;
+  }
+
+  req = xmlhttp;
+  req.open("GET", "/admin/upload_progress/", true);
+  req.onreadystatechange = function () {
+    if (req.readyState == 4) {
+      try {
+        request_status = req.status;
+      } catch (e) {
+        /* Really bad. */
+        request_status = -1;
+      }
+      if (request_status == 200) {
+        var upload = new Function(" return "+req.responseText)();
+        if (upload) {
+          progress_wrap = document.getElementById('progress_wrap');
+
+          if (!upload.state) {
+            progress_wrap.style.visibility = 'hidden';
+            return
+          } else if (upload.state == 'done') {
+             window.clearTimeout(interval);
+             progress_wrap.style.visibility = 'hidden';
+             return;   
+          } else {
+             progress_bar = document.getElementById('progress_bar');
+             bar_txt = document.getElementById('progress_text');
+
+             progress_wrap.style.visibility = 'visible';
+             bar_txt.innerHTML = ((upload.received / upload.size) * 100).toFixed(1)
+                     + '% - ' + humanize(upload.received) + ' of ' 
+                     + humanize(upload.size);
+             bar_width__px = 400 * upload.received / upload.size;
+             progress_bar.style.width = bar_width__px + 'px';
+          }
+        } else {
+          upload_ajax_problem();
+        }
+      } else {
+        upload_ajax_problem();
+      }
+    }
+  };
+  try {
+    req.setRequestHeader("X-Progress-Id", uuid);
+  } catch (e) {
+    /* couldn't set the header, the request is broken. */
+    req.abort();
+  }
+  req.send(null); 
+
+}
+
+
+function openprogress(e) {
+    upload_progress_failures = 0;
+    uuid = "";
+    for (i = 0; i < 32; i++) {
+        uuid += Math.floor(Math.random() * 16).toString(16);
+        }
+    frm = e.target||e.srcElement;
+
+    if (frm.action.indexOf('?') == -1) {
+       frm.action=frm.action+"?progress_id=" + uuid;
+    } else {
+       frm.action=frm.action+"&progress_id=" + uuid;
+    }
+
+    if (document.getElementById('progress_wrap')) {
+        document.getElementById('progress_wrap').style.visibility = 'hidden';
+        document.getElementById('progress_bar').style.width = '0';
+        document.getElementById('progress_text').innerHTML = '0%';
+
+        interval = window.setInterval(
+        function () {
+            fetch(uuid);
+            },
+        1000
+        );
+        return;
+    }
+
+    pos = getxy()
+    posx = parseInt((pos.x/2)-(420/2), 10)
+    posy = parseInt((pos.y/2)-(50/2), 10)
+
+    progress_wrap = quickElement('div', document.body, '', 'style', 
+        'position: absolute; top: '+posy+'px; left: '+posx+'px; height: 50px; ' +
+        'padding: 10px; width: 420px; background: #ffffff; ' +
+        'border: solid 1px #dddddd;' +
+        'visibility: hidden;', 'id', 'progress_wrap')
+
+    progress_label = quickElement('h1', progress_wrap, 'Upload progress')
+
+    progress = quickElement('div', progress_wrap, '', 'style', 
+        'top: 0; left: 0; width: 0px; ', 'id', 'progress_bar', 'class', 'submit-row')
+
+    progress_text = quickElement('div', progress_wrap, '0%', 'style',
+        'color: #000000; ', 'id', 'progress_text')
+    progress_wrap.style.visibility = 'hidden';
+    interval = window.setInterval(
+        function () {
+            fetch(uuid);
+            },
+        1000
+        );
+    }
+
+addEvent(window, 'load', function() {
+        frms = document.getElementsByTagName('form');
+        for (var i=0; i<frms.length; i++) {
+           if (frms[i].encoding.toLowerCase() == 'multipart/form-data') {
+              addEvent(frms[i], 'submit',  openprogress);
+              return;
+           }
+        }
+    });

django/contrib/admin/options.py

@@ -154 +154 @@
         js = ['js/core.js', 'js/admin/RelatedObjectLookups.js']
         if self.prepopulated_fields:
             js.append('js/urlify.js')
+        if self.opts.has_field_type(models.FileField):
+            js.append('js/UploadProgress.js')
         if self.opts.has_field_type(models.DateTimeField) or self.opts.has_field_type(models.TimeField) or self.opts.has_field_type(models.DateField):
             js.extend(['js/calendar.js', 'js/admin/DateTimeShortcuts.js'])
         if self.opts.get_ordered_objects():

django/contrib/admin/urls.py

@@ -9 +9 @@
     #('^password_change/done/$', 'django.contrib.auth.views.password_change_done'),
     ('^template_validator/$', 'django.contrib.admin.views.template.template_validator'),
 
+    # Upload progress bar support
+    #('^upload_progress/$', 'django.contrib.admin.views.main.upload_progress'),
     # "Add user" -- a special-case view
     ('^auth/user/add/$', 'django.contrib.admin.views.auth.user_add_stage'),
     # "Change user password" -- another special-case view

django/contrib/admin/views/main.py

@@ -48 +48 @@
             res[i] = '_%02X' % ord(c)
     return ''.join(res)
 
+def upload_progress(request):
+    """
+    Given this request, returns a JSON
+    object that has information on a file upload progress.
+    If there is no file upload in progress, returns an
+    empty dictionary, '{}'.
+    """
+
+    from django.utils import simplejson
+
+    content = simplejson.dumps(request.file_progress)
+
+    return HttpResponse(content=content, mimetype='text/plain')
+
 def model_admin_view(request, app_label, model_name, rest_of_url):
     model = models.get_model(app_label, model_name)
     if model is None: