Quillの画像をAjaxを使ってサーバーにアップロードする方法【Laravel】

この記事では、LaravelとQuillを組み合わせて、Quillでアップロードされた画像をAjaxを使用してサーバーにアップロードする方法をまとめてみました。

Laravelプロジェクトのセットアップ

まず、Laravelプロジェクトをセットアップします。Laravelがすでにインストールされている場合は、このステップをスキップして大丈夫です。

composer create-project --prefer-dist laravel/laravel your-project-name
cd your-project-name

Quillのセットアップと設定

Quillをプロジェクトに統合します。QuillはCDNから読み込むことができますが、ローカルにファイルをダウンロードして使用することもできます。その場合は、必要なファイルをダウンロードして、publicフォルダー内に配置します。

public/
  └── quill/
      ├── quill.js
      └── quill.css

Quillの初期化には、以下のようなJavaScriptコードを使用します。

<!DOCTYPE html>
<html>
<head>
  <!-- head部分のコード省略 -->
</head>
<body>
  <div id="editor">
    <!-- Quillエディターが表示される部分 -->
  </div>

  <script src="{{ asset('quill/quill.js') }}"></script>
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });

    <!-- 本記事の後半で、Ajaxのコード記述例と解説があります -->
  </script>
</body>
</html>

画像のAjaxアップロード

Quillは、画像をサーバーにアップロードする機能がデフォルトで備わっていません。そこで、Ajaxを使用して独自の画像アップロード機能を実装します。

まず、画像をアップロードするためのルートとコントローラーを作成します。

php artisan make:controller ImageUploadController

次に、ルートをroutes/web.phpに追加します。

Route::post('/upload-image', 'ImageUploadController@upload')->name('upload.image');

画像を受け取るコントローラーの作成

ImageUploadControllerで画像を受け取り、保存します。アップロードされた画像はpublicディレクトリ内に保存します。

// ImageUploadController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageUploadController extends Controller
{
    public function upload(Request $request)
    {
        if ($request->hasFile('image')) {
            $image = $request->file('image');
            $imageName = time() . '_' . $image->getClientOriginalName();
            $image->move(public_path('images'), $imageName);

            return response()->json(['success' => true, 'image_url' => asset('images/' . $imageName)]);
        }

        return response()->json(['success' => false]);
    }
}

Quillの画像アップロードに関するAjaxの実装例

この追加したJavaScriptコードでは、ボタンをクリックするとQuillエディター内のすべての画像を取得し、それらの画像をFormDataオブジェクトに追加します。そして、fetch関数を使用してAjaxリクエストをサーバーに送信します。

サーバー側のImageUploadControllerで画像を受け取り、保存する処理は変わらず、サーバーから返ってきた画像URLをクライアント側のQuillエディターに挿入することで、画像のアップロードが完了します。

このようにして、Ajaxを使用して非同期に画像をサーバーにアップロードすることが可能です。

<!DOCTYPE html>
<html>
<head>
  <!-- head部分のコード省略 -->
</head>
<body>
  <div id="editor">
    <!-- Quillエディターが表示される部分 -->
  </div>

  <button id="upload-btn">画像をアップロード</button>
  
  <script src="{{ asset('quill/quill.js') }}"></script>
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });

    document.getElementById('upload-btn').addEventListener('click', function() {
      var editorContent = quill.root.innerHTML;

      // Quillエディターのコンテンツから画像を取得
      var images = quill.root.querySelectorAll('img');

      var formData = new FormData();
      images.forEach(function(image, index) {
        // 画像をFormDataに追加
        formData.append('image' + index, image.src);
      });

      // 画像をサーバーにアップロードするAjaxリクエスト
      fetch('/upload-image', {
        method: 'POST',
        body: formData
      })
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        if (data.success) {
          // サーバーから返ってきた画像URLをQuillエディターに挿入
          images.forEach(function(image, index) {
            var uploadedImageUrl = data.image_url;
            image.setAttribute('src', uploadedImageUrl);
          });

          alert('画像のアップロードが完了しました！');
        } else {
          alert('画像のアップロードに失敗しました...');
        }
      })
      .catch(function(error) {
        alert('通信エラーが発生しました');
      });
    });
  </script>
</body>
</html>