From eb0a2bb84659f3e7229dca25b96864257796e867 Mon Sep 17 00:00:00 2001
From: Alexey Bilay <alexey.bilay@gmail.com>
Date: Mon, 13 Aug 2012 18:07:01 +0800
Subject: [PATCH] Move JS code to  ra.widgets.coffee. Bind the event handler on
 JS side, not by using 'onchange' html attribute. Add check about extension
 for preview (only graphic files, other files without preview - hide
 image_container)

---
 .../javascripts/rails_admin/ra.widgets.coffee | 15 ++++++++++++++
 .../main/_form_file_upload.html.haml          | 20 ++-----------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/rails_admin/ra.widgets.coffee b/app/assets/javascripts/rails_admin/ra.widgets.coffee
index a97b03dc6f..5da6d54e61 100644
--- a/app/assets/javascripts/rails_admin/ra.widgets.coffee
+++ b/app/assets/javascripts/rails_admin/ra.widgets.coffee
@@ -38,6 +38,21 @@ $(document).live 'rails_admin.dom_ready', ->
       $(this).find(".delete input[type='checkbox']").live 'click', ->
         $(input).children('.toggle').toggle('slow')
 
+    # fileupload-preview
+
+    $('form [data-fileupload]').change ->
+      input = this
+      image_container = $("#" + input.id).parent().children("#preview")
+      ext = $("#" + input.id).val().split('.').pop().toLowerCase()
+      if input.files and input.files[0] and $.inArray(ext, ['gif','png','jpg','jpeg','bmp']) != -1
+        reader = new FileReader()
+        reader.onload = (e) ->
+          image_container.attr "src", e.target.result
+        reader.readAsDataURL input.files[0]
+        image_container.show()
+      else
+        image_container.hide()
+
     # filtering-multiselect
 
     $('form [data-filteringmultiselect]').each ->
diff --git a/app/views/rails_admin/main/_form_file_upload.html.haml b/app/views/rails_admin/main/_form_file_upload.html.haml
index 13cdb1f348..2bdcaf0ee2 100644
--- a/app/views/rails_admin/main/_form_file_upload.html.haml
+++ b/app/views/rails_admin/main/_form_file_upload.html.haml
@@ -4,8 +4,8 @@
   .wrap
     - if value = field.pretty_value
       = value
-    %img#preview{:src => "#", :width => 100, :height => 100}
-    = form.file_field(field.name, field.html_attributes.reverse_merge({ :data => { :fileupload => true }, :onchange => "generatePreview(this);" }))
+    %img#preview{:src => "#", :width => 100, :height => 100, :style => "display: none"}
+    = form.file_field(field.name, field.html_attributes.reverse_merge({ :data => { :fileupload => true }}))
 - if field.optional? && field.errors.blank? && file && field.delete_method
   %a.btn.btn-info{:href => '#', :'data-toggle' => 'button', :onclick => "$(this).siblings('[type=checkbox]').click(); $(this).siblings('.toggle').toggle('slow'); jQuery(this).toggleClass('btn-danger btn-info'); return false"}
     %i.icon-white.icon-trash
@@ -13,19 +13,3 @@
   = form.check_box(field.delete_method, :style => 'display:none;' )
 - if field.cache_method
   = form.hidden_field(field.cache_method)
-
-:plain
-  <script type="text/javascript">
-    function generatePreview(input) {
-      if (input.files && input.files[0]) {
-        var reader = new FileReader();
-        var i_id = input.id;
-
-        reader.onload = function (e) {
-            $('#' + i_id).parent().children('#preview').attr('src', e.target.result);
-        }
-
-        reader.readAsDataURL(input.files[0]);
-      }
-    }
-  </script>