今まで話したファイルアップロードは、基本でもっとも簡単にプログラムできるものです。
しかし、アップロードするファイルのサイズが大きく、アップロードに時間がかかるようになると、送信ボタンを押してからじ～っと何も起きない画面を見ているのは、退屈でもありちょっと心配ですね。これ、ちゃんと動いているのかなと。
要は、「アップロード中です」とか「８０％アップロード完了」したとか、しかもそれをビジュアルで伝えてくれれば最高です。それを行ってくれるのが今回紹介するツール、Dropzone.jsです。
「アップロードするファイルをここへドラッグしてください」にファイルをドラッグすると、
このように、アップロードの画像ファイルのサムナイルの中にアップロードの途中経過をバーで表示してくれます。
ファイル完了時は、
必要な設定は、
https://github.com/enyo/dropzone/archive/master.zip
よりダウンロードして解凍してから、assets/jsのディレクトリに入れて、画面のテンプレートを以下のように編集します。
<div class="form-group{{ $errors->has('file') ? ' has-error' : '' }}">
<div>
<form
method="POST"
action="/demo/public/user/upload"
class="dropzone"
id="imageUpload"
enctype="multipart/form-data">
{{ csrf_field() }}
</form>
</div>
</div>
気づきましたか、
<input type="file" name="file">
や
<input type="submit">
がないことに。
ちなみにデフォルトのファイル変数名はfileですが、設定変更できます。
そして、レイアウトのテンプレートを以下のように編集します。
...
<head>
...
<link href="{{ url('assets/css/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css">
...
</head>
<body>
...
<script src="{{ url('assets/js/dropzone/dropzone.min.js') }}"></script>
<script type="text/javascript">
Dropzone.options.imageUpload = {
dictDefaultMessage: 'アップロードするファイルをここへドロップしてください',
acceptedFiles: '.jpg, .jpeg',
maxFilesize: 5 // 5MBまで
}
</script>
...
上の設定では、ファイルをドロップする場所のメッセージ、アップロードを許すMIMEあるいは拡張子（jpegのみ）、最大のファイルのサイズ（5MBまで）としています。他にもいろいろな設定があります。以下を参照にしてください。
http://www.dropzonejs.com/#configuration
将来は、これらの設定を使用した複雑な例を紹介する予定です。
メルマガ購読の申し込みはこちらから。