React + TypeScript ドラッグ&ドロップでファイルアップロード

Reactでファイルをドラッグ&ドロップでアップロードする機能を作りました。
使ったのはdrop-zoneではなく、react-drag-drop-filesです。

1.インストール

npm i --save react-drag-drop-files

2.使い方

FileUploaderを使うと自動的にドラッグ&ドロップできるエリアが出てきます。

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const UploadArea: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  // typesは型がArrayなので配列で指定する
  const fileTypes = ["JPG", "PNG"];
  const handleChange = (file: File) => {
    setFile(file);
  };

  return (
    <>
      <FileUploader
        handleChange={handleChange}
        name="file"
        types={fileTypes}
      />
      {/*選択ファイル名を表示させる*/}
      <p>{file !== null ? `ファイル名：${file['name']}` : ''}</p>
    </>
  );
}

export default UploadArea;

こんな感じで出来上がります。

デザインをカスタマイズしたい場合は、
カスタマイズしたコンポーネントを<FileUploader>で囲えばOKです。

おまけ：アップロードする処理

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const UploadArea: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const fileTypes = ["JPG", "PNG"];
  const handleChange = (file: File) => {
    setFile(file);
  };

  const handleOnClick = useCallBack( async() => {
    const uploadFile = new FormData();
    uploadFile.append('file', file);

    await axios
      .post('/api/upload', uploadFile {
        headers: {
          'content-type': 'multipart/form-data',
        },
      })
      .then((res) => {
        alert('アップロード成功');
      })
      .catch((err) => {
        alert('アップロード失敗');
      });
  }

  return (
    <>
      <FileUploader
        handleChange={handleChange}
        name="file"
        types={fileTypes}
      />
      <p>{file !== null ? `ファイル名：${file['name']}` : ''}</p>
      <button onClick={() => handleOnClick()}>アップロード</button>
    </>
  );
}

export default UploadArea;

参考記事