ドラッグアンドドロップゾーンを作成します

そばEjiro Thankgod
ドラッグアンドドロップは、アプリケーションがブラウザでドラッグアンドドロップ機能を使用するプラットフォームです.ユーザーはマウスまたはタッチパッドでドラッグ可能な項目を選択し、ドロップした要素(ドロップゾーン)にそれらのファイルをドラッグし、マウスボタンを離すことによってそれらを削除します.
React-dropzone 複雑なドラッグアンドドロップインターフェイスを構築する際に、コンポーネントを破壊しておくための反応ライブラリのセットです.ドラッグアンドドロップで最も一般的なユースケースは、ファイルをアップロード、イメージ/ファイルを再配置し、複数のフォルダ間でファイルを移動することを含んでいます.我々は、ドラッグ＆ドロップインターフェイスでは、以下のような単純な反応アプリケーションを作成します.

このチュートリアルの終わりまでに、我々の反応アプリケーションでは、次のことができます.

ドラッグアンドドロップゾーンでファイルをドラッグアンドドロップします.

ファイル選択ダイアログを開始するClickイベント

ドロップゾーンでファイルプレビューを表示します.

リストファイル名、ファイルタイプ、ファイルサイズ

「オプション」ボタンをクリックします.

ドロップゾーンで受信したファイルを示します.

始める

まず第一に、我々は我々の反応アプリを作成するつもりです.私は、我々がすでにこのプロセスを知っていると思っています、しかし、我々は始めから始めます.我々は我々の端末からの反応アプリを作成しているnpx create-react-app drag-n-drop NPMを使用している場合は、他のスレッドを使用して実行する必要がありますyarn create React-app drag-n-drop .
アフターランnpm start or yarn start 始める.手動で生成したBoilerPlateファイルやコードなどを手動で削除することができます.

Faviconico

すべてのロゴファイル

マニフェスト.JSON

ロボットtxt

ウェブサイトjs

テストテスト.js

アプリ.テスト.js

あるいは、あなたは走ることができましたnpx clean-React-app を削除します.

ドラッグアンドドロップゾーンを実行する方法

我々は、ゼロからすべてのロジックとコンポーネントを構築することはありません.代わりに、利用可能な最も一般的な反応ドラッグアンドドロップライブラリのいずれかを使用します.反応DropZoneは非常に強力なライブラリとカスタムコンポーネントです.これは、ファイルのためのHTML - 5準拠ドラッグアンドドロップゾーンを作成する単純な反応フックです.DropZoneは、DropZoneをカスタマイズしたり、ファイルの種類を制限するなどの追加機能を提供します.
我々は、我々の反応DropZoneをインストールしますnpm install React-dropzone or yarn add React-dropzone . たった今、我々のコードは我々のものでこれのような何かを見なければなりませんApp.js コンポーネント.

import React from "react";

function App() {
  return <div></div>;
}

export default App;

我々は、我々がそれをクリックするとき、地域をつくりたいですReact-dropzone ライブラリはファイル選択ダイアログを開始します.コンポーネントを作成することから始めましょう.

//*Dropzone.js*//

import React from "React";
import { useDropzone } from "React-dropzone";

function Dropzone({ open }) {
  const { getRootProps, getInputProps } = useDropzone({});
  return (
    <div {...getRootProps({ className: "dropzone" })}>
      <input className="input-zone" {...getInputProps()} />
      <div className="text-center">
        <p className="dropzone-content">
          Drag’n’drop some files here, or click to select files
        </p>
        )}
      </div>
    </div>
  );
}

export default Dropzone;

今我々はアプリにDropZoneをインポートする必要があります.js

//*App.js*//

import React from "React";
import Dropzone from "./Dropzone";

function App() {
  // const [images, setImages] = useState([]);
  return (
    <div>
      <div className="container">
        <h1 className="text-center">Drag and Drop Test</h1>
        <Dropzone />
      </div>
    </div>
  );
}

export default App;

我々がこれをしたので、我々のブラウザーはこれのように見えなければなりません.

スタイリング

我々の反応DropZoneはうまく機能していますが、それは快適に見えません、したがって、それが少しより少しのスタイルになるので、それは実際のdropzoneのように見えるかもしれません.今、我々はindex.css スタイリングを実装するには

//*index.css*//
body {
  text-align: center;
  padding: 20px;
  border: 3px blue dashed;
  width: 60%;
  margin: auto;
}

輸入しなければならないindex.css 我々のアプリで.js結果は次の通りである.

ご覧の通り、これは我々の反応DropZoneです.しかし、それはまだよりスタイリングを必要とします.私はそれがより機能的に見えるようにいくつかのコンポーネントを追加したいので、今、唯一のことはドラッグアンドドロップとファイル選択ダイアログを開始するClickイベントです.また、dropzoneに描画されたファイルを保存するパスが必要です.

ファイルと記録ファイルのプロパティを受け入れる

あなたがこのガイドに従っているならば、あなたは反応DropZoneがファイルを受け入れないか、ファイル名、ファイルタイプとファイルサイズをリストしないのに気がつきましたそれは我々が取り組んでいるものです.私たちのdropzoneのための関数を作成するファイルを受け入れると、ファイル名、種類、およびサイズを表示できるようにする必要があります.コードはこのようになります.

import React from "React";
import { useDropzone } from "React-dropzone";
import "./index.css";

function Dropzone({ open }) {
  const { getRootProps, getInputProps, acceptedFiles } =
    useDropzone({});

  const files = acceptedFiles.map((file) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <div className="container">
      <div {...getRootProps({ className: "dropzone" })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here</p>
      </div>
      <aside>
        <ul>{files}</ul>
      </aside>
    </div>
  );
}

export default Dropzone;

我々のアプリでこのように見える;

ファイルをDropZoneにドラッグすると、ファイルが受け入れられ、そのプロパティ( name , type , size )が表示されます.

ボタンの追加とスタイリング

我々の反応DropZoneは形になっています、しかし、我々は手動でファイル選択ダイアログを始めるためにボタンを加えたいです.私たちがしなければならないのは、下のボタンコンポーネントを作成することです<p> 我々のdropzoneで.js

...
<p className="dropzone-content">
  Drag’ n’ drop some files here, or click to select files
</p>
)}
<button type="button" onClick={open} className="btn">
Click to select files
</button>
...

我々が今しなければならないすべては、スタイル名で我々のボタンスタイルですbtn そして、美しく見えさせてください.我々はインデックスに行きます.CSSと私たちのボタンを美化.

.btn {
  border: none;
  text-align: center;
  background-color: rgb(218, 216, 216);
  height: 50px;
  border-radius: 12px;
  color: black;
  font-weight: bold;
  transition-duration: 0.6s;
}

.btn:hover {
  background-color: blue;
  color: aliceblue;
}

そして、それは素晴らしく見えます!次に、IsDragActiveコンポーネントについて作業します.DropZoneファイルがDropZone内にあるかどうかを検出するように設定されています次に、ドロップゾーンのテキストが「ドラッグ」ドロップされたファイルをここからクリックします.

IsDragActiveコンポーネントの実装

いくつかのコードが必要です.

//*Dropzone.js*//

...

function Dropzone({ open }) {
  const { getRootProps, getInputProps, isDragActive, acceptedFiles } =
    useDropzone({});

  ...

  return (
    <div {...getRootProps({ className: "dropzone" })}>
      <input className="input-zone" {...getInputProps()} />
      <div className="text-center">
        {isDragActive ? (
          <p className="dropzone-content">
            Release to drop the files here
          </p>
        ) : (
          <p className="dropzone-content">
            Drag’n’drop some files here, or click to select files
          </p>
        )}
        <button type="button" onClick={open} className="btn">
          Click to select files
        </button>
      </div>
      <aside>
        <ul>{files}</ul>
      </aside>
    </div>
  );
}

export default Dropzone;

オープンソースセッション

OpenReplay フルストーリーとログオンにオープンソースの代替手段です.それはあなたのすべてのユーザーがあなたのアプリケーションで行うと、すべての問題のスタックの動作方法を示すすべての再生によって完全な観測能力を与える.OpenReplay自分のデータを完全に制御するためのホストです.

ハッピーデバッギング、現代のフロントエンドチームstart monitoring your web app for free .

画像プレビュー

グリッドレイアウト(別のクールな機能)で画像を表示するにはimagegrid.js . 別のライブラリを使用しますReact-dnd .

//*ImageGrid.js*//

...

function App() {
  const [images, setImages] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.map((file) => {
      const reader = new FileReader();

      reader.onload = function (e) {
        setImages((prevState) => [
          ...prevState,
          { id: cuid(), src: e.target.result },
        ]);
      };

      reader.readAsDataURL(file);
      return file;
    });
  }, []);

  return (
    <main className="App">
      <h1 className="text-center">Drag and Drop Test</h1>
      <Dropzone onDrop={onDrop} accept={"image/*"} />
      <ImageGrid images={images} />
    </main>
  );
}

export default App;

チェックするなら<Dropzone onDrop={onDrop} accept={“image/*”} /> , あなたは、我々がイメージを受け入れるだけでそれを作ったが、複数のファイルタイプを許すことができるとわかります.また、スタイリングを適用します.

//*index.css*//

.file-list {
  display: flex;
  flex-wrap: wrap;
  width: 65%;
  margin: 20px auto;
  padding: 10px;
  border: 3px dotted black;
}

.file-list img {
  height: 300px;
  width: 300px;
  object-fit: cover;
}

そして、我々のドラッグアンドドロップゾーンは、手動でファイルダイアログと私たちの画像の表示プレビューを開始するための私たちのスタイルの良いボタンで完全に動作しています.

結論

異なる反応ドラッグアンドドロップライブラリは、グリッドレイアウトを反応させる反応美しいDNDからの範囲に至るまで、最終的には、DND(私はイメージのプレビューのために使用して、私は次の記事でそれを議論するつもりです)反応します.彼らは彼らの長所と短所を持っているが、それらはすべてあなたがそれらを使用するものに応じて一意に動作します.たとえば、ドラッグアンドドロップゾーンを以前にカスタマイズするために、DropZoneを使用しました.あなたの反応DropZoneをカスタマイズできるように多くの方法があります.たぶん、あなたは私たちがそこで行った特定のファイルタイプを望みます、あるいは、あなたは受け入れるか、拒絶するリストを望みますか?また、ボタンを使用してプログラムダイアログでファイルダイアログを開くこともできます.また、チェックすることができますtheir website を参照してください.
ここでは、ここでのプロジェクトの完全なコードを示します.

//*App.js*//

import React, { useCallback, useState } from "React";
import cuid from "cuid";
import Dropzone from "./Dropzone";
import ImageGrid from "./components/ImageGrid";
import "./index.css";
import "./App.css";

function App() {
  const [images, setImages] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.map((file) => {
      const reader = new FileReader();

      reader.onload = function (e) {
        setImages((prevState) => [
          ...prevState,
          { id: cuid(), src: e.target.result },
        ]);
      };

      reader.readAsDataURL(file);
      return file;
    });
  }, []);

  return (
    <main className="App">
      <h1 className="text-center">Drag and Drop Test</h1>
      <Dropzone onDrop={onDrop} accept={"image/*"} />
      <ImageGrid images={images} />
    </main>
  );
}

export default App;

//*ImageGrid.js*//

import React from "React";
// Rendering individual images
const Image = ({ image }) => {
  return (
    <div className="file-item">
      <img
        alt={`img - ${image.id}`}
        src={image.src}
        className="file-img"
      />
    </div>
  );
};

// ImageList Component//
const ImageGride = ({ images }) => {
  // render each image by calling Image component
  const renderImage = (image, index) => {
    return <Image image={image} key={`${image.id}-image`} />;
  };
  // Return the list of files//
  return (
    <section className="file-list">{images.map(renderImage)}</section>
  );
};

export default ImageGride;

//*Dropzone.js*//

import React from "React";
import { useDropzone } from "React-dropzone";

function Dropzone({ onDrop, accept, open }) {
  const { getRootProps, getInputProps, isDragActive, acceptedFiles } =
    useDropzone({
      accept,
      onDrop,
    });

  const files = acceptedFiles.map((file) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <div>
      <div {...getRootProps({ className: "dropzone" })}>
        <input className="input-zone" {...getInputProps()} />
        <div className="text-center">
          {isDragActive ? (
            <p className="dropzone-content">
              Release to drop the files here
            </p>
          ) : (
            <p className="dropzone-content">
              Drag’ n’ drop some files here, or click to select files
            </p>
          )}
          <button type="button" onClick={open} className="btn">
            Click to select files
          </button>
        </div>
      </div>
      re
      <aside>
        <ul>{files}</ul>
      </aside>
    </div>
  );
}

export default Dropzone;

//*index.css*//
body {
  text-align: center;
}

.dropzone {
  text-align: center;
  padding: 20px;
  border: 3px blue dashed;
  width: 60%;
  margin: auto;
}

.btn {
  border: none;
  text-align: center;
  background-color: rgb(218, 216, 216);
  height: 50px;
  border-radius: 12px;
  color: black;
  font-weight: bold;
  transition-duration: 0.6s;
}

.btn:hover {
  background-color: blue;
  color: aliceblue;
}

.file-list {
  /* border: 3px dotted black; */
  display: flex !important;
  flex-wrap: wrap;
  width: auto;
  padding: 10px 20px;
  margin: 20px 30px;
  /* border: 3px dotted black; */
}

.file-list img {
  height: 100%;
  width: 100px;
  padding-right: 10px;
  object-fit: cover;
}

我々は正常にドラッグしてファイルをドロップするための小さなプロジェクトを構築しました.反応の多くの機能があります.さらに、下記のリンクをチェックしてください.

Documentation and examples

Github source code

ハッピーコーディング!