¿Cómo agregar File Dropper en Next.js?

En este artículo, vamos a aprender cómo podemos agregar File Dropper en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar nuestro cuentagotas de archivos, vamos a utilizar el paquete react-drag-drop-files. El paquete react-drag-drop-files nos ayuda a integrar cuentagotas de archivos en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-drag-drop-files y luego agregaremos un cuentagotas de archivos en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-drag-drop-files usando el siguiente comando:

npm i react-drag-drop-files

Estructura del proyecto: Se verá así.

Adición de File Dropper: después de instalar el paquete react-drag-drop-files, podemos agregar fácilmente File Dropper en nuestra aplicación. Para este ejemplo, vamos a agregar un cuentagotas de archivos a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

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 (
    <div>
      <h3>GeeksforGeeks - File Dropper</h3>
      <FileUploader 
        handleChange={handleChange} 
        name="file" 
        types={fileTypes} 
      />
    </div>
      
  );
}
  
export default DragDrop;

Explicación: en el ejemplo anterior primero, estamos importando nuestro componente FileUploader desde el paquete instalado. Después de eso, estamos creando una nueva variable constante para almacenar los tipos de archivo aceptados, y luego estamos usando el enlace useState para configurar los datos del archivo. Luego estamos agregando nuestro cuentagotas de archivos usando el componente FileUploader.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: