Help with ckeditor image upload

Hello,

I am learning rails and trying to use ckeditor and paperclip.
When I try and upload an image file, I get:

[paperclip] Content Type Spoof: Filename 1.jpg (["image/jpeg"]), content
type discovered from file command: . See documentation to allow this
combination.
(1.0ms) ROLLBACK

What do I need to change to resolve this?

my picture.rb contains:
validates_attachment_content_type :data, :content_type => /\Aimage/

Thank you

Frank

If I cannot get this resolved, what editor do most use that allows users to upload and embed images?
Tinymce?

Which version of Paperclip do you use? There was a security issue with file types hence they changed the behaviour in version 4.0 of paperclip, but of course there was an error in 4.0 concerning content type mapping. In 4.1 they introduced a possibility to add options like so:

Paperclip.options[:content_type_mappings] = {
:pem => “text/plain”
}

``

or not writing it with the rocket hash notation but with symbols you want to write

Paperclip.options[:content_type_mappings] = {
php: ‘text/x-php’
}

``

I found the quoted solution there => https://github.com/thoughtbot/paperclip/issues/1462

I found the answer.

Had to use https://github.com/rmagick/rmagick/wiki/Installing-on-Windows

then set gem to gem “paperclip”, “~> 3.5.3”

I had to use version 3.5.3

I am learning Rails, so this has been a nightmare for me coming from
PHP.

Regarding your example for Paperclip.options, I do not know where I
would wright that code.

Do you have version 4.1 working?

Thanks

I have to admit, that I’m as well very new to Rails. :slight_smile:

I have not yet installed paperclip nor ckeditor but I’m working on an app on my own and your “case” seemed interesting to me because I also want to add an editor for editorial purposes writing and maintaining blog posts. Hence I made a bit of reaearch on my own.

As far as I know you can put those options or - in different situations - methods wherever you like, that is to say in “helpers” or “controllers” but if you use it in a particular helper it might not be valid/available for the whole app because of the scope/inheritance, so it’s best to include it to the application controller, or better to add it to the particular helper and include the helper in the app controller with the include method you already know from php.

But there’s a caveat and I’m not able to tell if this works for you or not. In the last weeks I learned that in particular the windows version of Rails has some inconsistencies to the other versions. And then I don’t know if these options I presented you were already implemented in version 3.5.3 of paperclip but you might want to try it out, just put this options for jpg into your app controller and see if it works. Maybe you have to restart the rails server too.

Kind regards.

Thank you, not sure if ckeditor is the best for rails development.
I also have LiveEditor from www.innovastudio.com, but cannot figure out
how to use it in Rails. I use it in PHP and it is great.

create a file at config/initializers/paperclip.rb

In that file put your paperclip-specific configuration options.

By default, everything in config/initializers/ loads when the Rails app boots up.

As far as WYSIWYG inline editors, you will probably lean on your knowledge of Javascript more heavily than Rails to implement any WYSIWYG editor — but there may be some specific integration points to note.

In particular, read up on how Rails keep strings sanitized and HTML-safe. You will need to bypass some of that for an inline editor, since the inline editor will need the output to be in HTML and not escaped HTML.

In the past I have used TinyMCE (another WYSIWYG editor), and it happens to have a gem that makes it easy to integrate into Rails (https://github.com/spohlenz/tinymce-rails), but by no means does that make it the only choice for inline editor. You just might have to get your hands dirty with Javascript to make the others work.

-Jason

Jason,

Does tinymce-rails have an image upload built-in?
If now, what other gem is needed to do this?

Thanks

mmmm… I see your problem. You want an “built-in” image uploader?

That’s actually pretty hard, but with a bit of work you will be able to pull that off.

You have two basic strategies:

  1. Make the user upload the image file somewhere else (like amazon S3 bucket) using their own client (like an FTP client), then copy & paste the URL into your WYSIWYG editor (wrapped inside an image tag) ---- most editors let you do that easily.

  2. provide an interface for the user to upload the image from their computer to your website (I see now why you were going down the paperclip route). Then make some kind of interface that allows them to drop a string-style reference to the image into the WYSIWYG editor. In the app I’m currently working on, we have a special macro inside the editor so you use something like this:

[IMAGE:123]

When output, this macro actually replaces the block of text with the image with id 123. (While editing, the editor doesn’t actually see the image, they only see the macro)

If you’re on Heroku, or designing for Scale, you have some special considerations when creating a web app that accepts large file uploads. Check out this article here which explains how it is done: https://devcenter.heroku.com/articles/paperclip-s3

In particular, see the note on this page that says:

Large files uploads in single-threaded, non-evented environments (such as Rails) block your application’s web dynos and can cause request timeouts and H11, H12 errors. For files larger than 4mb the direct upload method should be used instead.

In particular, if your images files are large (they say larger than 4 MB, but I would even say larger than 500K), you need to do direct upload to S3. This is documented here https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails

As you can see, this is actually a complicated can of worms (which is why you should strongly consider if option #1 above is better for you since it is much easier and quicker to implement)

You could probably write an uploader using method #2 described above that works with TinyMCE and inserts some kind of high-level macro or the actual image tag using javascript. But you definitely would have to get your hands dirty with javascript.

If you want to go with Method #2, I strongly recommend that you DO NOT do pass-through uploading on Heroku. Although it will work for very small files, at scale you will create long running-request bottlenecks that will affect other users of your app – people who aren’t even using the upload tool will see slow performance. The s3_direct_upload gem (below) is one solution to this problem (it is an implementation of what the Heroku article discusses when it says “Direct upload”)

see:

http://blog.littleblimp.com/post/53942611764/direct-uploads-to-s3-with-rails-paperclip-and

https://github.com/waynehoover/s3_direct_upload

Here’s another alternative for you---- check this out:

https://github.com/comfy/comfortable-mexican-sofa

It is a fully-fledged CMS engine that actually has a file uploader built in (I think you can upload a file and then DRAG the file reference from the “Upload files” panel on the right into the content you are editing). This is a bit of a departure from what you originally started with, but consider that you would be leveraging a lot of open source code that is already working.

In general I would classify what you are trying to build as a pretty expensive thing to build. Something like comfortable-mexican-sofa would allow you to leverage a very similar CMS interface and build on top of work that is already in place.

-Jason

I can see your points as outlined and thanks for the advise.
Since I am learning Rails, I am coming from a PHP background where I am
using ckeditor and have no issues with uploading files.

I am used to just telling PHP where the javascript files are and adding
the necessary javascript to my form.

This seems to be much harder in Rails, either because of Rails or
because I am learning Rails and find it harder.

Regards,

Frank

I looked into the source of the ckeditor gem (cf. https://github.com/galetahub/ckeditor) and read a bit in its documentation today…

I would say Rails acts nearly in the same manner as php would. You integrate the JS, you create a view with a form and add the corresponding classes to it. That’s it for the integration to “show”.

You then only have to add the corresponding actions for the submit buttons to “act” with your db if you would do it on your own. For the ckeditor gem it might be even more simple by just adding some options for your upload path for example, because ckeditor gem hast a file uploader integrated.

Kind regards.

I tried my rails app last night on my mac and it works fine.

Today at work on my windows 7, it fails with [paperclip] Content Type Spoof: Filename cartoon_tire.jpg

If I drop down to version 3 of paperclip, it works.

Now you have an argument to tell your boss he or she should buy a Mac for you. :slight_smile:

I won’t hold my breath. :slight_smile: