adding preview image for learning object paperclip upload

app/assets/javascripts/application/learning_objects_builder.js

+// show preview image
+$(function() {
+    $('#thumbnail_btn').on('change', function(event) {
+        var files = event.target.files;
+        var image = files[0]
+        var reader = new FileReader();
+        reader.onload = function(file) {
+            var img = new Image();
+            console.log(file);
+            img.src = file.target.result;
+            $('#preview_image_target').html(img);
+        }
+        reader.readAsDataURL(image);
+        console.log(files);
+    });
+});
\ No newline at end of file

app/views/learning_objects/build/_file_upload_form.html.erb

@@ -49,7 +49,7 @@
         Enviar arquivos <i style="margin-left:10px;" class="fa fa-book"></i></button>
 
       <%= link_to next_wizard_path, id: 'uploadThumbnail' do %>
-          <button class="btn btn-success"><i class="fa fa-book fa-1g"></i>Selecionar imagem de destaque</button>
+          <button class="btn-submit btn btn-warning btn-outline-rounded yellow"><i class="fa fa-book fa-1g"></i>Selecionar imagem de destaque</button>
       <% end %>
     </div>
 

app/views/learning_objects/build/select_thumbnail.html.erb

@@ -29,10 +29,12 @@
     <h3 class="head text-center">Envie uma foto de destaque para <strong><%= @learning_object.name %></strong></h3>
 
     <%= form_for @learning_object, url: wizard_path, method: :put, html: { multipart: true } do |f| %>
-        <%=  f.file_field :thumbnail, required: true  %>
+        <div id="preview_image_target"></div>
 
         <% unless @learning_object.thumbnail.blank? %>
-            <div>Thumbnail: <%= @learning_object.thumbnail_file_name %>&nbsp;<i id="remove_thumbnail" class="fa fa-trash fa-1"></i></div>
+            <div>
+              <%= image_tag @learning_object.default_thumbnail.url %>
+              <i id="remove_thumbnail" class="fa fa-trash fa-1"></i></div>
             <script>
               $("#remove_thumbnail").click(function(){
                 if(confirm("Você tem certeza?")){
@@ -45,6 +47,9 @@
               });
             </script>
         <% end %>
+
+        <%=  f.file_field :thumbnail, required: true, id: 'thumbnail_btn'  %>
+        
         <button type="submit" class="btn-submit btn btn-success btn-outline-rounded green">
           Enviar <i style="margin-left:10px;" class="fa fa-paper-plane"></i>
         </button>