【備忘録】ドラッグ&ドロップでファイルアップロードをNext.jsで実装する

はじめに

この記事は react-dropzone の使い方の備忘録です。

インストール

npm install react-dropzone

最小セットでドラッグ&ドロップを実装する

app/page.tsx

"use client"
import { useDropzone } from "react-dropzone";

export default function Home() {
  const onDrop = (files: File[]) => {
    console.log(files);
  }

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()} style={{ border: "1px solid #ff7f50", width: 200, height: 150 }}>
      <input {...getInputProps()} />
      <p>ここにファイルをドラッグ&ドロップしてください。</p>
    </div>
  );
}

大事 なのは getRootProps と getInputProps と onDrop の 3点 です。

・getRootProps は
ドラッグ&ドロップ で ファイルアップロード が作動してほしい範囲に渡します。
この場合 divタグ に 赤枠 を付けているので 赤枠の中 で 作動 します。

・getInputProps は
getRootProps を渡した タグの中 の inputタグ に使用します。

・useDropzone に渡された onDrop は
ドラッグ&ドロップ されたタイミングで発火する callback関数 です。
callback関数 の 第1引数 には ドラッグ&ドロップ された ファイル群 が渡されます。

実際のアップロード処理は onDrop関数 内に記述することになります。

描画内容 はこうなります。
赤枠の中 を クリック か ドラッグ&ドロップ することで
ファイルアップロード を行えます。

範囲内でドラッグされていることを判定して当てるCSSを変更する

app/page.tsx

"use client"
import { useDropzone } from "react-dropzone";

export default function Home() {
  const onDrop = (files: File[]) => {
    console.log(files);
  }

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()} 
    style={ isDragActive ? 
    { border: "1px solid #3eb370", width: 200, height: 150, marginTop: 25, marginLeft: 50} : 
    { border: "1px solid #ff7f50", width: 200, height: 150, marginTop: 25, marginLeft: 50}}>
      <input {...getInputProps()} />
      <p>ここにファイルをドラッグ&ドロップしてください。</p>
    </div>
  );
}

大事 なのは
1.useDropzone から isDragActive を取り出していること
2.div の style の border の色を isDragActiveフラグ によって変更していること
の 2点 です。

・isDragActive は 範囲内でドラッグされていることを判定する フラグ です。
isDragActive を使うことで ドラッグされている時だけ という条件を使えます。

範囲内のボタンクリックのみでエクスプローラーを開くようにする

大事なのは
1. useDropzoneにnoClick: trueを渡して範囲内のクリックを無効化する
2. 戻り値からopenを取り出して、buttonタグのonClickに渡す
の２点です。

app/page.tsx

"use client"
import { useDropzone } from "react-dropzone";

export default function Home() {
  const onDrop = (files: File[]) => {
    console.log(files);
  }

  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ onDrop, noClick: true });

  return (
    <div {...getRootProps()} 
    style={ isDragActive ? 
    { border: "1px solid #3eb370", width: 200, height: 150, marginTop: 25, marginLeft: 50} : 
    { border: "1px solid #ff7f50", width: 200, height: 150, marginTop: 25, marginLeft: 50}}>
      <input {...getInputProps()} />
      <p>ここにファイルをドラッグ&ドロップしてください。</p>
      <button onClick={open}>ファイルを選択</button>
    </div>
  );
}