React-Dropzoneで画像ファイルサイズを制御する方法

1. 最大ファイルサイズの制限: React-Dropzoneでは、maxSizeプロパティを使用してアップロードできるファイルの最大サイズを制御できます。次のように設定します。

import { useDropzone } from 'react-dropzone';
function MyDropzone() {
  const onDrop = (acceptedFiles) => {
    // アップロードされたファイルの処理
  };
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    maxSize: 5242880, // バイト単位で最大サイズを設定 (例: 5MB)
    onDrop,
  });
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>ファイルをここにドロップしてください。</p>
      ) : (
        <p>ファイルをドラッグアンドドロップするか、クリックして選択してください。</p>
      )}
    </div>
  );
}

上記の例では、maxSizeを5242880に設定しています。これは5メガバイトを表しています。アップロードされたファイルのサイズがこの制限を超える場合、onDropイベントは発生しません。

2. ファイルタイプの制限とサイズ制限の組み合わせ: 特定のファイルタイプのみを許可し、同時にファイルサイズの制限を設定することもできます。例として、画像ファイルのみを許可し、最大サイズを5MBに制限するコードを示します。

import { useDropzone } from 'react-dropzone';
function MyDropzone() {
  const onDrop = (acceptedFiles) => {
    // アップロードされたファイルの処理
  };
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: 'image/*',
    maxSize: 5242880, // バイト単位で最大サイズを設定 (例: 5MB)
    onDrop,
  });
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>画像ファイルをここにドロップしてください。</p>
      ) : (
        <p>画像ファイルをドラッグアンドドロップするか、クリックして選択してください。</p>
      )}
    </div>
  );
}

上記の例では、acceptプロパティを使用して、image/*と指定することで画像ファイルのみを許可しています。

これらはReact-Dropzoneで画像ファイルサイズを制御するための一般的な方法です。必要に応じて、他のオプションやカスタマイズも可能です。詳細については、React-Dropzoneのドキュメントを参照してください。