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)
reinh · Aug 13, 2012 · eb0a2bb · eb0a2bb
1 parent 9164c03
commit eb0a2bb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git 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
@@ -4,28 +4,12 @@
   .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
     = I18n.t('admin.actions.delete.menu').capitalize + " #{field.method_name}"
   = 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>