joppot

コピペで絶対動く。説明を妥協しない

プログラミング

ruby on railsのckeditorでcarrierwaveを使って画像をアップロードする

投稿日:2014年9月2日 更新日:

Pocket

u90rju

概要

みなさんこんにちはcandleです。今回はckeditorの画像のアップロードを行ってみたいと思います。
ckeditorの画像のアップロードは公式githubにも記載されているのですが、まあやってみましょう。

前提

ckeditorがすでにruby on rails上で動いている。
もしも、まだckeditorの導入ができてない人は下の記事を参考にしてください。

ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する
説明はruby on railsのscaffoldとtwitterbootstrapを使用します。

SPONSORED LINK


carrierwaveとrmagick系をインストールする

railsプロジェクトのGemfileを開いて下の内容を書き込みます。

gem 'carrierwave'

gem 'rmagick'
gem 'mini_magick'

writecarrierwavegem

保存したら下のコマンドでインストールします。

bundle install --path vendor/bundle

gemのインストールが完了しました。

ファイルアップロード用のモデルを作る

公式サイトにもあるようにファイルのアップロードにcarrierwaveを使う場合は下のコマンドで作成します。

rails generate ckeditor:install --orm=active_record --backend=carrierwave

このコマンドを行うといくつかのファイルが作成されます。
ckeditorの為のモデルやマイグレーションファイルが作られるので下のコマンドでデータベースに反映させます。

bundle exec rake db:migrate

これでサーバに画像をアップロードできるようになりました。

ファイルをアップロードする

サーバを起動しましょう

bundle exec rails s

railsのckeditorを適応したscaffoldのnewに移動します。
下のようにckeditorが表示されているでしょうか?

ckeditorstyle-1

画像を挿入するボタンを押します。すると、別のウィンドウが出てくるので、そのアップロードを押しましょう。

newwindowtouploadfile

続いて、ファイルを選択をクリックします。
画像ファイルを選択して、「サーバーに送信」を押します。

successuploadpngfile

上の画像の様に、画像ファイルが表示されれば、ファイルのアップロードがうまくいっています。

コンソールで画像があるか一応確認します。
railsプロジェクトのpublic/uploads/ckeditor/pictures/1/に移動します。
最後の階層の1か、もしかすると2になっているかもしれないので自分のプロジェクトに合わせて移動してください。

exsistuploadfile

アップロードできましたね。

まとめ

carrierwaveを使うと比較的簡単にファイルのアップロードができるので是非試してください。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Rails pluginを使ったgemの作り方[2](rails組み込み編)

概要 みなさんこんにちはcandleです。前回に引き続き、gemの作成をやっていきましょう。 今回はgemを作成したら、それをrailsプロジェクト上で読み込み、動作テストをするところをやります。 前 …

railsのform_forとstrong parametersを使用して画像をアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリに画像をアップロードしてみましょう。 form_forは基本的にデ …

Rails pluginでengineを使ったgemの作り方[6](config編)

概要 みなさんこんにちはcandleです。今回は前回に引き続き、gemの作成をやっていきます。 gemのconfigとは恐らく一般的に以下の様な状況の時に使う事になると思います。 例えば、gemのプロ …

ruby on rails のckeditor gemの機能ボタンをカスタマイズする

概要 みなさんこんにちはcandleです。今回はruby on rails のckeditor gemのショートカットボタンをカスタマイズして自分が必要な機能のみを表示してみましょう。 前提 cked …

phpのsnappyライブラリをmacで使用して、webサイトのサムネイルを取得する

概要 みなさんこんにちはcandleです。今回はsnappyを使用して、ウェブサイトのサムネイルを自動的に取得したいとおもいます。 snappyはそれ自体がhtmlを画像にするスクリプトではなく、wk …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ