Laravelとsummernote連携:画像をサーバーにファイル形式で保存する方法

Laravel とリッチテキストエディタ

summernoteの画像はアップロード時にテキストに変換されてデータベースに保存されます。

ですが、画像はきちんとサーバーにファイル形式で保存したいですよね。

Ajax(エイジャックス)を利用すれば、アップロード後に自動で、画像をサーバーにファイル形式で保存できます。

手順をひとつずつ解説していきますね。

サンプルは別ページにご用意してあるので、仕上がりを確認したい場合は、最初にこちらを見てみてください。

じゅんこ
じゅんこ

今回はまず画像のリアル表示部分まで。

後半ではフォームを作成・保存まで進めていきます。

Laravelでsummernote使用時、画像をリアルタイム表示させる方法

まずはLaravelにsummernoteエディタを搭載していきます。

①Laravelのルート設定を行う

最初にLaravelのルート設定を行っておきましょう。

今回はエディタ表示用画像保存用の2つのルート設定を用意しておきます。

②Laravelのコントローラーを準備する// エディタ表示画面用

次にコントローラーを準備します。

下記コマンドでコントローラーを新規作成します。

app/Http/Controllersの中に Summernote.php コントローラーファイルができます。

ファイルを開き、まずはSummernoteのエディタ画面表示用のコードを入れていきます。

次に画像ファイル保存用のコードを入れます。

今回は【temp】フォルダの中にファイルが保存されるようにします。

publicフォルダの中にtempフォルダを作成しておいてください。

なお、これまでLaravelで画像保存を行ったことがない場合は、先にシンボリックリンクを作成しておきましょう。

シンボリックリンクってなに?

じゅんこ
じゅんこ

という方は、下記記事も併せて読んでくださいね。

③ビューファイルを準備する

それではいよいよ、summernoteエディタ搭載を行います。

といっても、下記のコードをいれるだけ。

今回はBootstrap4対応のエディタを使っています。

上記コードはsummernote公式サイトに掲載されたものをそのまま使用しています。

ご希望に合わせてレイアウト等変更を加えてください。

LaravelではCSRFに関する記述を忘れるとエラーになります!

Laravelで使うポイントとしては、csrf_token についてのコードを忘れずに入れること。

CSRFに関する記述を入れ忘れると、419 (unknown status) エラーになります。

CSRF(シーサーフ)対策はセキュリティ上非常に大事。

CSRFなんて聞いたことないけど。

じゅんこ
じゅんこ

そんな方は、こちらの記事でぜひ、概要を知っておいてください。

大事です!

④アップロード後に画像をエディタに表示するコードを追加

次に script 部分に処理を加えて、アップロードした画像がリアルタイムで表示されるようにしていきます。

<script></script>部分を下記のように書き替えてください。

ajaxの中で、またもや csrf-token について記述が必要になります。

url の部分では、最初に画損保存用にルート設定したURLを入れます。

これで、ざっとこんなエディタが出来上がります。

エラーになる場合は、URLの記述を見直してみて

エラーになる場合は、<script></script>の中の画像保存用URLを見直してみてください。

ここのURLは今いる場所を起点にします。

今回は、次のようにルートを設定しました。

summernoteエディタを設置したページのURL は【’/summernote/create’】。

画像を保存する場所は【’/summernote/temp’】。

summernoteの部分までは同じなので、ここまでは入れる必要がありません。

じゅんこ
じゅんこ

というより、入れてはいけません。

scriptタグ内の画像保存用URLは、下記のように、summernote以降の部分のみ記述します。

最後に:このあとデータベースに保存するには

この後は、通常どおりフォームを作成し、保存してあげればOKです。

方法がイマイチ分からない方は、後半も併せて読んでくださいね。

じゅんこ
じゅんこ

また後半でお会いしましょー

Laravel とリッチテキストエディタ

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【AWS関連・Webアプリ開発・生成AIのAPI活用のご相談承ってます】
お気軽にお声がけください。
御社にとって、最善の方法をご一緒に考えてまいります。
Zoomミーティング実施中。サンプルアプリご利用可能です。

お問合せフォーム

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました