Setting up Froala WYSIWYG editor with CarrierWave and Rails

Question

I've been trying to get Froala fully working with my rails set up. I have a type of blog like application with posts and images associated with each post.

class Post < ActiveRecord::Base
has_many :images
accepts_nested_attributes_for :images

class Image < ActiveRecord::Base
belongs_to :post
mount_uploader :image, ImageUploader

I'm trying to figure out how to get this working with Froala. I can set the upload URL in the Froala config, but I have no idea what it should be.

<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageUploadURL: '????',

      imageUploadParams: {
        id: 'my_editor'
      }
    })
  });
</script>

I've been researching this all day and tried everything I could think of. Any help would be very much appreciated. Thank you.

Answer 1

I used the carrierwave and fog to upload to Amazon S3. Here is how it looks like,I'll skip the fog part and you may need to do some adjustments. However, the concept is easy.

I used angularJS, but the jquery options should look like this. You will need to define your upload route with POST method

The javascript:

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

Then you will need to implement the /attachment/upload.json.

In Rails

-- attachment.rb
class Attachment < ActiveRecord::Base
    mount_uploader :picture, PictureUploader
end

Because it is ajax calling, you will need to handle CSRF token verify in your controller when you submit. This example will skip the verfication: so add skip_before_filter :verify_authenticity_token in your controller. If you don't want to skip the verification. you will need to pass the parameter in the Froala initialization with imageUploadParams: {'authenticity_token': your csrf token}. So let's go over the rails part.

-- attachments_controller.rb
class AttachmentsController < ApplicationController
    skip_before_filter :verify_authenticity_token
  ...


    def upload
        # The Model: Attachment, created below.

        @attachment = Attachment.new
        @attachment.picture = params[:file]
        @attachment.save

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

end

Use rails generate a PictureUploader and create model in console

rails generate uploader Picture
rails g model attachment picture:string
rake db:migrate

In your route.rb, setup the route to your controller#method

post 'attachment/upload' => 'attachments#upload'

So you will have a route /attachment/upload through POST, and it call the attachment#upload. Hope it helps! Let me know if anything confuse you.