Back

Dropzone.jsを使ったファイルアップロードの構築方法

OpenReplay Team OpenReplay Team

Nov 11, 2025 · 3 min read

Dropzone.jsを使ったファイルアップロードの構築方法

複雑な設定や重厚なフレームワークと格闘することなく、モダンなファイルアップロードインターフェースを構築できます。ブラウザ間でシームレスに動作する、視覚的な進捗フィードバック付きのドラッグ&ドロップ機能が必要なら、Dropzone.jsは数分で実装できる軽量で依存関係のないソリューションを提供します。

このガイドでは、Dropzone.jsを使用してプロフェッショナルなファイルアップロードインターフェースを作成する方法を紹介します。ドラッグ&ドロップ機能、プログレスバー、ファイル検証を備え、すべて純粋なJavaScriptで、バックエンドの複雑さもありません。

重要なポイント

  • Dropzone.jsは依存関係ゼロでドラッグ&ドロップファイルアップロードを提供
  • 自動プログレスバーとファイルプレビューが標準で動作
  • 設定オプションでファイルタイプ制限、サイズ制限、カスタム検証をサポート
  • 標準のmultipart/form-dataリクエストを通じて、あらゆるバックエンド技術と互換性あり

Dropzone.jsの導入

まず、CDNからDropzone.jsを読み込みます。パッケージマネージャーやビルドツールは不要です:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropzone File Upload</title>
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.css">
</head>
<body>
    <script src="https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.js"></script>
</body>
</html>

アップロードフォームの作成

最もシンプルなアプローチは、dropzoneクラスを持つform要素を使用することです。Dropzoneは自動的にそれをインタラクティブなアップロードフォームに変換します:

<form action="/upload" class="dropzone" id="my-dropzone">
    <div class="dz-message">
        Drop files here or click to upload
    </div>
</form>

これだけです。ユーザーはファイルをドラッグ&ドロップしたり、クリックして参照したりできるようになります。/uploadエンドポイントがファイルを受け取ります。PHP、Node.js、Python、その他どのバックエンド技術を使用していても対応できます。

ファイルタイプとサイズ制限の設定

ほとんどのアプリケーションではアップロード制限が必要です。Dropzoneを設定して特定のファイルタイプを受け入れ、サイズ制限を適用します:

Dropzone.options.myDropzone = {
    acceptedFiles: 'image/*,application/pdf,.doc,.docx',
    maxFilesize: 5, // MB
    maxFiles: 10,
    addRemoveLinks: true,
    dictDefaultMessage: 'Drop files here or click to upload (Max 5MB)'
};

この設定では、画像、PDF、Word文書を1ファイルあたり最大5MBまで受け入れ、1セッションあたり最大10ファイルまでアップロードできます。

プログレスバーフィードバックの追加

プログレスバーはアップロード中に自動的に表示されますが、イベントリスナーを使用してその動作をカスタマイズできます:

Dropzone.options.myDropzone = {
    init: function() {
        this.on("uploadprogress", function(file, progress) {
            console.log("File progress", progress);
        });
        
        this.on("success", function(file, response) {
            console.log("Upload successful!");
        });
        
        this.on("error", function(file, errorMessage) {
            console.log("Upload failed:", errorMessage);
        });
    }
};

高度なフロントエンドカスタマイズ

アップロード体験をより細かく制御するには、プログラム的にカスタムdropzoneを作成します:

// すべてのフォームの自動検出を無効化
Dropzone.autoDiscover = false;

// カスタムdropzoneを作成
const myDropzone = new Dropzone("#upload-area", {
    url: "/upload",
    thumbnailWidth: 120,
    thumbnailHeight: 120,
    parallelUploads: 2,
    previewTemplate: document.getElementById('preview-template').innerHTML,
    autoQueue: false,
    previewsContainer: "#previews",
    clickable: ".fileinput-button"
});

// 手動アップロードトリガー
document.getElementById("submit-all").addEventListener("click", function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
});

ファイル検証とユーザーフィードバック

即座のユーザーフィードバックのためにクライアント側検証を実装します:

Dropzone.options.myDropzone = {
    accept: function(file, done) {
        if (file.size === 0) {
            done("Empty files are not allowed");
        } else if (file.name.length > 100) {
            done("Filename too long");
        } else {
            done(); // ファイルを受け入れる
        }
    },
    
    init: function() {
        this.on("addedfile", function(file) {
            // ファイルがキューに追加された
            if (this.files.length > this.options.maxFiles) {
                this.removeFile(file);
                alert("Maximum files exceeded");
            }
        });
    }
};

あらゆるバックエンドとの統合

Dropzone.jsは標準のmultipart/form-data POSTリクエストとしてファイルを送信するため、あらゆるサーバー技術と互換性があります。デフォルトのパラメータ名はfileですが、カスタマイズできます:

Dropzone.options.myDropzone = {
    paramName: "upload", // フィールド名を'file'から'upload'に変更
    headers: {
        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
    }
};

バックエンドがPHP、Node.js、Django、Railsのいずれで動作していても、既存のサーバーコードが変更なしで処理できる標準のファイルアップロードリクエストを受け取ります。

まとめ

Dropzone.jsは、最小限のコードで基本的なファイル入力をプロフェッショナルなアップロードインターフェースに変換します。そのドラッグ&ドロップ機能、自動プログレスバー、豊富なカスタマイズオプションにより、フレームワークの依存関係を追加することなくユーザーエクスペリエンスを優先するモダンなフロントエンドアプリケーションに最適です。

ライブラリのgzip圧縮後13KBのサイズと依存関係ゼロという特性により、JavaScriptバンドルを肥大化させたりビルドプロセスを複雑化させたりすることなく、洗練されたファイルアップロード機能を追加できます。

よくある質問

はい、Dropzone.jsはデフォルトで複数ファイルのアップロードをサポートしています。parallelUploadsオプションで並列アップロードを制御し、maxFilesを使用して最大ファイル数の制限を設定できます。設定に応じて、ファイルを個別にまたはバッチでアップロードできます。

サーバーエラーはerrorイベントリスナーを通じて処理されます。サーバーから400や500などのHTTPステータスコードをレスポンスボディにエラーメッセージと共に返してください。Dropzoneは自動的にこれらのエラーを表示し、ファイルアップロードを失敗としてマークします。

はい、サーバー側で署名付きURLを生成し、それを使用するようにDropzoneを設定することで、S3に直接アップロードできます。各ファイルに対してurlオプションを動的に設定し、headersの設定オプションに認証トークンなどの必要なヘッダーを含めてください。

Dropzoneは画像ファイルのサムネイルを自動的に生成します。他のファイルタイプについては、previewTemplateオプションを使用してプレビューテンプレートをカスタマイズできます。autoQueue falseの設定により、ユーザーは手動でアップロードをトリガーする前にファイルを確認できます。

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog