Laravel Vue Inertiaで安全にファイルをアップロードする方法

フォームの作成: まず、ファイルアップロード用のフォームを作成します。Vueコンポーネント内で、<input type="file">を使用してファイルの選択を可能にします。
Inertiaリクエストの作成: フォームの送信時に、Inertiaリクエストを作成します。Inertiaは、LaravelとVue.js間のシームレスな通信を実現するためのライブラリです。
バリデーション: サーバーサイドでファイルのバリデーションを行います。Laravelのバリデーションルールを使用して、ファイルのサイズ、形式、必要な場合は拡張子などを確認します。
ファイルの保存: バリデーションが成功した場合、ファイルをディスクに保存します。Laravelのstoreメソッドを使用して、ファイルを指定の場所に保存します。
フロントエンドへのレスポンス: ファイルの保存が完了したら、適切なレスポンスをフロントエンドに返します。Inertiaを使用して、Vueコンポーネント内でファイルのアップロードの成功や失敗をハンドリングします。

以下に、コードの例を示します。

フォームコンポーネント (Vue):

<template>
  <form @submit.prevent="submitForm">
    <input type="file" v-model="file">
    <button type="submit">アップロード</button>
  </form>
</template>
<script>
import { useForm } from '@inertiajs/inertia-vue3';
export default {
  setup() {
    const { post } = useForm();
    const file = ref(null);
    const submitForm = () => {
      const formData = new FormData();
      formData.append('file', file.value);
      post('/upload', formData);
    };
    return {
      file,
      submitForm,
    };
  },
};
</script>

コントローラー (Laravel):

use Illuminate\Http\Request;
public function upload(Request $request)
{
    $request->validate([
        'file' => 'required|file|max:1024', // ファイルの最大サイズは1MBとする例
    ]);
    $path = $request->file('file')->store('uploads');
    return response()->json(['path' => $path]);
}

上記のコードは、ファイルのアップロードを実装するための基本的な手順と例です。必要に応じて、セキュリティ関連の追加機能や改善策を実装することができます。