Help with ckeditor image upload

Rails
1

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

2

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

3

I found the answer.

Had to use Installing on Windows · rmagick/rmagick Wiki · GitHub
then set gem to gem “paperclip”, “~> 3.5.3”

4

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

5

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

6

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.

7

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.

8

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
(GitHub - spohlenz/tinymce-rails: Integration of TinyMCE with the Rails asset pipeline), 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

9

Jason,

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

Thanks

10

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:

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

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

11

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

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

12

I looked into the source of the ckeditor gem (cf.
GitHub - galetahub/ckeditor: Ckeditor 4.x integration gem for rails) 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.

13

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.

14

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

15

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

16

I won’t hold my breath. :slight_smile: