ノードヘルプ

dropzone npm（開発者向けの使い方）

リーガン・パン

2024年9月29日

共有:

ファイルのアップロードはウェブアプリケーションで一般的な機能であり、ユーザーフレンドリーにすることは良いユーザー体験において重要です。このプロセスを簡素化する人気のあるライブラリはDropzone.js. と組み合わせるとリアクト, ドロップゾーンファイルのドラッグアンドドロップアップロードを実装するための強力なツールになり得ます。 react-dropzoneは、開発労力を最小限に抑えつつ、完璧にシームレスに統合します。この記事では、統合する方法を案内します。ドロップゾーンreact-dropzoneパッケージを使用して、Dropzone.jsライブラリをラップする優れたラッパーであるReactアプリケーションで使用します。

この記事では、また、以下を見ていきます。IronPDFPDFドキュメントを生成、編集、管理するNPMパッケージ。

ReactでDropzoneを使用する理由とは？

ドロップゾーンファイルのアップロードをシームレスにするさまざまな機能を提供します。

ドラッグ＆ドロップインターフェース

ユーザーがファイルをドラッグアンドドロップしてファイルを選択できるようにします。ファイルダイアログをプログラムで追加します。

2. プレビュー

ドロップされたファイルからデフォルトの画像サムネイルプレビューを表示します。表示ファイルのプレビューはUIの読みやすさを向上させます。

3. 複数ファイルのアップロード

複数のファイルを一度にアップロードすることをサポートします。

4. カスタマイズ可能

さまざまなオプションとコールバックによって高いカスタマイズ性があります。ファイルダイアログの開き方やファイル選択ダイアログをカスタマイズできます。

5. 大きなファイルの分割アップロード

チャンクアップロードを使用して大きなファイルをアップロードします。

6. イベントを処理する

ファイルダイアログのキャンセルコールバックやブラウザの画像リサイズイベントを処理できます。

Reactアプリケーションのセットアップ

Dropzoneを統合する前に、Reactアプリケーションのセットアップが完了していることを確認してください。まだアプリケーションがない場合は、次のコマンドを使用して新しいReactプロジェクトを作成できます。Create React App:

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

react-dropzoneのインストール

ReactプロジェクトでDropzoneを使用するには、以下をインストールする必要があります。react-dropzone パッケージ:

npm install react-dropzone
or
yarn add react-dropzone

react-dropzoneの基本的な使用法

以下は、Reactコンポーネントでのreact-dropzone使用の簡単な例です：

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;

JAVASCRIPT

ファイルのアップロード処理

ファイルがドロップまたは選択されると、onDrop コールバックは受け入れられたファイルの配列を受け取ります。その後、サーバーにアップロードするなどしてファイルを処理できます。以下の方法で、fetchを使用してファイルをアップロードするようにonDropコールバックを拡張できます:

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

JAVASCRIPT

プレビューを表示

アップロードされたファイルのプレビューを表示することもできます。これを行う方法の例は次のとおりです。

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;

JAVASCRIPT

出力

dropzone npm（開発者向けの仕組み）：図1 - あなたのreact-dropzoneアプリケーションはこのように見えます。1つまたは複数のファイルをドラッグ＆ドロップ/選択できます。

クリーンアップ

メモリリークを防ぐために、オブジェクトURLを無効にすることが重要です。 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]);

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

JAVASCRIPT

IronPDFの紹介

IronPDFは、Node.jsアプリケーション内でPDF生成を容易にするために設計された強力なnpmパッケージです。 PDFドキュメントを作成することができますHTMLコンテンツ, URL、または既存のPDFファイルでも。請求書、レポート、またはその他の種類のドキュメントを生成する場合でも、IronPDFは直感的な操作でプロセスを簡素化します。APIと堅牢な機能セット。

ドロップゾーン npm(開発者向けの仕組み): 図2 - IronPDF for Node.js: Node.js PDFライブラリ

IronPDFの主な機能には以下が含まれます

1.HTMLからPDFへの変換

HTMLコンテンツを簡単にPDF文書に変換。この機能は、ウェブコンテンツからダイナミックPDFを生成する場合に特に便利です。

2. URLからPDFへの変換

URLから直接PDFを生成します。これにより、ウェブページのコンテンツを取得し、プログラムによってPDFファイルとして保存することができます。

3. PDF操作

既存のPDF文書を簡単に結合、分割、操作できます。 IronPDFは、ページの追加、ドキュメントの分割など、PDFファイルを操作する機能を提供します。

4. PDFセキュリティ

PDF文書をパスワードで暗号化したり、電子署名を適用したりして保護します。 IronPDFは不正アクセスから機密文書を保護するオプションを提供します。

5. 高品質な出力

テキスト、画像、書式を正確にレンダリングして、高品質のPDF文書を作成します。 IronPDFは生成されたPDFが元のコンテンツに忠実であることを保証します。

6. クロスプラットフォーム互換性

IronPDFはWindows、Linux、macOSを含む様々なプラットフォームと互換性があり、幅広い開発環境に適しています。

7. 簡単な統合

Node.jsアプリケーションにIronPDFをnpmパッケージを使って簡単に統合できます。 APIは十分に文書化されているので、PDF生成機能をプロジェクトに組み込むのは簡単です。

Webアプリケーション、サーバーサイドスクリプト、またはコマンドラインツールを構築する場合は、IronPDFプロフェッショナル品質のPDFドキュメントを効率的かつ確実に作成できるようにします。

IronPDFを使用してPDFドキュメントを生成し、Dropzone NPMパッケージを使用する

**依存関係のインストールまず、新しいNext.jsプロジェクトを作成します。(まだなら)以下のコマンドを使用して: セットアップを参照ページ.

npx create-next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

次に、プロジェクト・ディレクトリに移動する：

cd demo-dropzone-ironpdf

必要なパッケージをインストールする：

npm install @ironsoftware/ironpdf
npm install react-dropzone

PDFを作成: さあ、IronPDFを使用してPDFを生成する簡単な例を作成しましょう。 Next.jsコンポーネントで(例: ページ/index.tsx)以下のコードを追加します。

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

JAVASCRIPT

IronPDFはNode.js上でのみ動作するため、次にNode.jsでPDFを生成するアプリ用のAPIを追加します。

pages/api フォルダーに pdf.js ファイルを作成し、以下のソースコードを追加します。

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

JAVASCRIPT

注: 上記のコードにあなた自身のライセンスキーを追加してください。

アプリを実行する: Next.jsアプリを起動します。

npm run dev
or
yarn dev

出力

ドロップゾーン npm (開発者向けの動作方法): 図3 - 次のように、DropzoneとIronPDFを統合したNext.jsアプリケーションが表示されます。URLを入力して「生成」ボタンをクリックすると、IronPDFを使用してURLのHTMLコンテンツをPDFに変換できます。

ウェブサイトのURLを入力してPDFを生成し、「PDFを生成」をクリックしてください。以下のように、awesomeIron.pdfという名前のファイルがダウンロードされます。

dropzone npm（開発者向けの動作方法）：図4 - IronPDFを使用して生成された出力PDF

次に、ドロップゾーンをクリックし、ダウンロードしたファイルを選択してください。これにより、名前が下部に表示されたプレビューが表示されます：awesomeIron.pdf

dropzone npm（開発者向けの動作方法）：図5 - Dropzoneに提供されたリンクから選択することで生成されたawesomeIron.pdfファイルをダウンロードできます。

IronPDFライセンス

IronPDFページ

以下に示すようにアプリにライセンスキーを配置してください。

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

結論

統合するドロップゾーンReactを使用してreact-dropzoneは、ファイルアップロードの体験を大幅に向上させる簡単なプロセスです。ドラッグアンドドロップ、ファイルプレビュー、広範なカスタマイズオプションなどの機能を備えたreact-dropzoneは、Reactプロジェクトに貴重な追加機能となるでしょう。その機能を探索し、あなたのアプリケーションのニーズに合わせて調整しましょう。!

IronPDF一方、これは多用途のPDF生成および操作ライブラリであり、アプリケーションに容易に統合できるようにします。 IronPDFは徹底的なドキュメント以下のコンテンツを日本語に翻訳してください：コード例開発者が始めるのを助けるために。

この記事で説明されている手順に従うことで、Reactアプリケーションに強力なファイルアップロードコンポーネントを作成し、現代のアプリケーションにPDFファイル生成機能を統合することができます。

リーガン・パン

今すぐエンジニアリングチームとチャット

ソフトウェアエンジニア

レーガンはリーディング大学で電子工学の学士号を取得しました。Iron Softwareに入社する前の仕事では、一つのタスクに集中して取り組んでいました。Iron Softwareでは、営業、技術サポート、製品開発、マーケティングのいずれにおいても広範な業務に携わることが最も楽しいと感じています。彼は、Iron Softwareライブラリを開発者がどのように使用しているかを理解し、その知識を使ってドキュメントを継続的に改善し、製品を開発することを楽しんでいます。

< 以前
WebSockets Node.js js（開発者向けの仕組み）

次へ >
tailwind npm（開発者向けの動作方法）