ダボハゼのブログ
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にはエラーがあった場合にファイル情報やエラーオブジェクトの配列が格納される
ると嬉しいです！
