dropzone npm (Como funciona para desenvolvedores)
O carregamento de arquivos é um recurso comum em aplicativos da web, e torná-lo fácil de usar é crucial para uma boa experiência do usuário. Uma biblioteca popular que simplifica esse processo é o Dropzone.js . Quando combinado com React , o Dropzone pode ser uma ferramenta poderosa para implementar uploads de arquivos por meio do recurso "arrastar e soltar". O react-dropzone integra-se de forma perfeita e transparente, exigindo o mínimo de esforço de desenvolvimento. Este artigo irá guiá-lo na integração do Dropzone com uma aplicação React usando o pacote react-dropzone, um excelente wrapper para a biblioteca Dropzone.js.
Neste artigo, também analisaremos o pacote IronPDF do NPM para gerar, editar e gerenciar documentos PDF.
Por que usar o Dropzone no React?
O Dropzone oferece diversos recursos que tornam o envio de arquivos muito mais fácil:
1. Interface de arrastar e soltar
Permite que os usuários arrastem e soltem arquivos para habilitar a seleção de arquivos e adiciona uma caixa de diálogo de arquivos programaticamente.
2. Pré-visualizações
Exibe miniaturas de imagens padrão a partir de arquivos arrastados e soltos, melhorando a legibilidade da interface do usuário.
3. Envio de múltiplos arquivos
Permite o envio de vários arquivos simultaneamente.
4. Personalizável
Altamente personalizável com diversas opções e funções de retorno de chamada. Você pode personalizar a abertura de caixas de diálogo de arquivos ou as caixas de diálogo de seleção de arquivos.
5. Uploads de arquivos grandes em partes
Faça upload de arquivos grandes usando o upload em partes.
6. Gerenciar eventos
É possível lidar com eventos de retorno de chamada de cancelamento de diálogo de arquivo e eventos de redimensionamento de imagem do navegador.
Configurando o aplicativo React
Antes de integrar o Dropzone, certifique-se de ter um aplicativo React configurado. Caso não tenha, você pode criar um novo projeto React usando o Create React App :
npx create-react-app dropzone-demo
cd dropzone-demo
npx create-react-app dropzone-demo
cd dropzone-demo
Instalando react-dropzone
Para usar o Dropzone em seu projeto React, você precisa instalar o pacote react-dropzone :
npm install react-dropzone
# or
yarn add react-dropzone
npm install react-dropzone
# or
yarn add react-dropzone
Uso básico do react-dropzone
Aqui está um exemplo simples de uso do react-dropzone em um componente React:
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
// DropzoneComponent is a React component demonstrating basic usage of react-dropzone
const DropzoneComponent = () => {
// Callback to handle file drops
const onDrop = useCallback((acceptedFiles) => {
console.log(acceptedFiles); // Log the accepted files
}, []);
// Extracted properties from useDropzone hook
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (
<div {...getRootProps()} style={dropzoneStyle}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here, or click to select files</p>
}
</div>
);
};
// Styles for the dropzone area
const dropzoneStyle = {
border: '2px dashed #0087F7',
borderRadius: '5px',
padding: '20px',
textAlign: 'center',
cursor: 'pointer'
};
export default DropzoneComponent;
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
// DropzoneComponent is a React component demonstrating basic usage of react-dropzone
const DropzoneComponent = () => {
// Callback to handle file drops
const onDrop = useCallback((acceptedFiles) => {
console.log(acceptedFiles); // Log the accepted files
}, []);
// Extracted properties from useDropzone hook
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (
<div {...getRootProps()} style={dropzoneStyle}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here, or click to select files</p>
}
</div>
);
};
// Styles for the dropzone area
const dropzoneStyle = {
border: '2px dashed #0087F7',
borderRadius: '5px',
padding: '20px',
textAlign: 'center',
cursor: 'pointer'
};
export default DropzoneComponent;
Gerenciamento de uploads de arquivos
Quando arquivos são soltos ou selecionados, a função de retorno de chamada onDrop recebe uma matriz de arquivos aceitos. Em seguida, você pode manipular os arquivos, como por exemplo, enviá-los para um servidor. Veja como você pode estender o callback onDrop para fazer upload de arquivos usando o fetch:
// onDrop callback to handle file uploads
const onDrop = useCallback((acceptedFiles) => {
const formData = new FormData();
// Append each file to the formData
acceptedFiles.forEach((file) => {
formData.append('files', file);
});
// Send a POST request to upload the files
fetch('https://your-upload-endpoint', {
method: 'POST',
body: formData,
})
.then(response => response.json()) // Parse the JSON from the response
.then(data => console.log(data)) // Log the response data
.catch(error => console.error('Error:', error)); // Handle errors
}, []);
// onDrop callback to handle file uploads
const onDrop = useCallback((acceptedFiles) => {
const formData = new FormData();
// Append each file to the formData
acceptedFiles.forEach((file) => {
formData.append('files', file);
});
// Send a POST request to upload the files
fetch('https://your-upload-endpoint', {
method: 'POST',
body: formData,
})
.then(response => response.json()) // Parse the JSON from the response
.then(data => console.log(data)) // Log the response data
.catch(error => console.error('Error:', error)); // Handle errors
}, []);
Exibindo pré-visualizações
Você também pode exibir pré-visualizações dos arquivos enviados. Eis um exemplo de como fazer isso:
import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
const DropzoneComponent = () => {
const [files, setFiles] = useState([]);
// onDrop callback to handle file drops and generate previews
const onDrop = useCallback((acceptedFiles) => {
setFiles(acceptedFiles.map(file => Object.assign(file, {
preview: URL.createObjectURL(file)
})));
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
// Generate thumbnails for each file
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}>
<input {...getInputProps()} />
{
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>
);
};
// Styles for the dropzone area
const dropzoneStyle = {
border: '2px dashed #0087F7',
borderRadius: '5px',
padding: '20px',
textAlign: 'center',
cursor: 'pointer'
};
export default DropzoneComponent;
import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
const DropzoneComponent = () => {
const [files, setFiles] = useState([]);
// onDrop callback to handle file drops and generate previews
const onDrop = useCallback((acceptedFiles) => {
setFiles(acceptedFiles.map(file => Object.assign(file, {
preview: URL.createObjectURL(file)
})));
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
// Generate thumbnails for each file
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}>
<input {...getInputProps()} />
{
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>
);
};
// Styles for the dropzone area
const dropzoneStyle = {
border: '2px dashed #0087F7',
borderRadius: '5px',
padding: '20px',
textAlign: 'center',
cursor: 'pointer'
};
export default DropzoneComponent;
Limpeza
É essencial revogar os URLs dos objetos para evitar vazamentos de memória. Você pode conseguir isso usando o gancho useEffect:
import { useEffect } from 'react';
// useEffect to clean up object URLs to prevent memory leaks
useEffect(() => {
// Revoke the data URIs
return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);
import { useEffect } from 'react';
// useEffect to clean up object URLs to prevent memory leaks
useEffect(() => {
// Revoke the data URIs
return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);
Apresentando o IronPDF
IronPDF é um poderoso pacote npm projetado para facilitar a geração de PDFs em aplicações Node.js Ele permite criar documentos PDF a partir de conteúdo HTML , URLs ou até mesmo arquivos PDF existentes. Seja para gerar faturas, relatórios ou qualquer outro tipo de documento, o IronPDF simplifica o processo com sua API intuitiva e conjunto robusto de recursos.
Os principais recursos do IronPDF incluem:
1. Conversão de HTML para PDF
Converta conteúdo HTML em documentos PDF sem esforço. Essa funcionalidade é particularmente útil para gerar PDFs dinâmicos a partir de conteúdo da web.
2. Conversão de URL para PDF
Gere PDFs diretamente a partir de URLs. Isso permite capturar o conteúdo de páginas da web e salvá-lo como arquivos PDF programaticamente.
3. Manipulação de PDF
Mescle, divida e manipule documentos PDF existentes com facilidade. O IronPDF oferece funcionalidades para manipular arquivos PDF, como adicionar páginas, dividir documentos e muito mais.
4. Segurança do PDF
Proteja seus documentos PDF criptografando-os com senhas ou aplicando assinaturas digitais. O IronPDF oferece opções para proteger seus documentos confidenciais contra acesso não autorizado.
5. Saída de alta qualidade
Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e formatação. O IronPDF garante que os PDFs gerados mantenham a fidelidade ao conteúdo original.
6. Compatibilidade entre plataformas
O IronPDF é compatível com diversas plataformas, incluindo Windows, Linux e macOS, tornando-o adequado para uma ampla gama de ambientes de desenvolvimento.
7. Integração simples
Integre facilmente o IronPDF em suas aplicações Node.js usando o pacote npm. A API é bem documentada, o que facilita a incorporação de recursos de geração de PDF em seus projetos.
Seja para criar um aplicativo web, um script do lado do servidor ou uma ferramenta de linha de comando, o IronPDF permite que você crie documentos PDF de nível profissional de forma eficiente e confiável.
Gere documentos PDF usando o IronPDF e o pacote Dropzone do NPM.
Instale as dependências: Primeiro, crie um novo projeto Next.js (se ainda não o fez) usando o seguinte comando: Consulte a página de configuração.
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"
Em seguida, navegue até o diretório do seu projeto:
cd demo-dropzone-ironpdf
cd demo-dropzone-ironpdf
Instale os pacotes necessários:
npm install @ironsoftware/ironpdf
npm install react-dropzone
npm install @ironsoftware/ironpdf
npm install react-dropzone
Criar um PDF: Agora, vamos criar um exemplo simples de geração de um PDF usando o IronPDF. No seu componente Next.js (por exemplo, pages/index.tsx), adicione o seguinte 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('');
// Function to display different types of toast messages
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' }
});
};
// Function to generate and download a PDF
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(); // Trigger the download
link.parentNode.removeChild(link); // Remove the link
} catch (error) {
console.error('Error generating PDF:', error);
}
};
// Handle changes in the text input field
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>
);
}
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('');
// Function to display different types of toast messages
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' }
});
};
// Function to generate and download a PDF
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(); // Trigger the download
link.parentNode.removeChild(link); // Remove the link
} catch (error) {
console.error('Error generating PDF:', error);
}
};
// Handle changes in the text input field
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>
);
}
Como o IronPDF só funciona em Node.js, o próximo passo é adicionar uma API para o aplicativo onde o PDF é gerado no Node.js.
Crie um arquivo pdf.js na pasta pages/api e adicione o código-fonte abaixo:
// 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.log('PDF data:', 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();
}
}
// 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.log('PDF data:', 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();
}
}
Observação: No código acima, certifique-se de adicionar sua própria chave de licença.
Execute seu aplicativo: Inicie seu aplicativo Next.js:
npm run dev
# or
yarn dev
npm run dev
# or
yarn dev
Agora, insira o URL do site para gerar o PDF e clique em "Gerar PDF". Um arquivo chamado awesomeIron.pdf, conforme mostrado abaixo, será baixado.
Agora clique em Dropzone e selecione o arquivo baixado. Isso mostrará uma pré-visualização do arquivo com o nome exibido na parte inferior: awesomeIron.pdf.
Licença IronPDF
Consulte a página do IronPDF para obter detalhes sobre o licenciamento.
Insira a chave de licença no aplicativo conforme mostrado abaixo:
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
Conclusão
Integrar o Dropzone com o React usando o react-dropzone é um processo simples que melhora significativamente a experiência de upload de arquivos. Com funcionalidades como arrastar e soltar, pré-visualização de arquivos e amplas opções de personalização, o react-dropzone pode ser uma adição valiosa aos seus projetos React. Comece a explorar suas funcionalidades e adapte-as para atender às necessidades da sua aplicação!
O IronPDF , por outro lado, é uma biblioteca versátil para geração e manipulação de PDFs, o que facilita sua integração em aplicativos. O IronPDF oferece documentação completa e exemplos de código para ajudar os desenvolvedores a começar.
Seguindo os passos descritos neste artigo, você poderá criar um componente robusto de upload de arquivos em sua aplicação React e também integrar recursos de geração de arquivos PDF em aplicações modernas.




