dropzone npm (Cómo Funciona Para Desarrolladores)

La carga de archivos es una característica común en las aplicaciones web, y hacerla fácil de usar es crucial para una buena experiencia del usuario. Una biblioteca popular que simplifica este proceso es Dropzone.js. Cuando se combina con React, Dropzone puede ser una herramienta poderosa para implementar carga de archivos por arrastrar y soltar. El react-dropzone se integra perfectamente y sin problemas con un mínimo esfuerzo de desarrollo. Este artículo lo guiará a través de la integración de Dropzone con una aplicación React usando el paquete react-dropzone, un excelente contenedor alrededor de la biblioteca Dropzone.js.

En este artículo, también revisaremos el paquete NPM de IronPDF para generar, editar y gestionar documentos PDF.

¿Por qué usar Dropzone en React?

Dropzone ofrece varias características que hacen que la carga de archivos sea fluida:

1. Interfaz de arrastrar y soltar

Permite a los usuarios arrastrar y soltar archivos para habilitar la selección de archivos. Agrega un cuadro de diálogo de archivo programáticamente.

2. Previsualizaciones

Muestra vistas previas en miniatura de las imágenes predeterminadas de los archivos arrastrados. Las vistas previas de archivos en pantalla ayudan a mejorar la legibilidad de la interfaz de usuario.

3. Cargas de Archivos Múltiples

Admite cargar varios archivos a la vez.

4. Personalizable

Altamente personalizable con varias opciones y devoluciones de llamadas. Puede personalizar el cuadro de diálogo de apertura de archivo o el cuadro de diálogo de selección de archivo

5. Cargas de archivos grandes segmentados

Sube archivos grandes usando carga por partes.

6. Gestionar eventos

Se pueden manejar eventos de cancelación de diálogos de archivos y también de redimensionamiento de imágenes en el navegador.

Configuración de la Aplicación React

Antes de integrar Dropzone, asegúrate de tener una aplicación React configurada. Si no tienes una, puedes crear un nuevo proyecto de React utilizando Create React App:

npx create-react-app dropzone-demo
cd dropzone-demo

npx create-react-app dropzone-demo
cd dropzone-demo

Instalación de react-dropzone

Para usar Dropzone en su proyecto de React, necesita instalar el paquete react-dropzone:

npm install react-dropzone
or
yarn add react-dropzone

npm install react-dropzone
or
yarn add react-dropzone

Uso básico de react-dropzone

A continuación, un sencillo ejemplo de uso de react-dropzone en un componente de React:

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'; // import dropzone
const DropzoneComponent = () => {
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <div {...getRootProps()} style={dropzoneStyle}>
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

js

Carga de archivos

Cuando los archivos se sueltan o seleccionan, la función de devolución de llamada onDrop recibe un array de archivos aceptados. A continuación, puedes gestionar los archivos, como subirlos a un servidor. A continuación, se muestra cómo puede extender el callback onDrop para cargar archivos utilizando fetch:

const onDrop = useCallback((acceptedFiles) => {
  const formData = new FormData();
  acceptedFiles.forEach((file) => {
    formData.append('files', file);
  });
  fetch('https://your-upload-endpoint', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
}, []);

js

Mostrando vistas previas

También puedes mostrar vistas previas de los archivos subidos. Aquí tienes un ejemplo de cómo hacerlo:

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
const DropzoneComponent = () => {
  const [files, setFiles] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(acceptedFiles.map(file => Object.assign(file, {
      preview: URL.createObjectURL(file)
    })));
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  const thumbs = files.map(file => (
    <div key={file.name}>
      <img
        src={file.preview}
        style={{ width: '100px', height: '100px' }}
        alt={file.name}
      />
    </div>
  ));
  return (
    <div>
      <div {...getRootProps()} style={dropzoneStyle}>
        {
          isDragActive ?
            <p>Drop the files here ...</p> :
            <p>Drag 'n' drop some files here, or click to select files</p>
        }
      </div>
      <div>
        {thumbs}
      </div>
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

js

SALIDA

Limpieza

Es esencial revocar las URL de los objetos para evitar fugas de memoria. Puedes lograr esto utilizando el hook useEffect:

import { useEffect } from 'react';
useEffect(() => {
  // Make sure to revoke the data uris to avoid memory leaks
  return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

js

Presentación de IronPDF

IronPDF es un paquete npm poderoso diseñado para facilitar la generación de PDF dentro de aplicaciones Node.js. Permite crear documentos PDF a partir de contenido HTML, URLs o incluso archivos PDF existentes. Ya sea que estés generando facturas, informes o cualquier otro tipo de documento, IronPDF simplifica el proceso con su intuitiva API y su robusto conjunto de funciones.

Entre las principales características de IronPDF se incluyen

1. Conversión de HTML a PDF

Convierta contenidos HTML en documentos PDF sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.

2. Conversión de URL a PDF

Genera PDF directamente desde URLs. Esto te permite capturar el contenido de las páginas web y guardarlo como archivos PDF de manera programática.

3. Manipulación de PDF

Fusione, divida y manipule documentos PDF existentes con facilidad. IronPDF ofrece funcionalidades para manipular archivos PDF, como agregar páginas, dividir documentos y más.

4. Seguridad PDF

Proteja sus documentos PDF cifrándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos confidenciales del acceso no autorizado.

5. Salida de alta calidad

Produzca documentos PDF de alta calidad con una representación precisa del texto, las imágenes y el formato. IronPDF garantiza que los PDF generados mantengan la fidelidad al contenido original.

6. Compatibilidad multiplataforma

IronPDF es compatible con varias plataformas, como Windows, Linux y macOS, lo que lo hace apto para una amplia gama de entornos de desarrollo.

7. Integración sencilla

Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API está bien documentada, lo que facilita la incorporación de funciones de generación de PDF a sus proyectos.

Ya sea que estés construyendo una aplicación web, un script del lado del servidor o una herramienta de línea de comandos, IronPDF te permite crear documentos PDF de calidad profesional de manera eficiente y confiable.

Generar documento PDF usando IronPDF y utilizar el paquete NPM Dropzone.

Instalar dependencias: Primero, crea un nuevo proyecto Next.js (si aún no lo has hecho) utilizando el siguiente comando: Consulta la página de configuración.

npx create-next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

A continuación, vaya al directorio de su proyecto:

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

Instale los paquetes necesarios:

npm install @ironsoftware/ironpdf
npm install react-dropzone

npm install @ironsoftware/ironpdf
npm install react-dropzone

Crear un PDF: Ahora, vamos a crear un ejemplo simple de generación de un PDF utilizando IronPDF. En tu componente de Next.js (por ejemplo, pages/index.tsx), agrega el siguiente código:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import {ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import {useState} from "react";
import DropzoneComponent from "../components/mydropzone";
export default function Home() {
    const [textInput, setTextInput] = useState('');
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Information message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.error("Error message", {
            className: 'custom-toast',
            style: {background: 'red', color: 'white'}
        });
    };
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Drop Zone and Generate PDF Using IronPDF</h1>
                <DropzoneComponent/>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

js

Dado que IronPDF se ejecuta solo en node, a continuación agregue una API para la aplicación donde el PDF se genera en node.

Crea un archivo pdf.js en la carpeta pages/api y añade el siguiente código fuente.

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

js

Nota: En el código anterior, añade tu propia clave de licencia

Ejecuta Tu Aplicación: Inicia tu aplicación Next.js:

npm run dev
or
yarn dev

npm run dev
or
yarn dev

SALIDA

Ahora ingrese la URL del sitio web para generar PDF y haga clic en generar PDF. Se descargará un archivo llamado awesomeIron.pdf como se indica a continuación.

Ahora haga clic en la zona de carga y seleccione el archivo descargado. Esto mostrará una vista previa con el nombre mostrado en la parte inferior: awesomeIron.pdf

Licencia IronPDF

Página de IronPDF.

Coloque la clave de licencia en la aplicación como se muestra a continuación:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

Conclusión

Integrar Dropzone con React usando react-dropzone es un proceso sencillo que mejora significativamente la experiencia de carga de archivos. Con funciones como arrastrar y soltar, vistas previas de archivos y amplias opciones de personalización, react-dropzone puede ser una valiosa adición a tus proyectos de React. ¡Empiece a explorar sus capacidades y adapételo para satisfacer las necesidades de su aplicación!

IronPDF, por otro lado, es una biblioteca versátil de generación y manipulación de PDF que facilita su integración en aplicaciones. IronPDF ofrece documentación completa y ejemplos de código para ayudar a los desarrolladores a comenzar.

Siguiendo los pasos descritos en este artículo, puede crear un componente de carga de archivos robusto en su aplicación React y también integrar capacidades de generación de archivos PDF en aplicaciones modernas.