CKeditor uploading to S3, but not accessible in editor - RAILS - Carrierwave

Question

rails 5.1.4 ruby 2.4.1 ckeditor 4.2.4 carrierwave 1.2.2 minimagick 4.8.0 fog-aws 2.0.1

I have ckeditor backed by carrierwave and it's connected to an S3 bucket. The image is being uploaded to the S3 bucket. I can see the files in there! BUT The ckeditor screen freezes and this is the output from heroku logs..rails server gives the same error. This is definitely a ckeditor config issue because I can upload a cover photo via the photos uploader where ckeditor is not the middle man. It's just an html file field using carrierwave and S3. I am able to recall the cover photo and display that from the S3 bucket so I know my credentials are good.

HEROKU LOGS:

Started POST "/ckeditor/pictures?&CKEditor=ckeditor&CKEditorFuncNum=1&langCode=en" for IP ADDRESS

Processing by Ckeditor::PicturesController#create as HTML

Parameters: {"upload"=>#<ActionDispatch::Http::UploadedFile:0x000000038f2868 @tempfile=#<Tempfile:/tmp/RackMultipart20180315-4-1xodi16.jpg>, @original_filename="coloursquare.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"upload\"; filename=\"coloursquare.jpg\"\r\nContent-Type: image/jpeg\r\n">, "ckCsrfToken"=>"56COpAWYrezg8OINmQYCmH6Hr1I5ZVxy1u9YtFmP", "CKEditor"=>"ckeditor", "CKEditorFuncNum"=>"1", "langCode"=>"en"}

DEBUG -- 

DEBUG -- SQL INSERT INTO "ckeditor_assets" ("data_file_name", "data_content_type", "data_file_size", "type", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"[0m  [["data_file_name", "coloursquare.jpg"], ["data_content_type", "image/jpeg"], ["data_file_size", 12893], ["type", "Ckeditor::Picture"], ["created_at", "2018-03-15 23:25:06.970758"], ["updated_at", "2018-03-15 23:25:06.970758"]]

heroku[router]: at=info method=POST path="/ckeditor/pictures?&CKEditor=ckeditor&CKEditorFuncNum=1&langCode=en" host=stormy-hollows-12083.herokuapp.com request_id=0e9fd60d-685e-4cd5-9296-413b68e0bf45 fwd="73.96.105.72" dyno=web.1 connect=0ms service=274ms status=500 bytes=1825 protocol=https

DEBUG -- COMMIT

INFO -- Completed 401 Unauthorized in 261ms (ActiveRecord: 27.2ms)

FATAL -- 

FATAL -- : ArgumentError (Version content doesn't exist!):

FATAL --  

FATAL -- : app/models/ckeditor/asset.rb:4:in `url'

app/models/ckeditor/picture.rb:5:in `url_content'

CKEDITOR PICTURE UPLOADER.rb

class CkeditorPictureUploader < CarrierWave::Uploader::Base
  include Ckeditor::Backend::CarrierWave  
  include CarrierWave::MiniMagick

  storage :fog

  def store_dir
    "uploads/ckeditor/pictures/#{model.id}"
  end

  def default_url
    "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  end

  def content_type_blacklist
    ['application/text', 'application/json']
  end

  def extension_white_list
    Ckeditor.image_file_types
  end

  def content_type_blacklist
    ['application/text', 'application/json']
  end
end

CKEDITOR config.js

CKEDITOR.editorConfig = function( config ) {
  config.language = 'en';
  config.uiColor = '#ffffff';
  config.pasteFromWordRemoveStyles = false;
  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
  config.filebrowserImageUploadUrl = "/ckeditor/pictures?";
  config.filebrowserUploadUrl = "/ckeditor/attachment_files";
  config.allowedContent = true;
}

MODEL CKEDITOR asset.rb

class Ckeditor::Asset < ActiveRecord::Base
  include Ckeditor::Orm::ActiveRecord::AssetBase

  delegate :url, :current_path, :content_type, to: :data

  validates :data, presence: true
end

MODEL CKEDITOR picture.rb

class Ckeditor::Picture < Ckeditor::Asset
  mount_uploader :data, CkeditorPictureUploader, mount_on: :data_file_name

  def url_content
    url(:content)
  end
end

Seems like you're getting a 401 unauthorized, this means you have some type of permissions issue. Is this a private bucket? — ricks
they are not public but belong to me. I have permissions set up in the carrierwave initializer via .env. The photos are going into the bucket successfully. They are just not accessible to the editor after they've been uploaded. — user8773096
hmm i'm not entirely sure what it is, but i believe its some type of authentication error your having if you're receiving a 401 after making a post request, double check all your keys — ricks

Thanh Thanh Thanh Thanh · Accepted Answer · 2018-06-08T19:06:56

I found that in Ckeditor::AssetResponse#asset_url method, the asset object is not reloaded, so asset.content_url will always be nil thus caused the error. I fixed it like this:

class Ckeditor::Picture < Ckeditor::Asset
  ...
  def url_content
    url(:content) || begin
      if persisted?
        reload
        url(:content)
      end
    end
  end
end

And similarly for Ckeditor::AttachmentFile class if you have it.

CKeditor uploading to S3, but not accessible in editor - RAILS - Carrierwave

1 Answers