Dropzone.js 完全攻略ガイド

目的
- Dropzone.jsとは何か、なぜ使うべきかを理解する
- インストールから基本的な使い方、カスタマイズまで段階的に学ぶ
- 実際のサンプルコードとともに実践的なヒントを提供する

1. Dropzone.jsとは？

Commandbox 광고

Dropzone.jsはHTML5ファイルアップロードを簡単に実装できるオープンソースのJavaScriptライブラリです。 - ドラッグ＆ドロップ：マウスでファイルを引っ張って置くだけでアップロードが開始されます。 - プレビュー：画像ファイルはサムネイルが自動で表示されます。 - 複数ファイル：一度に複数のファイルをアップロードできます。 - バックエンド連携：Ajaxを通じてサーバへファイルを送信し、レスポンスを受け取って処理します。

なぜDropzone.jsを使うのか？ - ユーザー体験：直感的なUIでファイルアップロードが楽に。 - 開発の手間軽減：複雑なアップロードロジックを自前で実装する必要がない。 - 拡張性：オプションとイベントでほぼすべての要件を満たせる。

Dropzoneページスクリーンキャプチャ画像

2. インストール方法

2.1 CDNを利用

最も簡単な方法はCDNを使うことです。index.htmlに以下のコードを追加します。

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" />
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

Tip：最新バージョンはunpkgで確認できます。

2.2 NPM / Yarn

プロジェクトでnpmを使っている場合、次のコマンドでインストールします。

npm install dropzone
# または
yarn add dropzone

インストール後はimportまたはrequireで使用します。

import Dropzone from 'dropzone';

注意：Dropzone.autoDiscover = false; を必ず設定して自動初期化を防ぎます。

3. 基本的な使い方

Commandbox 광고

3.1 HTML

<form action="/upload" class="dropzone" id="myDropzone"></form>
  • action属性はファイルが送信されるサーバーエンドポイントを指定します。
  • class="dropzone" はDropzoneが自動で認識するために必要です。

3.2 JavaScript

Dropzone.autoDiscover = false; // 自動初期化を防止

const myDropzone = new Dropzone('#myDropzone', {
  paramName: 'file',          // サーバー側で受け取るパラメータ名
  maxFilesize: 5,             // 最大ファイルサイズ (MB)
  acceptedFiles: 'image/*',   // 許可するファイルタイプ
  dictDefaultMessage: 'ここにファイルをドラッグまたはクリックしてください',
  init: function () {
    this.on('success', function (file, response) {
      console.log('アップロード成功:', response);
    });
    this.on('error', function (file, errorMessage) {
      console.error('アップロード失敗:', errorMessage);
    });
  }
});

主なオプション - url : ファイルを送信するURL（action属性の代わりに使用可能） - maxFiles : 一度にアップロードできるファイル数 - uploadMultiple : 複数ファイルアップロードの有無 - autoProcessQueue : ファイルを自動で送信するか（手動送信時はprocessQueue()を呼び出す）

4. カスタマイズ

4.1 ファイルプレビューのスタイル変更

Dropzoneはデフォルトで画像ファイルにサムネイルを表示します。CSSでスタイルを変更できます。

/* サムネイルサイズの調整 */
.dropzone .dz-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* ファイル名フォント */
.dropzone .dz-details .dz-filename {
  font-weight: bold;
}

4.2 サーバーとの通信

サーバー側でファイルを受け取り、JSON形式でレスポンスを返す必要があります。例（Node.js + Express）：

const express = require('express');
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  // ファイル情報はreq.fileに保存されます。
  res.json({ success: true, filename: req.file.filename });
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Tip：upload.single('file') の 'file' はDropzoneで指定した paramName と一致させる必要があります。

4.3 ファイル削除機能

Dropzoneはファイルを削除する際にDELETEリクエストを送るよう設定できます。

const myDropzone = new Dropzone('#myDropzone', {
  // ...
  dictRemoveFile: '削除',
  init: function () {
    this.on('removedfile', function (file) {
      // サーバーへDELETEリクエスト
      fetch('/delete', {
        method: 'DELETE',
        body: JSON.stringify({ filename: file.upload.filename }),
        headers: { 'Content-Type': 'application/json' }
      });
    });
  }
});

5. 実践ヒント

シチュエーション 解決策
複数ファイルアップロード時のファイル数制限 maxFiles: 10 オプションを使用
アップロード進捗表示 progress イベントを活用
アップロード中のキャンセル cancelUpload() メソッドを使用
アップロード失敗時の再試行 retry オプションまたは error イベントで再試行ロジックを実装
セキュリティ CSRFトークンを headers オプションに含める

6. まとめ

Dropzone.jsは簡単な設定で強力なファイルアップロードUIを提供するライブラリです。 - 初期設定：CDNまたはnpmでインストール → autoDiscover = false → HTMLフォーム + JSインスタンス - カスタマイズ：オプション・イベント・CSSを駆使して望むUIと機能を実装 - サーバー連携：multer などのミドルウェアと組み合わせるとファイル保存とレスポンス処理がスムーズ

次のステップとしては複数ファイルアップロードとプレビューのカスタマイズをさらに深掘りしてみてください。Dropzone.jsを活用すればユーザー体験を一層向上させることができます！

追加資料
- 公式ドキュメント
- サンプルコードリポジトリ