Laravelでドラッグアンドドロップによるファイルアップロード機能を実装するためには、JavaScriptのライブラリとLaravelのバックエンドを組み合わせて行います。以下の手順で進めることができます。
手順
フロントエンドの準備
JavaScriptのライブラリであるDropzone.jsを使用すると、簡単にドラッグアンドドロップのインターフェースを作成できます。
Dropzone.jsをインストールします。CDNから直接インポートするか、npmやyarnを使用してインストールできます。
<!-- CDNからインポートする場合 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.js"></script>- HTMLにドロップゾーンを作成します。
<form action="/upload" class="dropzone" id="my-dropzone"></form>- JavaScriptでDropzoneを初期化します。
<script>
Dropzone.options.myDropzone = {
paramName: "file", // ファイルパラメータ名
maxFilesize: 2, // ファイルサイズの最大値 (MB単位)
acceptedFiles: ".jpeg,.jpg,.png,.gif", // 受け付けるファイルタイプ
success: function(file, response) {
console.log("File uploaded successfully");
},
error: function(file, response) {
console.error("File upload failed");
}
};
</script>Laravelのバックエンドの設定
ファイルを受け取るエンドポイントをLaravelに作成します。
- ルートを設定します。
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;
Route::post('/upload', [FileUploadController::class, 'upload'])->name('file.upload');- コントローラを作成します。
php artisan make:controller FileUploadController- コントローラでアップロード処理を実装します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class FileUploadController extends Controller
{
public function upload(Request $request)
{
$request->validate([
'file' => 'required|mimes:jpeg,jpg,png,gif|max:2048',
]);
$file = $request->file('file');
$path = $file->store('uploads', 'public');
return response()->json(['path' => $path], 200);
}
}
ストレージの設定
publicディスクを設定し、storageフォルダのシンボリックリンクを作成
php artisan storage:link完成したコード
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
<title>File Upload</title>
</head>
<body>
<form action="/upload" class="dropzone" id="my-dropzone"></form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.js"></script>
<script>
Dropzone.options.myDropzone = {
paramName: "file",
maxFilesize: 2,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
success: function(file, response) {
console.log("File uploaded successfully");
},
error: function(file, response) {
console.error("File upload failed");
}
};
</script>
</body>
</html>Laravelのルートとコントローラ
// web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;
Route::post('/upload', [FileUploadController::class, 'upload'])->name('file.upload');// FileUploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class FileUploadController extends Controller
{
public function upload(Request $request)
{
$request->validate([
'file' => 'required|mimes:jpeg,jpg,png,gif|max:2048',
]);
$file = $request->file('file');
$path = $file->store('uploads', 'public');
return response()->json(['path' => $path], 200);
}
}
このようにして、LaravelとDropzone.jsを使ってドラッグアンドドロップによるファイルアップロード機能を実装できます。
