如何在 Next.js 中添加 File Dropper？

在本文中，我们将学习如何在 NextJs 中添加 File Dropper。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的 File Dropper，我们将使用 react-drag-drop-files 包。 react-drag-drop-files 包帮助我们在应用程序的任何地方集成文件释放器。所以首先，我们将安装 react-drag-drop-files 包，然后我们将在我们的主页上添加一个文件释放器。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-drag-drop-files 包：

npm i react-drag-drop-files

项目结构：它看起来像这样。

添加 File Dropper：安装 react-drag-drop-files 包后，我们可以轻松地在我们的应用程序中添加 File Dropper。对于这个例子，我们将在我们的主页上添加一个文件释放器。

在index.js文件中添加以下内容：

Javascript

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";
  
const fileTypes = ["JPG", "PNG", "GIF"];
  
function DragDrop() {
  const [file, setFile] = useState(null);
  const handleChange = file => {
    setFile(file);
  };
  return (
    
      GeeksforGeeks - File Dropper
      
    
      
  );
}
  
export default DragDrop;

说明：在上面的例子中，我们首先从安装的包中导入我们的 FileUploader 组件。之后，我们将创建一个新的常量变量来存储接受的文件类型，然后我们使用 useState 挂钩来设置文件数据。然后我们使用 FileUploader 组件添加我们的文件释放器。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

如何在 Next.js 中添加 File Dropper？

Javascript

GeeksforGeeks - File Dropper

输出：