今まで話したファイルアップロードは、基本でもっとも簡単にプログラムできるものです。

しかし、アップロードするファイルのサイズが大きく、アップロードに時間がかかるようになると、送信ボタンを押してからじ~っと何も起きない画面を見ているのは、退屈でもありちょっと心配ですね。これ、ちゃんと動いているのかなと。

要は、「アップロード中です」とか「80%アップロード完了」したとか、しかもそれをビジュアルで伝えてくれれば最高です。それを行ってくれるのが今回紹介するツール、Dropzone.jsです。

upload1

「アップロードするファイルをここへドラッグしてください」にファイルをドラッグすると、

upload2

このように、アップロードの画像ファイルのサムナイルの中にアップロードの途中経過をバーで表示してくれます。

ファイル完了時は、

upload3

必要な設定は、

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

将来は、これらの設定を使用した複雑な例を紹介する予定です。

By khino