Preview before downloading with Carrierwave

Question

I have a form where the user can create new images. I have successfully done this with Carrierwave. I was wondering if it is possible to preview the selected image in a browser before downloading? I found several attempts using javascript, but did not work for me.

This is the code to download the image using CARRIERWAVE:

<%= form_for @photo, :html => {:multipart => true} do |f| %>

  <%= f.file_field :image %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>

  <div class="actions">
    <%= f.submit "Save Photo" %>
  </div>
<% end %>

My goal is to have one small thumbnail of the image so that the user can see it before uploading. I assume that I can not use Rails here, because it can only be for the server side ...

Any ideas? :)

Answer 1

bootstrap 3, http://jasny.imtqy.com/bootstrap/javascript/#fileinput

Answer 2

Transloadit: https://transloadit.com/ Carrierwave . , : https://github.com/transloadit/rails-sdk. , , , , . , , . jquery :

updateAttachment: function (fileName, attachmentType) {     var self = this;

  $.ajax({
    type: "PUT",
    url: <your update url>,
    data: {
      attachment: {
        file: fileName
      }
    },
    success: function() {
      location = self.windowLocation();
    },
    error: function() {
      self.showError("Error uploading file.");
      location = self.windowLocation();
    }
  });
}