Dropzone.js：ドラッグ＆ドロップでファイルアップロードするJSライブラリのサンプル
かっこいいロゴと名前ですね。
本サイトへ飛ぶとサンプルがありますので、まずは試してみましょう。
※アップロード画像は保存はされないとのこと。
作成者がニューアルバムの制作中で質問や問題に迅速な対応ができない、と書いてあります。
ミュージシャンなんですね。面白い、というかすごい。
環境
今回は、LinuxにApache,PHPをインストールした環境にて、
ファイルアップロード処理を実装しました。
参考サイト
今回参考にしたのはこちらのサイト↓
※画像クリックで該当ページへ遷移します。
いくつか日本語のサイトを参考にサンプルを作成してみたのですがうまく動かず、たどり着いたのがこのサイト。
英語ですが、とてもわかりやすくまとまっています。
サンプル作成
それでは早速サンプルを作成していきます。
まずは下記のGitHubページにアクセスして、ごそっとダウンロードします。
https://github.com/enyo/dropzone
右カラムの中間あたりに「Download ZIP」というボタンがあるのでクリックすればダウンロードできます。
ダウンロードしたZIPファイルを解凍してから、自分のサーバ環境にアップロードしてください。
サーバ環境がなければローカルでも構いませんが、それだと今回の「ドラッグ＆ドロップでアップロード」になりませんので、
私はサーバにアップロードして試しました。
アップロードするディレクトリはドキュメントルート配下であればどこでも構いませんので、
次にアップロードしたディレクトリと同階層に次の2ファイル及び1ディレクトリを作成します。
・index.html(ファイルアップロード用のformタグを持つHTML)
・upload.php(アップロード処理を実行するPHPスクリプト)
・upload(ディレクトリ。アップロードファイルが格納されるディレクトリになります)
2ファイルのソースコードは以下の通り。
・index.html
<html> <head> <!-- 1 --> <link href="css/dropzone.css" type="text/css" rel="stylesheet" /> <!-- 2 --> <script src="dropzone.js"></script>> </head> <body> <!-- 3 --> <form action="upload.php" class="dropzone"></form> </body> </html>
1.CSSの読み込み処理です。
2.dropzone.jsの読み込み処理です。
3.アップロード用のフォームです。action先は実際にアップロードを実行するupload.php。
クラスに「dropzone」をつけることで、dropzone.jsでハンドリングできるようになります。
ここで注意することは、formタグにenctypeをつけたり、inputタグを作成したりする必要はないということ。
それらもdropzone.jsがハンドリングしてくれます。とっても簡単ですね。
・upload.php
<?php
$ds = DIRECTORY_SEPARATOR; //1
$storeFolder = 'uploads'; //2
if(!empty($_FILES)){
$tempFile = $_FILES['file']['tmp_name'];//3
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4
$targetFile = $targetPath. $_FILES['file']['name']; //5
move_uploaded_file($tempFile,$targetFile); //6
}
?>
1.これはサンプル作成者の方が単純にDIRECTORY_SEPARATORを短い変数にセットしたいから行っている処理、とのこと。
一応合わせて実施しましょう。
2.アップするディレクトリ名をここに記載。
3.アップファイルが送信された場合、テンポラリファイルとしてアップロードされます。/tmpディレクトリに入るでしょう。
そのパスを$tempFile変数にセットしています。
4.1と2で作成した変数を使って、テンポラリから移動して保存するためのディレクトリパスを作成しておきます。
5.4のパスにファイル名をくっつけて、保存するファイルパスを変数$targetFileにセットします。
6.PHP関数のmove_uploaded_fileを使用して、テンポラリから移動した5のファイルを作成します。
※ここで一点注意は、uploadディレクトリにApacheユーザの書き込み権限をあたえておいてあげることです。
ここまでできたらブラウザでindex.htmlにアクセスしてみましょう。
このような画面が表示されると思います。
そこにローカルの画像をドラッグ＆ドロップしてみると・・
このようにドラッグ＆ドロップした画像がアップロードされている様子です。
uploadディレクトリを確認してみると無事アップロードされていることが確認できました。
まとめ
今回はDropzone.jsを使用してドラッグ＆ドロップでファイルをアップロードしてみるサンプルを作成しました。CSSを活用することで、ドロップできる枠は変更対応できるということですので、色々なシーンで活用可能だと思います。直感的にファイルアップロードでき、とてもユーザに優しい機能と言えるでしょう。また、jQueryを使わなくても実装可能なところも特徴の一つですね。
