2010-02-09 16 views
18

जब आप अपलोड करने के लिए कहा जाता है, तो एक अवतार, आप बटन पर क्लिक करते हैं, फिर ठीक दबाते हैं, लेकिन से पहले आप पेज सबमिट करते हैं (जैसा कि कोई रिकॉर्ड नहीं बनाया गया है)/अद्यतन), छवि का एक छोटा सा पूर्वावलोकन दिखाता है?रेल: पेपरक्लिप और पूर्वावलोकन?

रेल के लिए Paperclip का उपयोग करके मैं इसे कैसे पूरा करूं?

किसी भी व्यक्ति के लिए बोनस पॉइंट जो मुझे ट्यूटोरियल या कुछ ऐसा करने के लिए इंगित कर सकता है जो मुझे बता सकता है कि रिकॉर्ड सहेजने से पहले छवि पर जावास्क्रिप्ट फसल कैसे करें।

मैं इस विषय पर Google पर अधिक नहीं ढूंढ पा रहा हूं ... मदद के लिए धन्यवाद!

उत्तर

19

इस तरह की चीज एक रेल परिप्रेक्ष्य से समस्याग्रस्त है क्योंकि छवि अपलोड करने के तरीके के कारण। यह बेहतर काम करने के लिए एक रणनीति है:

  • अपनी छवि को अपलोड करने के लिए एक उप-विधि बनाएं संभवतः यह अधिक सुव्यवस्थित बनाने के लिए 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 क्षेत्र के लिए कारण होता है ताकि आप एक संभावित न सहेजा गया रिकॉर्ड के रूप में इस लिंक कर सकते हैं। आईडी के बजाय इसे 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 का प्रयोग के रूप में अच्छी तरह से सभी पेपरक्लिप सामग्री के शुद्धिकरण का प्रभाव होना चाहिए।

5

मैंने पाया समाधान तैनात here उपयोगी, तुम बस केवल एक फ़ाइल होने के लिए इसे संशोधित करने के लिए (यदि आप एक फाइल अपलोड कर रहे हैं) की जरूरत है:

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

नोट: मैंने पेपरक्लिप के लिए एक अलग मॉडल का उपयोग किया, एक अपलोड मॉडल जिसमें छवि विशेषता है। आप तस्वीर के आकार को प्रारूपित करने के लिए छवि पूर्वावलोकन टैग में स्टाइल जोड़ सकते हैं (अन्यथा यह मूल आकार होगा)।

संबंधित मुद्दे