Предварительный просмотр перед загрузкой с Carrierwave

Question

У меня есть форма, где пользователь может создавать новые фотографии. Я успешно сделал это с Carrierwave. Мне было интересно, можно ли предварительно просмотреть выбранное изображение в браузере перед загрузкой? Я нашел некоторые попытки аутов с javascript, но не работал для меня.

Это код для загрузки изображения с 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 %> 

Моя цель состоит в том, чтобы иметь один небольшой эскиз изображения, чтобы пользователь мог видеть его перед загрузкой. Я предполагаю, что я не могу использовать Rails здесь, потому что он может быть только для серверной ...

Любые идеи? :)

Answer 1

Я нашел большой успех в использовании 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(); 
    } 
    }); 
} 

Answer 2

Если вы используете загрузчик 3 есть удивительное расширение для него здесь http://jasny.github.io/bootstrap/javascript/#fileinput