Merge pull request #1272 from dexion/PreviewGenerationJS

Generation preview for uploading files
railsadminteam · Aug 13, 2012 · 04aec5b · 04aec5b
2 parents 90117a4 + eb0a2bb
commit 04aec5b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 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
@@ -1,9 +1,11 @@
 - file = form.object.send(field.method_name).presence
 
 .toggle{:style => ('display:none;' if file && field.delete_method && form.object.send(field.delete_method) == '1')}
-  - if value = field.pretty_value
-    = value
-  = form.file_field(field.name, field.html_attributes.reverse_merge({ :data => { :fileupload => true } }))
+  .wrap
+    - if value = field.pretty_value
+      = value
+    %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