🔔 本の下書きプレビューをシェアできるようになりました
Zenn
📥

【Laravel×Dropzone.js】ドラッグ&ドロップ対応のアップロード機能を構築する

2025/01/28に公開
1
Laravel
tech

はじめに

Webアプリケーションを開発していくうえでドラッグ&ドロップ対応のアップロード機能があると便利ですよね。
この記事では、Laravelに Dropzone.jsを組み合わせることでドラッグ&ドロップ対応のファイルアップロード機能を実装します。

開発環境

今回は以下の開発環境において検証しました。

  • OS: Windows 11
  • Web Server: XAMPP v3.3
  • PHP: 8.2.12
  • Laravel Framework: 11.40.0

Laravelプロジェクトの構築

  1. Laravelプロジェクトを新規作成します。

    $ composer create-project laravel/laravel drag-drop-upload-app
$ cd drag-drop-upload-app
$ php artisan serve

    ブラウザ上で localhost にアクセスし、アプリケーションが正しく動作しているか確認します。問題がなければ、ターミナルで Ctrl + C を押してサーバーを一旦停止します。

  2. データベーステーブルを作成します。

    $ php artisan make:migration create_files_table --create=files

    作成したマイグレーションファイルを次のように設定します。

    yyyy_MM_dd_HHmmss_create_files_table.php
    public function up()
{
    Schema::create('files', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

  3. テーブルのマイグレーションを実行します。

    $ php artisan migrate

  4. ルートを設定します。

    routes/web.phpに次のコードを追加します。

    web.php
    use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/upload', function(){
    return view('upload');
});

Route::post('/upload', [FileUploadController::class, 'store']);

  5. コントローラを実装します。
    コントローラーを作成するために次のコマンドを実行します。

    $ php artisan make:controller FileUploadController

    App\Http\Controllers\FileUploadController.phpが作成できたら、次のコードを追加します。

    FileUploadController.php
    <?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class FileUploadController extends Controller
{
    public function store(Request $request)
    {
        if ($request->hasFile('file')) {
            $file = $request->file('file');
            $filename = time() . '_' . $file->getClientOriginalName();
            $path = $file->storeAs('uploads', $filename, 'public');

            return response()->json([
                'success' => true,
                'file_path' => $path,
                'file_name' => $filename
            ]);
        }

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

UIの構築

続いて、resources/views/upload.blade.phpを作成し、次のコードを追加します。

upload.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファイルアップロード</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Dropzone.js の CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="w-full max-w-lg p-6 bg-white rounded-lg shadow-md">
        <h1 class="text-2xl font-bold text-center text-gray-800 mb-6">ファイルアップロード</h1>
        <form action="/upload" class="dropzone border-2 border-dashed border-blue-500 rounded-lg bg-gray-50 p-6 text-center" id="file-dropzone">
            @csrf
            <p class="text-gray-600">ここにファイルをドラッグ＆ドロップするか、クリックして選択してください</p>
        </form>
    </div>

    <!-- Dropzone.js の JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
    <script>
        Dropzone.options.fileDropzone = {
            maxFilesize: 2, // MB
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            dictDefaultMessage: "ここにファイルをドラッグ＆ドロップしてください",
            success: function(file, response) {
                console.log(response);
                alert("アップロードが成功しました: " + response.file_name);
            },
            error: function(file, response) {
                alert("アップロードに失敗しました");
            }
        };
    </script>
</body>
</html>

動作確認

ターミナルで以下のコマンドを実行し、開発サーバーを起動します。

php artisan serve

ブラウザで http://localhost/upload にアクセスし、ファイルアップロード機能が正しく動作するか確認します。問題無ければ、ブラウザ上に以下のように表示されます。

動作確認として、ドラッグ&ドロップしてファイルを追加すると、画像のサムネイルとステータスバーが画像上に表示されます。

画像のアップロードが成功すると通知されます。

こちらのように実装できたでしょうか？

おわりに

LaravelとDropzone.jsを使用することで、ドラッグ&ドロップ対応のファイルアップロード機能が簡単に実装できました。これにより、モダンなUIのファイル操作を実現できるのでぜひ参考にしてみてください。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】
ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。

https://onewedge.co.jp/

GitHubで編集を提案
1

Discussion

ログインするとコメントできます