From 146adfe9a871c4dc6355f0766037b4b1659d01e5 Mon Sep 17 00:00:00 2001
From: Mauricio Giacomini Girardello <mauriciogiacomini4@gmail.com>
Date: Wed, 30 Mar 2016 13:52:56 -0300
Subject: [PATCH] adding preview image for learning object paperclip upload
---
.../application/learning_objects_builder.js | 16 ++++++++++++++++
.../build/_file_upload_form.html.erb | 2 +-
.../build/select_thumbnail.html.erb | 9 +++++++--
3 files changed, 24 insertions(+), 3 deletions(-)
create mode 100644 app/assets/javascripts/application/learning_objects_builder.js
diff --git a/app/assets/javascripts/application/learning_objects_builder.js b/app/assets/javascripts/application/learning_objects_builder.js
new file mode 100644
index 000000000..6e4d6af89
--- /dev/null
+++ b/app/assets/javascripts/application/learning_objects_builder.js
@@ -0,0 +1,16 @@
+// 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
diff --git a/app/views/learning_objects/build/_file_upload_form.html.erb b/app/views/learning_objects/build/_file_upload_form.html.erb
index 47341ab42..452ac8e8e 100644
--- a/app/views/learning_objects/build/_file_upload_form.html.erb
+++ b/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>
diff --git a/app/views/learning_objects/build/select_thumbnail.html.erb b/app/views/learning_objects/build/select_thumbnail.html.erb
index 04f33baaa..da290750a 100644
--- a/app/views/learning_objects/build/select_thumbnail.html.erb
+++ b/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 %> <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>
--
GitLab