Rails: Paperclip & previews?

Ответ 1

Этот вид проблематичен с точки зрения Rails из-за того, как работает загрузка изображений. Одна из стратегий, позволяющая ей работать лучше:

• Создайте подформу для загрузки изображения, возможно, используя swfupload, чтобы сделать его более упорядоченным.
• Создайте модель для получения ваших загрузок, которая включает в себя некоторый рандомизированный ключ доступа, используемый для извлечения и связывания. Скрепка скрепляет прикрепленный файл.
• Используйте AJAX для заполнения вашей основной формы, вставив скрытое поле или потенциально видимый элемент флажка с соответствующей уникальной кнопкой, когда заканчивается подформация.

Типичная модель выглядит примерно так:

class Avatar < ActiveRecord::Base
  has_attached_file :image
  # ... Additional Paperclip options here

  before_validation :assign_unique_key

  belongs_to :user

  def to_param
    self.unique_key
  end

protected
  def assign_unique_key
    return if (self.unique_key.present?)

    self.unique_key = Digest::SHA1.hexdigest(ActiveSupport::SecureRandom.random_number(1<<512).to_s)
  end
end

Причиной для поля unique_key является то, что вы можете связать это с формой потенциально несохраненной записи. Преимущественно использовать unique_key вместо id при размещении в URL-адресах, так как трудно определить, должен ли пользователь видеть это изображение или нет, когда он загружен, поскольку пользователь-владелец еще не может быть назначен.

Это также запрещает любопытным людям изменять какой-то последовательный, легко угаданный идентификатор в вашем URL-адресе и видеть другие загруженные аватары.

Вы можете получить окончательный уменьшенный URL-адрес миниатюры для Аватара, как и любой модели на данный момент.

Вы можете легко отключить параметры при получении и перевести обратно на идентификационные номера аватаров:

# If an avatar_id parameter has been assigned...
if (params[:user][:avatar_id])
  # ...resolve this as if it were a unique_key value...
  avatar = Avatar.find_by_unique_key(params[:user][:avatar_id])
  # ...and repopulate the parameters if it has been found.
  params[:user][:avatar_id] = (avatar && avatar.id)
end

# ... params[:user] used as required for create or update

Когда люди загружают и повторно загружают изображения, в конечном итоге у вас будет большое количество потерянных записей, которые фактически не используются нигде. Просто написать задачу рейка, чтобы очистить все это после того, как прошло разумное количество времени. Например:

task :purge_orphan_avatars => :environment do
  # Clear out any Avatar records that have not been assigned to a particular
  # user within the span of two days.
  Avatar.destroy_all([ 'created_at<? AND user_id IS NULL', 2.days.ago ])
end

Использование destroy_all должно также повлиять на очистку всего материала Paperclip.

Ответ 2

Я нашел решение размещенным здесь полезным, вам просто нужно его изменить, чтобы быть только одним файлом (если вы делаете одиночную загрузку файла)

<%= image_tag @upload.image, id:"something_unique"%>
<div class="row">
  <%= form_for @upload, :html => { :multipart => true } do |f| %>
    <%= f.file_field :image, id:"something_else_unique" %>
    <%= f.submit "Add photo" %>
  <% end %>
</div>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
      f=files[0]
      // Only process image files.
      if (f.type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function(theFile) {
          return function(e) {
            // alert(e.target.result);
            document.getElementById("something_unique").src=e.target.result;
          };
        })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
      }
    }
  document.getElementById('something_else_unique').addEventListener('change', handleFileSelect, false);
</script>

Примечание. Я использовал отдельную модель для paperclip, модель загрузки, которая имеет атрибут изображения. Вы можете добавить стиль в тег предварительного просмотра изображения, чтобы отформатировать размер изображения (в противном случае это будет оригинальный размер).

Ответ 3

Или вы можете использовать ajax и iframe http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files