dropzone npm (Comment cela fonctionne pour les développeurs)

Le téléversement de fichiers est une fonctionnalité courante dans les applications web, et le rendre convivial est crucial pour une bonne expérience utilisateur. Une bibliothèque populaire qui simplifie ce processus est Dropzone.js. Lorsqu'il est combiné avec React, Dropzone peut être un outil puissant pour implémenter le glisser-déposer des fichiers. Le react-dropzone s'intègre parfaitement et sans effort de développement minimal. Cet article vous guidera à travers l'intégration de Dropzone avec une application React en utilisant le package react-dropzone, un excellent wrapper autour de la bibliothèque Dropzone.js.

Dans cet article, nous examinerons également le paquet NPM IronPDF pour générer, éditer et gérer des documents PDF.

Pourquoi utiliser Dropzone dans React ?

Dropzone offre diverses fonctionnalités qui rendent le téléchargement de fichiers fluide :

1. Interface glisser-déposer

Permet aux utilisateurs de glisser-déposer des fichiers pour activer la sélection de fichiers. Ajoute une boîte de dialogue de fichier par programmation.

2. Aperçus

Affiche des aperçus de vignettes d'image par défaut à partir de fichiers déposés. Les aperçus des fichiers affichés aident à améliorer la lisibilité de l'interface utilisateur.

3. Téléversements de fichiers multiples

Prend en charge le téléchargement de plusieurs fichiers à la fois.

4. Personnalisable

Très personnalisable avec diverses options et rappels. Peut personnaliser la boîte de dialogue d'ouverture de fichier ou la boîte de dialogue de sélection de fichier

5. Téléversements de fichiers volumineux en morceaux

Téléchargez de gros fichiers en utilisant le téléchargement par morceaux.

6. Gérer les événements

Les événements d'annulation de la boîte de dialogue de fichier ainsi que les événements de redimensionnement d'image du navigateur peuvent être gérés.

Configuration de l'application React

Avant d'intégrer Dropzone, assurez-vous d'avoir une application React configurée. Si vous n'en avez pas, vous pouvez créer un nouveau projet React en utilisant Create React App :

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

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

Installation de react-dropzone

Pour utiliser Dropzone dans votre projet React, vous devez installer le paquet react-dropzone :

npm install react-dropzone
or
yarn add react-dropzone

npm install react-dropzone
or
yarn add react-dropzone

Utilisation de base de react-dropzone

Voici un exemple simple d'utilisation de react-dropzone dans un composant 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

Gestion des téléchargements de fichiers

Lorsque des fichiers sont déposés ou sélectionnés, le rappel onDrop reçoit un tableau de fichiers acceptés. Vous pouvez ensuite gérer les fichiers, comme les télécharger sur un serveur. Voici comment vous pouvez étendre le callback onDrop pour télécharger des fichiers en utilisant 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

Affichage des aperçus

Vous pouvez également afficher des aperçus des fichiers téléchargés. Voici un exemple de comment le faire :

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

SORTIE

Nettoyage

Il est essentiel de révoquer les URL d'objet pour éviter les fuites de mémoire. Vous pouvez y parvenir en utilisant le 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

Présentation d'IronPDF

IronPDF est un puissant package npm conçu pour faciliter la génération de PDF dans les applications Node.js. Il vous permet de créer des documents PDF à partir de contenu HTML, URL, ou même de fichiers PDF existants. Que vous génériez des factures, des rapports ou tout autre type de document, IronPDF simplifie le processus avec son API intuitif et sa gamme de fonctionnalités robustes.

Les principales caractéristiques d'IronPDF sont les suivantes

1. Conversion de HTML en PDF

Convertissez sans effort du contenu HTML en documents PDF. Cette fonction est particulièrement utile pour générer des PDF dynamiques à partir de contenus web.

2. Conversion d'URL en PDF

Générez des PDFs directement à partir d'URLs. Cela vous permet de capturer le contenu des pages web et de les enregistrer sous forme de fichiers PDF de manière programmatique.

3. Manipulation de PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF offre des fonctionnalités pour manipuler des fichiers PDF, telles que l'ajout de pages, la division de documents, et bien plus encore.

4. Sécurité PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre les accès non autorisés.

5. Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

6. Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, notamment Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

7. Intégration simple

Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API est bien documentée, ce qui facilite l'intégration des capacités de génération de PDF dans vos projets.

Que vous développiez une application web, un script côté serveur ou un outil en ligne de commande, IronPDF vous permet de créer des documents PDF de qualité professionnelle de manière efficace et fiable.

Générez un document PDF en utilisant IronPDF et utilisez le package NPM Dropzone.

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js (si ce n'est pas déjà fait) en utilisant la commande suivante : Consultez la page de configuration.

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"

Ensuite, accédez au répertoire de votre projet :

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

Installez les paquets nécessaires :

npm install @ironsoftware/ironpdf
npm install react-dropzone

npm install @ironsoftware/ironpdf
npm install react-dropzone

Créer un PDF : Maintenant, créons un simple exemple de génération de PDF à l'aide d'IronPDF. Dans votre composant Next.js (par exemple, pages/index.tsx), ajoutez le code suivant :

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

Étant donné qu'IronPDF fonctionne uniquement sur Node, ajoutez ensuite une API pour l'application où le PDF est généré sur Node.

Créez un fichier pdf.js dans le dossier pages/api et ajoutez le code source ci-dessous.

// 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

Remarque : Dans le code ci-dessus, ajoutez votre propre clé de licence

Exécutez votre application : Démarrez votre application Next.js :

npm run dev
or
yarn dev

npm run dev
or
yarn dev

SORTIE

Entrez maintenant l'URL du site web pour générer le PDF et cliquez sur générer le PDF. Un fichier nommé awesomeIron.pdf comme ci-dessous sera téléchargé.

Cliquez maintenant sur la zone de dépôt et sélectionnez le fichier téléchargé. Cela affichera un aperçu avec le nom affiché en bas : awesomeIron.pdf

Licence d'IronPDF

Page IronPDF.

Placez la clé de licence dans l'application comme indiqué ci-dessous :

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

js

Conclusion

L'intégration de Dropzone avec React en utilisant react-dropzone est un processus simple qui améliore considérablement l'expérience de téléchargement de fichiers. Avec des fonctionnalités telles que le glisser-déposer, les aperçus de fichiers et de nombreuses options de personnalisation, react-dropzone peut être un ajout précieux à vos projets React. Commencez à explorer ses fonctionnalités et adaptez-le pour répondre aux besoins de votre application !

IronPDF, en revanche, est une bibliothèque polyvalente de génération et de manipulation de PDF qui facilite son intégration dans les applications. IronPDF offre une documentation complète et des exemples de code pour aider les développeurs à démarrer.

En suivant les étapes décrites dans cet article, vous pouvez créer un composant de chargement de fichiers robuste dans votre application React et également intégrer des capacités de génération de fichiers PDF dans des applications modernes.