複数ファイルアップロード　キャンセル対応 in Laravel & Chrome

JavaScript
  • 複数ファイルをアップロード可能
  • キャンセルボタンを押されても既に選択されていたファイルは維持させる

解決方法があります！

複数ファイルアップロード対応

単刀直入にソース↓

hoge.blade.php

<form action="hoge" id="xx" name="xx" method="POST" enctype="multipart/form-data">
    <input name="files[]" type="file" onchange="elementClone()" multiple>
</form>

↑ここで大事なのは3点

  • form に enctype を指定すること
  • input に multiple を指定すること
  • input の onchange でfunctionを設定すること

最後のfunctionの説明は次へ！

キャンセルボタン対応

対応したいのは以下のようなケース

  1. ファイルアップロードボタンを押してファイルをいくつか選択してOKボタンが押された
  2. 追加でファイルをアップロードしようとしたが、ダイアログでキャンセルボタンが押された
  3. 1の時点で選択されていたファイル情報は残しておきたい

はい、対応方法は以下

hoge.js

function elementClone() {
    let cloneObj = $($('input[name="files[]"]')[0]).clone();
    cloneObj.attr('name', `files[]`);
    cloneObj.appendTo('#xx');
}

簡単に解説

  1. ファイルアップロードのタグの0番目（画面で操作したやつ）をクローンして退避
  2. クローンしたものにname属性を付与 laravel で受け取れるように
  3. クローンしたものをformの中にぶち込む

Laravelで受け取る

$request->files;

でファイルのリストが受け取れるよ！