ファイルのアップロード（５）複数の画像ファイルをアップロード

Dropzone.jsを使用する利点は、ファイルアップロードの途中経過を表示するようになりUIが良くなるだけでありません。１画面で複数の画像ファイルを一度にアップすることができます。

もちろん、以下のように複数のファイルのアップロードは、Dropzone.jsを使用しなくても可能です。

<form
    method="POST"
    action="/demo/public/user/upload"
    class="form-horizontal"
    role="form"
    enctype="multipart/form-data">
    {{ csrf_field() }}
...
    <input type="file" name="file1">
    <input type="file" name="file2">
...
</form>

しかし、以下のポストで説明したように、

ファイルのサイズの制限・制限なしでも制限ある

ウェブサーバーによる制限により、１フォームでアップロードできるファイルの数は、すべてのファイルを足したファイルのサイズになります。

例えば、

post_max_size = 2M
upload_max_filesize = 1M

の設定なら、１フォームでは、最大１Mのファイルが２つまでしかアップロード可能でありません。

しかし、Dropzone.jsを使用すれば、ajaxを使用するので、それぞれのファイルアップロードは、１フォームで１つのファイルのアップロードとなり、この例では、1Mファイルをいくつでもアップロード可能となります。

そして、この複数のファイルのアップロードに対応するプログラムの変更といえば、

まず、フロントエンド、

Dropzone.jsでアップロード途中経過を表示

とまったく同じです。変更はありません。

アップロード時、複数のファイルを選択してドラッグするか、ファイルダイアログで複数のファイルを選択して実行すれば以下のようにアップされます。

バックエンドは、

namespace App\Http\Controllers\User;
 
use Illuminate\Http\Request;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Validator;
 
class UserController extends Controller
{
...
    public function getUpload()
    {
        return view('user/upload');
    }
 
    public function postUpload(Request $request)
    {
        $file = $request->file('file');
        $filename = $file->getClientOriginalName();
        $file->move(public_path('images'), $filename)
    }
}

と、アップしたファイル名で、/public/imagesのディレクトリに保存するように変更します。

同時にアップするファイル数を制限したいなら、

<script type="text/javascript">
       
Dropzone.options.imageUpload = {
    dictDefaultMessage: 'アップロードするファイルをここへドロップしてください',
    acceptedFiles: '.jpg, .jpeg',
    maxFilesize: 5 // 5MBまで
　　maxFiles: 2 // ファイルは２つまでアップロード可能
}
</script>

と、Dropzone.jsの設定で、maxFilesを指定します。

このように３番目のファイルは、アップロード不可となります。