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, istDropzone.js. Wenn kombiniert mitReagieren Sie, Ablageflächekann 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 Sie durch die Integration führenAbladebereichmit einer React-Anwendung unter Verwendung des react-dropzone-Pakets, einem ausgezeichneten Wrapper um die Dropzone.js-Bibliothek.

In diesem Artikel werden wir uns auch mitIronPDFNPM-Paket zum Erstellen, Bearbeiten und Verwalten von PDF-Dokumenten.

Warum Dropzone in React verwenden?

Ablageflächebietet verschiedene Funktionen, die das Hochladen von Dateien nahtlos gestalten:

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. Wenn Sie keine haben, können Sie ein neues React-Projekt erstellen, indem SieCreate React App:

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 installierenreact-dropzone-Paket:

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;

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;

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

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

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;

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;

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

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

Einführung in IronPDF

IronPDFist ein leistungsstarkes npm-Paket, das zur Unterstützung der PDF-Erstellung innerhalb von Node.js-Anwendungen entwickelt wurde. Es ermöglicht Ihnen, PDF-Dokumente aus HTML-Inhalt, URLsoder sogar vorhandene PDF-Dateien. Egal, ob Sie Rechnungen, Berichte oder andere Arten von Dokumenten erstellen, IronPDF vereinfacht den Prozess mit seiner intuitivenAPIund robustes Funktionsset.

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.

Egal, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilen-Tool entwickeln,IronPDFermöglicht Ihnen das Erstellen von professionellen PDF-Dokumenten effizient und zuverlässig.

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

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben)mit dem folgenden Befehl: Siehe die Einrichtungseite.

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

Installieren Sie die erforderlichen Pakete:

npm install @ironsoftware/ironpdf
npm install react-dropzone

PDF erstellen: Lassen Sie uns nun ein einfaches Beispiel zur Erstellung eines PDFs mit IronPDF erstellen. In Ihrer Next.js-Komponente(z.B. Seiten/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>
    );
}

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

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

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

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

AUSGABE

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

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

Schlussfolgerung

Integration vonAblageflächemit React unter Verwendung vonreact-dropzoneist ein unkomplizierter Prozess, der das Hochladen von Dateien 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 mit der Erkundung seiner Funktionen und passen Sie es an die Anforderungen Ihrer Anwendung an.!

IronPDFhingegen, ist eine vielseitige PDF-Generierungs- und -Manipulationsbibliothek, die sich leicht in Anwendungen integrieren lässt. IronPDF bietet umfassendedokumentation undcode-Beispieleum 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.