React 用のシンプルなファイル アップローダー

ドラッグ アンド ドロップでファイル アップロード領域にファイルを追加できる、シンプルな React ファイル アップローダー ライブラリ。

基本的な使い方:

1. ライブラリをインストールしてインポートします。

# Yarn
$ yarn add react-drag-drop-files

# NPM
$ npm i react-drag-drop-files –save

import { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

2. シンプルなドラッグ アンド ドロップ ファイル アップローダーを作成します。

const fileTypes = ["JPG", "PNG", "ZIP"];
export default function App() {
  const [file, setFile] = useState(null);
  const handleChange = (file) => {
    setFile(file);
  };
  return (
    <div className="App">
      <h1>Hello To Drag & Drop Files</h1>
      <FileUploader handleChange={handleChange} name="file" types={fileTypes} />
      <p>{file ? `File name: ${file.name}` : "no files uploaded yet"}</p>
    </div>
  );
}

3. 利用可能な小道具。

name: string;
types?: Array<string>;
classes?: string;
children?: JSX.Element;
maxSize?: number;
minSize?: number;
onSizeError?: (arg0: string) => void;
onTypeError?: (arg0: string) => void;
onDrop?: (arg0: File) => void;
onSelect?: (arg0: File) => void;
handleChange: (arg0: File) => void;

プレビュー:

ダウンロードの詳細:

GitHub: https://github.com/KarimMokhtar/react-drag-drop-files