Fix flickering when replacing the upload template with the download t…

…emplate.
gawecoti · Dec 15, 2011 · 1b335ec · 1b335ec
1 parent ae2a8b8
commit 1b335ec
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * jQuery File Upload Plugin Demo 6.0
+ * jQuery File Upload Plugin Demo 6.0.1
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -150,7 +150,7 @@ <h3 class="title"></h3>
 <script id="template-upload" type="text/html">
 {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
     <tr class="template-upload fade">
-        <td class="preview"></td>
+        <td class="preview"><span class="fade"></span></td>
         <td class="name">{%=file.name%}</td>
         <td class="size">{%=o.formatFileSize(file.size)%}</td>
         {% if (file.error) { %}

diff --git a/jquery.fileupload-ui.js b/jquery.fileupload-ui.js
@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload User Interface Plugin 6.0
+ * jQuery File Upload User Interface Plugin 6.0.1
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -97,7 +97,8 @@
             // Callback for successful uploads:
             done: function (e, data) {
                 var that = $(this).data('fileupload'),
-                    template;
+                    template,
+                    preview;
                 if (data.context) {
                     data.context.each(function (index) {
                         var file = ($.isArray(data.result) &&
@@ -108,7 +109,15 @@
                         that._transitionCallback(
                             $(this).removeClass('in'),
                             function (node) {
-                                template = that._renderDownload([file])
+                                template = that._renderDownload([file]);
+                                preview = node
+                                    .find('.preview img, .preview canvas');
+                                if (preview.length) {
+                                    template.find('.preview img')
+                                        .prop('width', preview.prop('width'))
+                                        .prop('height', preview.prop('height'));
+                                }
+                                template
                                     .replaceAll(node);
                                 // Force reflow:
                                 that._reflow = that._transition &&
@@ -302,19 +311,19 @@
             var that = this,
                 options = this.options,
                 nodes = this._renderTemplate(options.uploadTemplate, files);
-            nodes.find('.preview').each(function (index, node) {
+            nodes.find('.preview span').each(function (index, node) {
                 var file = files[index];
                 if (options.previewFileTypes.test(file.type) &&
                         (!options.previewMaxFileSize ||
                         file.size < options.previewMaxFileSize)) {
                     window.loadImage(
                         files[index],
                         function (img) {
-                            $(img).appendTo(node);
+                            $(node).append(img);
                             // Force reflow:
                             that._reflow = that._transition &&
-                                img.offsetWidth;
-                            $(img).addClass('fade in');
+                                node.offsetWidth;
+                            $(node).addClass('in');
                         },
                         {
                             maxWidth: options.previewMaxWidth,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blueimp-file-upload",
-    "version": "6.0.0",
+    "version": "6.0.1",
     "title": "jQuery File Upload",
     "description": "File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.",
     "keywords": [