Zenn
📁

React Drag and Drop Filesを使う際のTips 3選

2024/11/25に公開
React
reactdragdropfiles
tech

本記事では、React Drag and Drop Filesライブラリを活用する際の有用なTipsを3つご紹介します。これらのポイントを押さえることで、よりスムーズにドラッグ&ドロップ機能を実装できるようになります。

1. FileUploaderのchildren要素にクリック可能な要素がある場合はonClickCaptureを活用する

React Drag and Drop Filesライブラリでは、FileUploaderコンポーネントを使用してドラッグ&ドロップの機能を実装します。

しかし、childrenとして<a>タグや<button>タグなどのクリック可能な要素を配置すると、これらの要素をクリックしてもドラッグ&ドロップのファイル選択が優先されてしまう問題が発生します。

原因

FileUploader内部では、全体を包むUploaderWrapperがhtmlFor属性を持っており、この属性に渡されるnameが内部の<input>要素のidと紐づいています。そのため、ドロップゾーン内でクリックイベントが発生すると、<input>要素が優先的に処理されてしまいます。

解決策

children要素内のクリック可能な要素に対してonClickCaptureを設定し、クリックイベントの伝播を停止させます。これにより、キャプチャリングフェーズで親要素へのイベント伝播を防ぐことができます。


const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.stopPropagation();
  console.log('clicked');
};

<FileUploader>
  <button onClickCapture={handleClick}>
    Click me
  </button>
</FileUploader>

2. FileUploaderのtypesにはMIMEタイプと拡張子の両方を指定する

FileUploaderのtypesプロパティは、選択可能なファイルの種類を制限するために使用されます。（これは内部的には<input type="file" >のaccept属性をラップしています。）

このプロパティには、ブラウザによってサポートされるファイルタイプが異なることから、MIMEタイプとファイルの拡張子の両方を指定することが推奨されています。（引用: W3C HTML5 Forms Specification）

<FileUploader types={['csv', 'text/csv']} />

その際、指定する拡張子は".csv"ではなく"csv"としましょう。FileUploaderの内部のacceptedExtでは、

react-drag-drop-files/src/utils.ts
const acceptedExt = types.map((type) => `.${type.toLowerCase()}`).join(',');

と、与えられた値に対して"."をつけているためです。

3. FileUploaderをdisabledにする際は、classesにpointer-events: none;を併用する

例えば、データのローディング中にドラッグ&ドロップを無効化したい場合、disabledプロパティをtrueに設定します。しかし、このままではカーソルのCSSが変更されないため、ユーザーに無効化されていることが伝わりにくくなります。

解決策

disabledをtrueに設定するだけでなく、classesプロパティを使用してスタイルにpointer-events: none;を追加します。これにより、カーソルが適切に変更され、ユーザーに無効化状態が視覚的に伝わります。

const isLoading = true;

<FileUploader disabled={isLoading} classes={{ isLoading ? 'pointer-events-none' : '' }} /> // tailwindを使用

補足

childrenを指定しない場合は、デフォルトのスタイルが適用され、その中でcursor: pointerが設定されています。

反対に、childrenを指定する場合はスタイルが適用されないため、children側でのポインターの制御方法に依存します。

以上、React Drag and Drop Filesを効果的に活用するための3つの重要なTipsをご紹介しました。参考になれば幸いです！

Discussion