title: Blueimp Jquery File Upload : Doesn't show thumbnail preview image
body: <p>I used <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow noreferrer">Blueimp jQuery File Upload</a> in my Rails application. When user select files, I want to show thumbnail of the image and the name of the image before uploading files to server.</p>
  
  <p>I have been referring the <a href="http://blueimp.github.com/jQuery-File-Upload/" rel="nofollow noreferrer">demo</a> to customize this plugin. I am able to print name of the file on the screen but not able to show thumbnail. </p>
  
  <p>Here is the generated html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Fileupload&lt;/title&gt;
    &lt;link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/assets/jquery.fileupload-ui.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="/assets/jquery.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery_ujs.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/application.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery.tmpl.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/load-image.min.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/canvas-to-blob.min.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery.fileupload.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery.fileupload-fp.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery.fileupload-ui.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;meta content="authenticity_token" name="csrf-param" /&gt;
  &lt;meta content="Akp8GLPQ+DlFYI1g3CUA71hk0vg3G84aVwcVRHTlRUY=" name="csrf-token" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="files"&gt;
    &lt;form action="/users" class="upload" id="fileupload" method="post"&gt;
      &lt;input id="user_photo" name="user[photo]" type="file" /&gt;
      &lt;div&gt;Upload files&lt;/div&gt;
    &lt;/form&gt;
  
    &lt;table class="upload_files"&gt;&lt;/table&gt;
  &lt;/div&gt;
  &lt;!-- The template to display files available for upload --&gt;
  &lt;script id="template-upload" type="text/x-jquery-tmpl"&gt;
    &lt;tr class="template-upload fade"&gt;
      &lt;td class="preview"&gt;&lt;span class="fade"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td class="name"&gt;&lt;span&gt;${name}&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
      $(function () {
          $('#fileupload').fileupload({
              add: function (e, data) {
                  console.log('add');
                  $.each(data.files, function (index, file) {
                      console.log('Added file: ' + file.name);
                      //alert($('#tmpl-demo').tmpl(data));
                      $('#template-upload').tmpl(data.files).appendTo('.upload_files');
                  });
                  var jqXHR = data.submit()
                          .success(function (result, textStatus, jqXHR) {/* ... */})
                          .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
                          .complete(function (result, textStatus, jqXHR) {
                              console.log("complete");
                              //$('.upload_files').append('&lt;tr&gt;&lt;td&gt;'+ result +'&lt;/td&gt;&lt;/tr&gt;');
                          });
              },
              progress: function (e, data) {
                  console.log('progress');
              },
              start: function (e) {
                  console.log('start');
              },
              done: function (e) {
                  console.log('done');
              }
          }).bind('fileuploadadd', function (e, data) {
                      console.log('fileuploadadd');
                  }).bind('fileuploadprogress', function (e, data) {
                      console.log('fileuploadprogress');
                  }).bind('fileuploadstart', function (e) {
                      console.log('fileuploadstart');
                  }).bind('fileuploaddone', function (e) {
                      console.log('fileuploaddone');
                  });
  
  
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I compare the html generated after selecting files. The only difference is demo application has <code>&lt;canvas height="72" width="80"&gt;&lt;/canvas&gt;</code> element within <code>&lt;td class="preview"&gt;&lt;span class="fade"&gt;&lt;/span&gt;&lt;/td&gt;</code> which is missing in my application.</p>
  
  <p>It looks like some configuration problem. Would anyone please help me to configure it properly to show thumbnail as soon as user selects images from the disk?</p>