dropzone npm (So funktioniert es für Entwickler)

Das Hochladen von Dateien ist eine häufige Funktion in Webanwendungen, und es benutzerfreundlich zu gestalten, ist entscheidend für eine gute Benutzererfahrung. Eine beliebte Bibliothek, die diesen Prozess vereinfacht, ist Dropzone.js. In Kombination mit React kann Dropzone ein leistungsstarkes Werkzeug zur Implementierung von Drag-and-Drop-Datei-Uploads sein. Der react-dropzone integriert sich perfekt und nahtlos mit minimalem Entwicklungsaufwand. Dieser Artikel wird Ihnen bei der Integration von Dropzone in eine React-Anwendung mittels des react-dropzone-Pakets helfen, einem ausgezeichneten Wrapper um die Dropzone.js-Bibliothek.

In diesem Artikel werden wir uns auch das IronPDF NPM-Paket ansehen, um PDF-Dokumente zu erstellen, zu bearbeiten und zu verwalten.

Warum Dropzone in React verwenden?

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

1. Drag-and-Drop-Schnittstelle

Ermöglicht es Benutzern, Dateien per Drag & Drop auszuwählen. Fügt programmatisch einen Dateidialog hinzu.

2. Vorschauen

Zeigt standardmäßig Miniaturansichten von Bildern aus heruntergeladenen Dateien an. Die Vorschauen der Anzeigedateien tragen zur Verbesserung der Lesbarkeit der Benutzeroberfläche bei.

3. Mehrfache Dateiuploads

Unterstützt das Hochladen mehrerer Dateien gleichzeitig.

4. Anpassbar

Hochgradig anpassbar mit verschiedenen Optionen und Rückrufen. Dateidialog oder Dateiauswahldialog anpassen

5. Große Dateien segmentierte Uploads

Laden Sie große Dateien mit gestückeltem Upload hoch.

6. Ereignisse verwalten

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

Einrichten der React-Anwendung

Bevor Sie Dropzone integrieren, stellen Sie sicher, dass Sie eine React-Anwendung eingerichtet haben. Falls Sie noch keine haben, 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

Installieren 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

Grundlegende Verwendung 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'; // 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

Handhabung von Dateiuploads

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

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

Vorschauen anzeigen

Sie können auch Vorschauen der hochgeladenen Dateien anzeigen. Hier ist ein Beispiel dafür, wie man dies macht:

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

OUTPUT

Aufräumen

Es ist wichtig, die Objekt-URLs zu widerrufen, um Speicherlecks zu vermeiden. Sie können dies erreichen, indem Sie den useEffect-Hook verwenden:

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

Einführung in IronPDF

IronPDF ist ein leistungsstarkes npm-Paket, das zur Erleichterung der PDF-Generierung innerhalb von Node.js-Anwendungen entwickelt wurde. Es ermöglicht Ihnen, PDF-Dokumente aus HTML-Inhalten, URLs oder sogar bestehenden PDF-Dateien zu erstellen. Ob Sie Rechnungen, Berichte oder andere Arten von Dokumenten erstellen, IronPDF vereinfacht den Prozess mit seiner intuitiven API und seinem robusten Funktionsumfang.

Die wichtigsten Merkmale von IronPDF sind

1. Konvertierung von HTML in PDF

Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

2. URL-zu-PDF-Konvertierung

Erstellen Sie PDFs direkt aus URLs. Dies ermöglicht es Ihnen, den Inhalt von Webseiten zu erfassen und sie programmatisch als PDF-Dateien zu speichern.

3. PDF-Bearbeitung

Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen zur Bearbeitung von PDF-Dateien wie das Anfügen von Seiten, das Aufteilen von Dokumenten und mehr.

4. PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

5. Hochwertige Ausgabe

Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

6. Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine breite Palette von Entwicklungsumgebungen.

7. Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilentool entwickeln, IronPDF ermöglicht es Ihnen, professionell hochwertige PDF-Dokumente effizient und zuverlässig zu erstellen.

Erstellen Sie ein PDF-Dokument mit IronPDF und verwenden Sie das Dropzone NPM-Paket.

Abhängigkeiten installieren: Erstellen Sie zuerst ein neues Next.js-Projekt (falls Sie noch keins haben) mit dem folgenden Befehl: Lesen Sie die Einrichtungsseite Seite.

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"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

Installieren Sie die erforderlichen Pakete:

npm install @ironsoftware/ironpdf
npm install react-dropzone

npm install @ironsoftware/ironpdf
npm install react-dropzone

Erstellen Sie ein PDF: Erstellen wir ein einfaches Beispiel zur Generierung eines PDFs mit IronPDF. In Ihrer Next.js-Komponente (z. B. pages/index.tsx) fügen Sie 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('');
    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

Da IronPDF nur auf Node läuft, füge als nächstes eine API für die App hinzu, bei der PDFs auf Node erstellt werden.

Erstellen Sie eine Datei namens 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.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

Hinweis: Fügen Sie im obigen Code Ihren eigenen Lizenzschlüssel hinzu.

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

npm run dev
or
yarn dev

npm run dev
or
yarn dev

OUTPUT

Geben Sie jetzt die Website-URL ein, um das PDF zu erstellen, und klicken Sie auf PDF erstellen. Eine Datei mit dem Namen awesomeIron.pdf wird wie unten heruntergeladen.

Klicken Sie nun auf die Dropzone und wählen Sie die heruntergeladene Datei aus. Dies zeigt eine Vorschau der Datei mit dem Namen unten angezeigt: awesomeIron.pdf

IronPDF-Lizenz

IronPDF-Seite.

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

js

Schlussfolgerung

Die Integration von Dropzone mit React unter Verwendung von react-dropzone ist ein einfacher Vorgang, der das Dateiupload-Erlebnis erheblich verbessert. 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, die Fähigkeiten zu erkunden und passen Sie es an die Anforderungen Ihrer Anwendung an!

IronPDF hingegen ist eine vielseitige PDF-Erstellungs- und Bearbeitungsbibliothek, die sich einfach in Anwendungen integrieren lässt. IronPDF bietet umfassende Dokumentation und Code-Beispiele, um Entwicklern den Einstieg zu erleichtern.

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