在 React JS 中拖放文件功能

拖放界面使Web应用程序允许用户在网页上拖放文件。在本文中，我们将了解应用程序如何接受从底层平台的文件管理器中拖放到网页上的一个或多个文件。在这里，我们将使用react-dropzone包。让我们开始吧。

示例

首先，创建一个 React 项目 -

npx create-react-app newproject

转到项目目录 -

cd newproject

现在下载并安装react-dropzone包 -

npm i --save react-dropzone

我们将使用这个库在我们的 React 元素区域内添加一个可放置区域。这也用于添加文件选择区域。

在此示例中，我们将使用拖放功能在列表中添加文件名。在App.js中插入以下代码行-

import React from "react";
import { useDropzone } from "react-dropzone";
function Basic(props) {
   const { acceptedFiles, getRootProps, getInputProps } =
useDropzone();

   const files = acceptedFiles.map((file) => (
      <li key={file.path}>
         {file.path} - {file.size} bytes
      </li>
   ));
   return (
   <section className="container">
      <div {...getRootProps({ className: "dropzone" })}>
         <input
            {...getInputProps()}
            style={{ backgroundColor: "black", color: "white" }}
         />
         <br />
         <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
         <h4>Files</h4>
         <ul>{files}</ul>
      </aside>
      </section>
   );
}
export default App

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

解释

我们创建了三个变量 -

• 第一个变量存储所有文件详细信息，

• 第二个变量定义了此拖放功能将起作用的区域，以及

• 第三个变量使输入字段可放置。

输出结果

在执行时，它将产生以下输出 -

您可以从任何文件夹将文件拖放到此页面上。它将显示文件名及其大小。此外，您可以使用“选择文件”按钮打开文件夹位置并选择文件。