【React】react-dropzoneの使い方

react-dropzoneはローカルのファイルを選択したりドラッグ&ドロップするためのライブラリです。

インストール方法

npm install --save react-dropzone
or
yarn add react-dropzone

最低限の使い方

import { useDropzone } from "react-dropzone";

const Index = () => {
  const { getRootProps, getInputProps, acceptedFiles } = useDropzone({});

  console.log(acceptedFiles);

  return (
    <>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>ここをクリックしてファイルを選択もしくはドラッグ&ドロップ</p>
      </div>
      <div>{acceptedFiles.map((acceptedFile) => acceptedFile.name)}</div>
    </>
  );
};

export default Index;

もう少し実用的にしてみます

import { useDropzone } from "react-dropzone";
import type { FileRejection } from "react-dropzone";

const Index = () => {
  const { getRootProps, getInputProps, acceptedFiles, fileRejections } =
    useDropzone({
      maxSize: 10240,
      accept: { "text/markdown": [] },
      multiple: false,
      validator: (file) => {
        if (file.name?.length > 5) {
          return {
            code: "fileNameLength",
            message: "ファイル名は5文字以下にしてください",
          };
        }
        return null;
      },
      onDropRejected: (files: FileRejection[]) => {
        return;
      },
      onDropAccepted: (files: File[]) => {
        files.map((file) => console.log(file.type));
      },
    });

  return (
    <>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>ここをクリックしてファイルを選択もしくはドラッグ&ドロップ</p>
      </div>
      {acceptedFiles.length > 0 && (
        <div>
          <p>AcceptedFile</p>
          {acceptedFiles.map((acceptedFile) => acceptedFile.name)}
        </div>
      )}
      {fileRejections.length > 0 && (
        <div>
          <p>RejectedFile</p>
          {fileRejections.map((fileRejection) => fileRejection.file.name)}
        </div>
      )}
      <div>
        {fileRejections.map((fileRejection) =>
          fileRejection.errors.map((error) => error.message)
        )}
      </div>
    </>
  );
};

export default Index;

コードの解説

maxSize：ドラッグ&ドロップできるファイルのファイルの最大サイズを指定

accept：ドラッグ&ドロップできるファイルのMIMEタイプを指定

multiple：複数ファイルをドラッグ&ドロップできるかの指定(デフォルトはtrue)

validator：ドラッグ&ドロップしたファイルに対して行うバリデーションチェックを指定。エラーとしたい場合はエラーオブジェクト(codeとmessage)を返し、エラーがない場合はnullを返す必要がある

onDropRejected：バリデーションチェックでエラーとなった場合、maxSizeで指定したファイルサイズを超えた場合、acceptで指定したMIMEタイプ以外のファイルをドラッグ&ドロップした場合に実行される

onDropAccepted：バリデーションチェックがエラーがなく、ファイルサイズ、MIMEタイプも問題ない場合に実行される

acceptedFilesにはバリデーションチェックやファイルサイズでエラーがなかった場合にドラッグ&ドロップしたファイル情報、fileRejectionsにはエラーがあった場合にファイル情報やエラーオブジェクトの配列が格納される

ると嬉しいです！

にほんブログ村