NODE-HILFE

dropzone npm (Wie es für Entwickler funktioniert)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Aktualisiert:Juni 22, 2025

Das Hochladen von Dateien ist ein gängiges Feature in Webanwendungen, und seine Benutzerfreundlichkeit ist entscheidend für eine gute Benutzererfahrung. Eine beliebte Bibliothek, die diesen Prozess vereinfacht, ist Dropzone.js. When combined with React, Dropzone can be a powerful tool for implementing drag-and-drop file uploads. Der react-dropzone integriert sich perfekt und nahtlos mit minimalem Entwicklungsaufwand. Dieser Artikel wird Sie durch die Integration von Dropzone in eine React-Anwendung mit dem react-dropzone-Paket führen, einem ausgezeichneten Wrapper um die Dropzone.js-Bibliothek.

In diesem Artikel betrachten wir auch das NPM-Paket IronPDF, um PDF-Dokumente zu erzeugen, bearbeiten und verwalten.

Warum Dropzone in React verwenden?

Dropzone bietet verschiedene Features, die das Hochladen von Dateien nahtlos machen:

1. Drag-and-Drop-Schnittstelle

Ermöglicht es Benutzern, Dateien zu ziehen und abzulegen, um Dateiauswahl zu aktivieren, und öffnet programmatisch einen Dateidialog.

2. Vorschauen

Zeigt Standardbildminiaturenvorschauen von abgelegten Dateien an und verbessert so die Lesbarkeit der Benutzeroberfläche.

3. Mehrfach-Uploads

Unterstützt das Hochladen mehrerer Dateien gleichzeitig.

4. Anpassbar

In hohem Maße anpassbar mit verschiedenen Optionen und Rückrufen. Sie können das Öffnen des Dateidialogs oder der Dateiauswahl-Dialoge anpassen.

5. Große-Dateien-Chunked-Uploads

Lädt große Dateien mit Chunk-Upload hoch.

6. Ereignisse behandeln

Dateidialog-Abbruch-Callback und Browser-Bildgrößenänderungsereignisse können behandelt werden.

Einrichten der React-Anwendung

Stellen Sie vor der Integration von Dropzone sicher, dass Sie eine React-Anwendung eingerichtet haben. Falls nicht, können Sie ein neues React-Projekt mit Create React App erstellen:

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

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

SHELL

Installation von react-dropzone

Um Dropzone in Ihrem React-Projekt zu verwenden, müssen Sie das react-dropzone-Paket installieren:

npm install react-dropzone
# or
yarn add react-dropzone

npm install react-dropzone
# or
yarn add react-dropzone

SHELL

Grundlegende Nutzung von react-dropzone

Hier ist ein einfaches Beispiel für die Nutzung von react-dropzone in einer React-Komponente:

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;

JAVASCRIPT

Datei-Uploads handhaben

Wenn Dateien abgelegt oder ausgewählt werden, erhält der onDrop-Callback ein Array akzeptierter Dateien. Sie können dann die Dateien verarbeiten, z. B. sie auf einen Server hochladen. So können Sie den onDrop-Callback erweitern, um Dateien mit fetch hochzuladen:

// 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
}, []);

JAVASCRIPT

Vorschauen anzeigen

Sie können auch Vorschaubilder der hochgeladenen Dateien anzeigen. Hier ist ein Beispiel, wie Sie dies tun können:

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;

JAVASCRIPT

Aufräumen

Es ist wichtig, die Objekt-URLs freizugeben, um Speicherlecks zu vermeiden. Sie können dies mit dem useEffect-Hook erreichen:

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]);

JAVASCRIPT

Einführung in IronPDF

IronPDF ist ein leistungsstarkes npm-Paket, das entwickelt wurde, um die PDF-Erstellung in Node.js-Anwendungen zu erleichtern. It allows you to create PDF documents from HTML content, URLs, or even existing PDF files. Egal, ob Sie Rechnungen, Berichte oder andere Dokumente erzeugen, IronPDF vereinfacht den Prozess mit seiner intuitiven API und seinem leistungsstarken Funktionsumfang.

Zu den wichtigsten Funktionen von IronPDF gehören

1. HTML-zu-PDF-Konvertierung

HTML-Inhalte mühelos in PDF-Dokumente konvertieren. Diese Funktion ist besonders nützlich zum Erstellen dynamischer PDFs aus Webinhalten.

2. URL-zu-PDF-Konvertierung

Erzeugen Sie PDFs direkt aus URLs. Dadurch können Sie den Inhalt von Webseiten erfassen und programmatisch als PDF-Dateien speichern.

3. PDF-Manipulation

Bestehende PDF-Dokumente leicht zusammenfügen, teilen und manipulieren. IronPDF bietet Funktionen zur Bearbeitung von PDF-Dateien, wie das Anhängen von Seiten, das Teilen von Dokumenten und mehr.

4. PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden. IronPDF bietet Optionen, um Ihre sensiblen Dokumente vor unbefugtem Zugriff zu schützen.

5. Hochwertige Ausgabe

Produzieren Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass Ihre generierten PDFs die Originalinhalte getreu wiedergeben.

6. Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, einschließlich Windows, Linux und macOS, was es für eine breite Palette von Entwicklungsumgebungen geeignet macht.

7. Einfache Integration

Integrieren Sie IronPDF problemlos in Ihre Node.js-Anwendungen mithilfe seines npm-Pakets. Die API ist gut dokumentiert, was es einfach macht, PDF-Erstellungsmöglichkeiten in Ihre Projekte zu integrieren.

Egal, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Kommandozeilenwerkzeug entwickeln, IronPDF ermöglicht es Ihnen, PDF-Dokumente in professioneller Qualität effizient und zuverlässig zu erstellen.

PDF-Dokument mit IronPDF erzeugen und Dropzone NPM-Paket verwenden

Abhängigkeiten installieren: Erstellen Sie zuerst ein neues Next.js-Projekt (falls Sie noch keines haben) mit dem folgenden Befehl: Weitere Informationen finden Sie auf der Einrichtungsseite.

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"

SHELL

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

SHELL

Installieren Sie die erforderlichen Pakete:

npm install @ironsoftware/ironpdf
npm install react-dropzone

npm install @ironsoftware/ironpdf
npm install react-dropzone

SHELL

Ein PDF erstellen: Erstellen Sie nun ein einfaches Beispiel für das Generieren eines PDF mit IronPDF. Fügen Sie in Ihrer Next.js-Komponente (z. B. pages/index.tsx) den folgenden Code hinzu:

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>
    );
}

JAVASCRIPT

Da IronPDF nur auf Node läuft, fügen Sie als Nächstes eine API für die App hinzu, in der PDF auf Node erzeugt wird.

Erstellen Sie eine Datei pdf.js im Ordner pages/api und fügen Sie den unten stehenden Quellcode hinzu:

// 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();
    }
}

JAVASCRIPT

Hinweis: Stellen Sie im obigen Code sicher, dass Sie Ihren eigenen Lizenzschlüssel hinzufügen.

Führen Sie Ihre App aus: Starten Sie Ihre Next.js-App:

npm run dev
# or
yarn dev

npm run dev
# or
yarn dev

SHELL

Geben Sie nun die Website-URL ein, um ein PDF zu erzeugen, und klicken Sie auf "PDF erzeugen". Eine Datei mit dem Namen awesomeIron.pdf wird wie unten dargestellt heruntergeladen.

Klicken Sie jetzt auf die Dropzone und wählen Sie die heruntergeladene Datei aus. Eine Vorschau der Datei wird mit dem unten angezeigten Namen awesomeIron.pdf angezeigt.

IronPDF-Lizenz

Siehe die IronPDF-Seite für Lizenzierungsdetails.

Platzieren Sie den Lizenzschlüssel in der App, wie unten gezeigt:

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";

JAVASCRIPT

Abschluss

Integrating Dropzone with React using react-dropzone is a straightforward process that significantly enhances the file upload experience. Mit Funktionen wie Drag-and-Drop, Dateivorschauen und umfangreichen Anpassungsoptionen kann react-dropzone eine wertvolle Ergänzung für Ihre React-Projekte sein. Beginnen Sie, seine Fähigkeiten zu erkunden und passen Sie es an die Bedürfnisse Ihrer Anwendung an!

IronPDF, andererseits, ist eine vielseitige Bibliothek für die PDF-Erstellung und -Manipulation, die sich leicht in Anwendungen integrieren lässt. IronPDF offers thorough documentation and code examples to help developers to get started.

Indem Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie eine robuste Datei-Upload-Komponente in Ihrer React-Anwendung erstellen und auch Funktionen zur PDF-Dateierstellung in moderne Anwendungen integrieren.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...