2016-05-30 25 views
8

Ich bin fest, was zu tun, um Bild hochladen in froala Editor. Ich habe carrierwave Arbeiten für das Hochladen von Bildern in Google Cloud-Speicher für andere Bereiche meiner App und jetzt möchte ich Bild-Uploads in froala Editor funktioniert auch.Rails 4 - Wie Bild hochladen in froala Editor mit Carrierwave?

Hier ist, was ich

bisher

Post image uplaoder

class PostImageUploader < CarrierWave::Uploader::Base 

    # Choose what kind of storage to use for this uploader: 
    storage :fog 

    # Override the directory where uploaded files will be stored. 
    # This is a sensible default for uploaders that are meant to be mounted: 
    def store_dir 
    "post-image" 
    end 


    # Add a white list of extensions which are allowed to be uploaded. 
    # For images you might use something like this: 
    def extension_white_list 
    %w(jpg jpeg gif png) 
    end 

    # Override the filename of the uploaded files: 
    # Avoid using model.id or version_name here, see uploader/store.rb for details. 
    def filename 
    "#{model.id}-#{original_filename}" if original_filename.present? 
    end 

end 

ich einen Beitrag Bildmodell gemacht

class PostImage < ActiveRecord::Base 
    belongs_to :post 
    mount_uploader :image, PostImageUploader 
    validate :image_size 

    # Validates the size of an uploaded picture. 
    def image_size 
     if image.size > 5.megabytes 
     errors.add(:picture, "should be less than 5MB") 
     end 
    end 

end 

Ich habe attach und detach Methoden in meinem Beitrag Controller getan habe aber ich weiß nicht, was ich ihnen geben soll.

Routen zu den Attach- und Detach-Methoden gemacht, aber sie könnten falsch sein, weil ich nicht sicher bin, ob ich die Methoden überhaupt brauche.

match '/guides/:guide_id/posts/attach' => 'posts#attach', :via => :create, as: :attach_guide_post_image 
match '/guides/:guide_id/posts/detach'=> 'posts#detach', :via => :delete, as: :detach_guide_post_image 

mein carriwewave initializer ist Setup und arbeitet (weil ich es an anderen Orten auf der Seite mit bin), damit ich glaube nicht, dass ich es in hinzufügen müssen. Und ich denke nicht, ich brauche meine Post-Controller hinzufügen new und create Methoden, ihre hübsche Standard-Lager.

Von hier ging ich auf die froala docs for image uploads, aber ich weiß nicht, welche Werte zu setzen und welche ich brauche und welche ich nicht brauche. Meine Fragen sind die in Großbuchstaben geschriebenen Kommentare.

<script> 
    $(function() { 
    $('.editor') 
     .froalaeditor({ 
     // Set the image upload parameter. 
     imageUploadParam: 'image', 
     // 1. I'M GUESSING THIS IS THE PARAM PASSED 

     // Set the image upload URL. 
     imageUploadURL: <%= attach_guide_post_image_path =%>, 
     // 2. MADE THIS PATH IN THE ROUTES 


     // Set request type. 
     imageUploadMethod: 'POST', 

     // Set max image size to 5MB. 
     imageMaxSize: 5 * 1024 * 1024, 

     // Allow to upload PNG and JPG. 
     imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'] 
     }) 
     .on('froalaEditor.image.beforeUpload', function (e, editor, images) { 
     // Return false if you want to stop the image upload. 

     //3. SO I PUT ERROR MESSAGE IN THESE?? IF SO SHOULD IT BE A POPUP OR TEXT ON THE SCREEN AND HOW 
     }) 
     .on('froalaEditor.image.uploaded', function (e, editor, response) { 
     // Image was uploaded to the server. 
     }) 
     .on('froalaEditor.image.inserted', function (e, editor, $img, response) { 
     // Image was inserted in the editor. 
     }) 
     .on('froalaEditor.image.replaced', function (e, editor, $img, response) { 
     // Image was replaced in the editor. 
     }) 
     .on('froalaEditor.image.error', function (e, editor, error, response) { 
     // Bad link. 
     else if (error.code == 1) { ... } 

     // No link in upload response. 
     else if (error.code == 2) { ... } 

     // Error during image upload. 
     else if (error.code == 3) { ... } 

     // Parsing response failed. 
     else if (error.code == 4) { ... } 

     // Image too text-large. 
     else if (error.code == 5) { ... } 

     // Invalid image type. 
     else if (error.code == 6) { ... } 

     // Image can be uploaded only to same domain in IE 8 and IE 9. 
     else if (error.code == 7) { ... } 

     // Response contains the original server response to the request if available. 
     }); 
    }); 
</script> 

Das habe ich bekommen. Ich kenne grundlegende JS und habe Schienen seit ungefähr 6 Monaten verwendet, also bin ich ziemlich neu dazu. Ich habe noch nie so etwas in Rails und Js gemacht und finde keine solide Anleitung dazu.

Oben ist was ich bekam und ich bin stecken. Ich würde gerne Hilfe dabei haben, was getan werden muss, damit die Bildupload funktioniert.

Antwort

0

Try this ...............

In Ihrem routes.rb

resources :posts do 
    collection do 
    post :froala_image_upload 
    end 
end 

In Ihrem posts_controller.rb

def froala_image_upload 
     uploader = PostImageUploader.new 
     file = params[:file] 
     uploader.store!(file) 
     render json: { success: true } 
    rescue CarrierWave::IntegrityError => e 
     render json: { error: e.message } 
end 

**script will look like this ...** 

<script> 
    $(function() { 
    $('.editor') 
     .froalaeditor({ 
     imageUploadParam: 'image', 
     imageUploadURL: 'froala_image_upload', 
     imageMaxSize: 5 * 1024 * 1024, 
     imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'] 
     }) 
     .on('froalaEditor.image.error', function (e, editor, error, response) { 
     // Response contains the original server response to the request if available. 
     }); 
    }); 
</script> 

Hoffe, das wird für Sie arbeiten.

+0

Nicht funktionieren, der Aufschlag hat sich nicht geändert –

3

kämpfte ich mit diesem gleiche Problem und entschied carrierwave ganz zu umgehen und nur direkt auf S3 hochladen wie folgt:

 $('.post-editor').froalaEditor({ 
      toolbarBottom: true, 
      toolbarButtons: ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'insertLink', 'insertImage', 'insertVideo'], 
      imageUploadToS3: { 
      bucket: "<%= @hash[:bucket] %>", 
      region: 's3-us-west-1', 
      keyStart: "<%= @hash[:key_start] %>", 
      callback: function (url, key) {}, 
      params: { 
       acl: "<%= @hash[:acl] %>", // ACL according to Amazon Documentation. 
       AWSAccessKeyId: "<%= @hash[:access_key] %>", // Access Key from Amazon. 
       policy: "<%= @hash[:policy] %>", // Policy string computed in the backend. 
       signature: "<%= @hash[:signature] %>", // Signature computed in the backend. 
      } 
      } 
     }) 

einen Initialisierer in Config-Einrichtung/initializers/AWS_CONFIG.rb:

AWS_CONFIG = { 
    'access_key_id' => ENV["S3_ACCESS_KEY"], 
    'secret_access_key' => ENV["S3_SECRET_KEY"], 
    'bucket' => 'froala-bucket', 
    'acl' => 'public-read', 
    'key_start' => 'uploads/' 
} 

Richten Sie die Amazon-Signatur in lib/amazon_signature ein.rb:

module AmazonSignature 
    extend self 

    def signature 
    Base64.encode64(
     OpenSSL::HMAC.digest(
      OpenSSL::Digest.new('sha1'), 
      AWS_CONFIG['secret_access_key'], self.policy 
     ) 
    ).gsub("\n", "") 
    end 

    def policy 
    Base64.encode64(self.policy_data.to_json).gsub("\n", "") 
    end 

    def policy_data 
    { 
     expiration: 10.hours.from_now.utc.iso8601, 
     conditions: [ 
     ["starts-with", "$key", AWS_CONFIG['key_start']], 
     ["starts-with", "$x-requested-with", "xhr"], 
     ["content-length-range", 0, 20.megabytes], 
     ["starts-with", "$content-type", ""], 
     {bucket: AWS_CONFIG['bucket']}, 
     {acl: AWS_CONFIG['acl']}, 
     {success_action_status: "201"} 
     ] 
    } 
    end 

    def data_hash 
    {:signature => self.signature, :policy => self.policy, :bucket => AWS_CONFIG['bucket'], :acl => AWS_CONFIG['acl'], :key_start => AWS_CONFIG['key_start'], :access_key => AWS_CONFIG['access_key_id']} 
    end 
end 

Und schließlich nennt es in Ihrem Posts:

before_action :set_hash_for_froala 

... 

def set_hash_for_froala 
    @hash = AmazonSignature::data_hash 
end 

Dieses Video war sehr hilfreich: http://rubythursday.com/episodes/ruby-snack-23-froala-wysiwyg-saving-images-on-amazon-s3

+1

Das ist großartig. Aber ich musste 'region' in' 's3'' in der Froala Editor Konfiguration (unter' imageUploadToS3') ändern – sequielo

2

Ich habe dies über ein Jahr vor. [Setting up Froala WYSIWYG editor with CarrierWave and Rails].

Ich werde versuchen, dies basierend auf Ihrem Fall zu beantworten.

Sie können die Datei in Aktion speichern in Ihrem Post-Controller speichern. Ich nehme an, dass das Modell "PostImage" mit dem Attribut "image" aus Ihrem Post ist. Dies ist die Steuerung wie folgt aussieht:

def attach 
    @postimage = PostImage.new 
    @postimage.image = params[:file] 
    @postimage.save 

    respond_to do |format| 
     format.json { render :json => { status: 'OK', link: @postimage.image.url}} 
    end 
end 

einfach die Methode in Ihrem Javascript initializer rufen

<script> 
    $(function() { 
     $('.selector').froalaEditor({ 
      // Set the image upload URL. 
      imageUploadURL: '<%= attach_guide_post_image_path =%>.json', 
      imageUploadMethod: 'POST' 
     }) 
    } 
</script> 

Hoffnung, das hilft.