드래그 앤 드롭으로 여러 파일 업로드 [jQuery/Laravel]

지금도 여러 파일을 업로드하는 방법을 잊지 않도록 메모

실현 이미지

빨간색으로 파일을 삭제하면 파일이 추가되고 전송을 누르면 함께 ​​업로드하는 최소 샘플

HTML

upload.blade.php

    <div id="upload_files_area" style="background-color:red; height:300px; width:100%;"></div>
    <button id="send">送信</button>

자바스크립트

upload.js

    $(function(){
        //FormDataオブジェクトを作成
        var formData = new FormData();

        //ファイルがドロップされたときに呼ばれる
        $('#upload_files_area').on('drop', function(ev) {
            var files = ev.originalEvent.dataTransfer.files;
            for (var i = 0; i < files.length; i++) {
                //FormDataオブジェクトにファイルを追加
                //名前は'document_files[]'ってしてやる
                formData.append('document_files[]', files[i]);
            }
        });

        //送信
        $('#send').click(function(){
            $.ajax({
                url:'/upload_exec',
                type:'post',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
            });
        });
    });

PHP

UploadController

    public function uploadExec(Request $request)
    {
        $files = $request->file('document_files');
        foreach ($files as $file) {
            //ここではS3にアップロード
            Storage::disk('s3')->putFile('path', $file);
        }
    }

요약

이것만이라면 파일을 드롭해도 화면상에 아무것도 표시되지 않으므로 실제로는 FormData에 추가된 파일을 표시하거나 삭제하는 기능을 추가할 필요가 있다고 생각한다. FormData에 추가되고 있는 파일은 formData.getAll('document_files[]'); 그리고 배열로서 취득할 수 있으므로, 그것을 적당하게 조작해 하면 좋다.