ReactからLaravelへの送信ファイルの量を設定する

送信できるファイルの容量を設定するには、
クライアント側（React+TypeScriptなど）とサーバー側（Laravelなど）
の両方で制限を設けるのが一般的です。
これにより、ユーザーのエクスペリエンスを向上させつつ、
不正なリクエストを防ぐことができます。

クライアント側の設定方法

クライアント側では、JavaScriptでファイルサイズを確認して制限を超えるファイルを
弾くことができます。

例: ファイルサイズ制限を設定（2MBに制限）

React+TypeScript

tsx

import React, { useState } from "react";

const FileUploader: React.FC = () => {
  const [error, setError] = useState<string | null>(null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0]; // 選択されたFileオブジェクトを取得
      const maxSize = 2 * 1024 * 1024; // 2MB（バイト単位）

      if (file.size > maxSize) {
        setError("ファイルサイズが2MBを超えています。");
      } else {
        setError(null);
        console.log("ファイル名:", file.name);
      }
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
};

export default FileUploader;

ポイント

ファイルサイズは file.size プロパティで取得できます（単位: バイト）。
ユーザーが制限を超えたファイルを選択した場合、エラーメッセージを表示します。

サーバー側（Laravel）の設定方法

サーバー側では、LaravelのリクエストバリデーションとPHPの設定を使用して
ファイルサイズの制限を行います。

1. Laravelのリクエストバリデーションを使用

Laravelでは、リクエストのバリデーションルールに max を追加することで、
アップロードファイルのサイズ制限を設定できます。

コントローラの例（2MBに制限）

php

public function upload(Request $request)
{
    $request->validate([
        'image' => 'required|file|max:2048', // サイズはキロバイト単位（2MB = 2048KB）
    ]);

    // ファイルを保存
    if ($request->file('image')->isValid()) {
        $path = $request->file('image')->store('uploads');
        return response()->json(['path' => $path], 200);
    }

    return response()->json(['error' => 'アップロードに失敗しました。'], 400);
}

2. PHPの設定（`php.ini`）

サーバー全体のアップロードサイズの制限を確認し、必要に応じて調整します。

主な設定項目

upload_max_filesize: アップロード可能な1ファイルの最大サイズ。
post_max_size: POSTリクエスト全体の最大サイズ
（upload_max_filesize より大きく設定する必要があります）。

設定例（`php.ini`）

ini

upload_max_filesize = 2M
post_max_size = 8M

設定反映

PHPの設定を変更した後は、Webサーバー（ApacheやNGINXなど）を再起動してください。

bash

sudo service apache2 restart
# または
sudo service nginx restart

3. CORSの対応

容量制限を適用する場合でも、CORS（Cross-Origin Resource Sharing）を設定して、
クライアントとサーバー間の通信が許可されていることを確認します。

Laravelの場合は、config/cors.php で以下を確認します。

php

'paths' => ['api/*'],
'allowed_methods' => ['POST'],
'allowed_origins' => ['http://localhost:3000'], // ReactのURL
'allowed_headers' => ['Content-Type', 'Authorization'],
'supports_credentials' => false,

クライアントとサーバー間で一貫性を保つ

推奨手順

クライアント側でファイルサイズをチェック（例: Reactで2MB以上を弾く）。
- ユーザー体験を向上させるため、エラーメッセージを即座に表示。
サーバー側でサイズ制限を再チェック（LaravelとPHPで制限）。
- 不正なリクエストを防ぐために必須。
PHPの設定を適切に設定（upload_max_filesize と post_max_size）。

注意点

ファイルサイズを厳密に制限する場合、クライアントとサーバーで
同じ制限を設定します。
サーバーのPHP設定が不足していると、クライアントで制限をかけても
サーバーエラーが発生します。

以上の方法で、送信できるファイル容量を安全かつ効率的に制限できます。