Schienen: Paperclip & Vorschau?

Question

Sie wissen, auf einigen Seiten, wenn Sie hochladen gefragt werden, sagen wir, einen Avatar, klicken Sie auf die Schaltfläche, wählen Sie Datei, dann drücken Sie OK, aber vor Sie die Seite Senden (wie in, wird kein Datensatz erstellt/aktualisiert), eine kleine Vorschau des Bildes erscheint?

Wie würde ich erreichen dies Paperclip für Rails?

Bonuspunkte für jeden, der mich zu einem Tutorial oder etwas zeigen kann, die mir vielleicht sagen, wie ein Javascript Ernte auf dem Bild zu tun, bevor die Aufzeichnung zu speichern.

Ich habe nicht in der Lage gewesen, zu dem Thema ... Dank für die Hilfe sehr auf Google zu finden!

Answer 1

Diese Art der Sache ist problematisch, aus einer Rails Perspektive wegen der Art Bild-Uploads funktionieren. Eine Strategie zur Verbesserung der Funktionsweise ist:

• Machen Sie eine Unterform für Ihr Bild hoch laden, möglicherweise swfupload mit, um es schlanker zu machen.
• Erstellen Sie ein Modell Ihrer Uploads zu erhalten, die eine randomisierte Zugriffsschlüssel verwendet, schließt es abzurufen und zu verknüpfen. Paperclip behandelt die angehängte Datei.
• Verwendung AJAX Ihr Hauptformular ausfüllen, indem ein verstecktes Feldes, oder möglicherweise ein sichtbares Kontrollkästchen Element mit den entsprechenden unique_key Einfügen, wenn das Unterformular beendet.

Ein typisches Modell sieht wie folgt aus etwas:

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 

Der Grund für das unique_key Feld ist, so dass Sie diese in die Form eines möglicherweise nicht gespeicherte Datensatz zu verknüpfen. Es ist vorteilhaft, die unique_key statt id zu verwenden, wenn es in URLs setzen, da es schwer zu sagen ist, wenn ein Benutzer in der Lage sein sollte, dieses Bild zu sehen oder nicht, wenn es da der Besitzer Benutzer hochgeladen wird, kann noch nicht zugeordnet werden.

Dies verhindert auch Neugierige aus einer Art von sequentieller, leicht zu erratende ID in der URL zu verändern und andere Avataren zu sehen, die hochgeladen wurden.

Sie können die endgültige Größe verändert Thumbnail-URL für den Avatar abrufen wie jedes Modell an dieser Stelle.

Sie können ganz einfach die Parameter beim Empfang Streifen aus und übersetzen zurück zu Avatar-ID-Nummern:

# 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 

Da die Menschen laden und wieder hochladen Bilder, werden Sie schließlich eine große Anzahl von verwaisten Datensätze, die nicht sind tatsächlich überall benutzt. Es ist einfach, eine Rake-Aufgabe zu schreiben, um alle diese zu löschen, nachdem eine angemessene Zeit verstrichen ist. Zum Beispiel:

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 Verwendung sollte die Wirkung der Spülung alle Papierklammer Material sowie haben.

Answer 2

Oder Sie Ajax verwenden und einen Iframe http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

Answer 3

ich die Lösung gefunden geschrieben here nützlich, können Sie es einfach ändern müssen nur eine Datei zu sein (wenn Sie einzelne Datei-Upload tun):

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

Hinweis: Ich habe ein separates Modell für Büroklammer verwendet, ein Upload-Modell mit dem Bildattribut. Sie können dem Bildvorschau-Tag eine Formatierung hinzufügen, um die Bildgröße zu formatieren (andernfalls entspricht dies der Originalgröße).