Reactでファイルのドラッグアンドドロップ

Reactでファイルのドラッグアンドドロップを行う場合、自分で機能を作っても良いですが「react-dropzone」を使うと簡単に実装できます。

この記事では、「react-dropzone」を使用してしてファイルのドラッグアンドドロップを行う方法について紹介します。

react-dorpzoneを使ってファイルのドラッグアンドドロップ
終わりに

react-dorpzoneを使ってファイルのドラッグアンドドロップ

react-dropzoneのインストール

はじめに「create-react-app」で作成したプロジェクトに対して、以下のコマンドで「react-dropzone」をインストールします。

npm install react-dropzone

react-dropzoneを使う準備

「react-dropzone」をインストールしたら使う準備をします。

使用するコンポーネントで「useDropzone」をimportし、「acceptedFiles」「getRootProps」「getInputProps」を取得します。

import { useDropzone } from 'react-dropzone'

function DropZone() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone()

  return (
    <div className="container">
    </div>
  )
}

export default DropZone

ファイルのドラッグアンドドロップを受け付ける

続いて「react-dropzone」を使用してファイルのドラッグアンドドロップを受け付けるようにします。

ここでは画像ファイルのドラッグアンドドロップを受け付けるようにします。

import {useDropzone} from 'react-dropzone'

function DropZone() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone()

  return (
    <div className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} accept="image/*" />
        <p>Drag and drop some image files here, or click to select image files</p>
      </div>
    </div>
  )
}

export default DropZone

この時点でファイルのドラッグアンドドロップを受け付けられるようになりましたが、ドラッグアンドドロップ可能な領域がわかりづらいため、スタイルをつけていきます。

.container {
  margin: 0 auto;
  border: 2px dashed #ccc;
  background-color: #eee;
  color: #bbb;
  max-width: 600px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

上記を反映すると以下のような領域が表示されるようになり、領域内にファイルをドラッグアンドドロップすることができるようになります。

また、領域内のp要素(文字列の部分)をクリックすることでファイル選択を行うことも可能です。

ドラッグアンドドロップの検出

ドラッグアンドドロップやファイル選択を行われたことを検出する場合、acceptedFilesにファイルの一覧が格納されるためuseEffectで変更を検知することができます。

import {useEffect} from 'react'
import {useDropzone} from 'react-dropzone'

function DropZone() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone()
  useEffect(() => {
    // ここでファイル操作
  }, [acceptedFiles])

  return (
    <div className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} accept="image/*" />
        <p>Drag and drop some image files here, or click to select image files</p>
      </div>
    </div>
  )
}

export default DropZone

また、useDropzoneにドロップ時の検出関数を渡すことで同じようなことを実現できます。(公式ではこちらが紹介されています)

import {useDropzone} from 'react-dropzone'

function DropZone() {
  const onDrop = acceptedFiles => {
    // ここでファイル操作
  }
  const {getRootProps, getInputProps} = useDropzone({onDrop})

  return (
    <div className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} accept="image/*" />
        <p>Drag and drop some image files here, or click to select image files</p>
      </div>
    </div>
  )
}

export default DropZone

どちらの場合でも「ここでファイル操作」という場所でファイルに対して操作を行うことでファイル読み込み時の処理を設定することができます。