React に貼り付けてアップロードする

昨年、React-Uploady のリリースについて最初にブログを書いて以来、このライブラリはかなりのユーザー ベースを獲得し、 Githubで数百のスターを獲得し(スターを付けていない場合は、何をすればよいかお分かりでしょう⭐️️)、数千のダウンロードを獲得しました。月。

React でファイルをアップロードする新しい方法

Uploady が 1.0.0 のリリースに向けて動き出す中、その API は安定しており、しばらく静かであったことを嬉しく思います。そのため、破壊的な変更が前進するとは考えていません。

この投稿では、Uploady がテーブルにもたらす便利なコンポーネント、フック、およびユーティリティのランクに参加する最新のパッケージを共有したいと思います — rpldy/upload-paste . 貼り付けイベントからのアップロードの開始を簡単にします。

Whatsapp Web は、実際に貼り付けてアップロードする良い例です。ボタンをクリックしてファイル選択ダイアログを開いたり、ファイルをドラッグ アンド ドロップしてアップロードを開始したり、ファイルをクリップボードにコピーして貼り付けたりして、UI に集中することができます。これにより、アップロード フローが開始されます。これは非常に便利です。

これで、貼り付けてアップロードを React アプリに簡単に追加できるようになりました。@rpldy/upload-pasteは、HOC (高次コンポーネント) と、独自のコンポーネントでこれを有効にするカスタム フックを提供します。数行のコードしか必要としません。

上記の例のコードは、次のサンドボックスにあります。

コードタイム

Uploady のドラッグ アンド ドロップと新しい貼り付けによるアップロード機能の両方を組み合わせた例を見てみましょう。その結果、ユーザーは複数の方法でアップロードを開始できる、非常に優れたユーザー エクスペリエンスが実現します。

上記のコードはUploadDropZone ( @rpldy/upload-drop-zoneから) を使用し、 withPasteUpload HOCでラップします。本当にそれだけです。私たちの新しいコンポーネントである PasteUploadDropZone は、ドロップまたはペーストによってファイルを受け入れるようになりました。

withPasteUploadは、ほぼすべての React コンポーネントをラップできます。結果のコンポーネントは、いくつかの基本的な props (id、classname) とextraPropsと呼ばれる特別な props を受け入れます。この prop (オブジェクト) には、ラップされた基本コンポーネントに渡したい他の props を含めることができます。上記のように、新しいコンポーネントは通常の Uploadyオプション(例: autoUpload、params など)これは重要です。

しかし、待ってください、他にもあります…カスタムフック！

ページ全体またはカスタム要素で貼り付けてアップロードを有効にしたい場合は、usePasteUploadが最適です。

上記のコードは、カスタム フックを使用して、特定の要素で貼り付けてアップロードできるようにする方法を示しています。

フック関数のすべてのパラメーターはオプションです。

最初のパラメーターは、アプリで以前に <Uploady> プロバイダーに渡された props とオーバーライド/マージするために渡すことができるUpload Optionsオブジェクトです。

2番目のパラメーターは要素の参照です。ref が省略された場合、フックはグローバル オブジェクト (ウィンドウ) の貼り付けイベントをリッスンします。

3 番目のパラメーターは、貼り付けイベントによってアップロードが開始された後に呼び出される関数です。{ count: number }という形のオブジェクトが与えられます。Count は、貼り付けられたファイルの数です。

フックは、toggle と getIsEnabled の 2 つのメソッドを持つオブジェクトを返します。前者はリスナーを切り替えて、アンマウントせずに貼り付けリスニングを制御できるようにします。後者は、その名前が示すように、リスナーがアクティブな場合は true を返し、そうでない場合は false を返します。

React-Uploady の使命は、ファイル アップロード機能を React アプリケーションに追加することをできるだけ簡単にすることです。これは、多くのカスタマイズと拡張オプションを提供しながらもそうします。したがって、新しいupload-pasteパッケージは、既存の Uploady 機能とうまく適合すると思います。

試してみてください。あなたの経験をぜひ聞かせてください。