Rails: Paperclip & anteprime?

Question

Non si sa su alcuni siti quando ti viene chiesto di caricare, ad esempio, un avatar, si fa clic sul pulsante, selezionare il file, quindi premere OK, ma prima si inviare la pagina (come in, si crea nessun record / aggiornato), una piccola anteprima dell'immagine si presenta?

Come faccio a fare questo usando Paperclip per Rails?

I punti di bonus per chi mi può puntare verso un tutorial o qualcosa che potrebbe dirmi come fare una coltura Javascript sull'immagine prima di salvare il record.

Non sono stato in grado di trovare molto su Google su questo argomento ... grazie per l'aiuto!

Answer 1

Questo genere di cose è problematico dal punto di vista Rails a causa del modo in cui funzionano caricamento delle immagini. Una strategia per farlo funzionare meglio è:

• Fare un sotto-modulo per il caricamento delle immagini, possibilmente utilizzando swfupload per renderlo più snello.
• Crea un modello per ricevere i caricamenti che include alcuni chiave di accesso randomizzato utilizzato per recuperare e collegarlo. Paperclip gestisce il file allegato.
• Usa AJAX per popolare il modulo principale con l'inserimento di un campo nascosto, o potenzialmente un elemento di check-box visibile con l'unique_key appropriata, quando la sottomaschera finisce.

Un modello tipico simile a questa:

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

Il motivo per il campo unique_key è così che si può collegare questo per la forma di un disco potenzialmente non salvati. E 'vantaggioso utilizzare l'unique_key invece di id quando metterlo in URL dal momento che è difficile dire se un utente dovrebbe essere in grado di vedere questa foto o non quando viene caricato in quanto l'utente proprietario non può ancora essere assegnato.

Questo impedisce anche curiosi di alterare un qualche tipo di sequenziale, ID facili da indovinare l'URL e vedere gli altri avatar che sono stati caricati.

È possibile recuperare l'URL finale miniature ridimensionata per l'Avatar, come si farebbe con qualsiasi modello, a questo punto.

Si può facilmente striscia fuori i parametri al ricevimento e tradurre di nuovo a numeri ID Avatar:

# 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

Come persone caricare e ricaricare le immagini, vi troverete infine avere un gran numero di record orfani che non vengono effettivamente utilizzati ovunque. È facile scrivere una task rake per eliminare tutti questi dopo un ragionevole lasso di tempo è trascorso. Ad esempio:

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 dovrebbe avere l'effetto di spurgo tutto il materiale Paperclip pure.

Answer 2

Ho trovato la soluzione postato qui utile, basta modificare che sia un solo file (se si sta facendo singolo file):

<%= 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>

Nota: ho usato un modello separato per graffetta, un modello di upload che ha l'attributo dell'immagine. È possibile aggiungere stile al tag immagine di anteprima per formattare la dimensione dell'immagine (in caso contrario sarà la dimensione originale).

Answer 3

In alternativa è possibile utilizzare Ajax e un iframe http://www.html5rocks.com/en/tutorials/ file / dndfiles / # toc-lettura-files