Rails 4 - How to load image in carrier froala editor?

Question

I went in cycles on what to do to load the image in the froala editor. I have camera work for uploading images to Google Cloud Storage for other sections of my application, and now I want the images to be uploaded to the froala editor, which also works.

Here is what I have done so far

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 

I made an image model after recording

 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 

I made attach and detach methods in my post controller, but I don’t know what to insert them.

  def attach end def detach end def image_params params.require(:post_image).permit(:image) end 

Routes to attach and detach methods have been created, but they may be wrong because I'm not sure that I even need methods.

 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 

my carriwewave initializer is up and running (because I use it elsewhere on the site), so I don’t think I need to add it. And I don’t think I need to add my new and create , their pretty standard standard.

From here I went to the flula to download images , but I don’t know which values ​​I need to enter and which I need and which I don’t need. My questions are comments written in capital letters.

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

This is what I got. I know the basic JS and have been using rails for about 6 months, so I'm pretty new to this. I have never done anything like this in rails and js and could not find reliable guidance.

Over what I got and I'm stuck. I would like to help a little in what needs to be done from there to work with images.

Answer 1

I struggled with the same problem and decided to completely bypass the carrier wave and simply load directly onto S3 as follows:

  $('.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. } } }) 

Configure the initializer in config / 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/' } 

Configure Amazon signature in lib / amazon_signature.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 

And finally, name it in your PostsController:

 before_action :set_hash_for_froala ... def set_hash_for_froala @hash = AmazonSignature::data_hash end 

This video was very helpful: http://rubythursday.com/episodes/ruby-snack-23-froala-wysiwyg-saving-images-on-amazon-s3

Answer 2

I did it about a year ago. [ Customization of the Froala WYSIWYG editor with CarrierWave and Rails .

I will try to answer this in your case.

You can save the file in the attach application in your post controller. I assume the model is a "PostImage" with the "image" attribute from your post. This controller is as follows:

 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 

Just call the method in your javascript initializer

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

Hope this helps.

Answer 3

If you use flickering pearls, they have a problem open for this here https://github.com/froala/wysiwyg-rails/issues/22

Answer 4

Try it...............

On your routes. rb

 resources :posts do collection do post :froala_image_upload end end 

In your post_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> 

Hope this works for you.