react-dropzone を使用して画面全体へD&Dを可能にする

react-dropzone の　インストール

npm install react-dropzone

https://react-dropzone.js.org/

実装

import { useDropzone } from 'react-dropzone'

const Dropzone = () => {
  const { getRootProps, getInputProps, isDragActive } = useDropzone()
  return (
    <div
      {...getRootProps()}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        backgroundColor: isDragActive ? 'rgba(0,0,0,0.5)' : 'transparent',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1000,
        pointerEvents: isDragActive ? 'auto' : 'none', // ドラッグ中のみドロップ可能にする
        transition: 'background-color 0.3s ease',
      }}>
      <input {...getInputProps()} />
      {isDragActive && <p style={{ color: 'white' }}>ここにファイルをドロップしてください</p>}
    </div>
  )
}

補足

上記実装だけですと、D&Dしかできません。
ユーザーのことを考えると「アップロード」ボタンを配置した方が親切です。
ボタンの設置方法は、公式のドキュメントを参照してください。

まとめ

react-dropzone を使用すると簡単にファイルのアップロードを実装できました。
公式のドキュメントを読むことで、包括的に機能を知ることができて、開発目線でのユーザーフレンドリーな機能や実装を提案することができました。