ajaxを使ったファイルアップデートが上手く行かない

Question

前提・実現したいこと

ajaxにて画像をアップロードする機能を作りたいのですが、上手く動作しません。
画像を選択したらアップロードが走るようにしたいと考えております。

サーバ側はcakephp3で処理を行うつもりです。

該当のソースコード

<form enctype="multipart/form-data" method="post" id="fileUploadForm">
    <input type="file" id="imageType" name="imageType">
</form>

            $('#imageType').addEventListener('change', (event) => {
                var formData = $('#fileUploadForm')[0];
                var data = new FormData(formData);
                const csrfToken = '<?= $this->getRequest()->getParam('_csrfToken') ?>';
                const url = {サーバのURL};
                $.ajax({
                    'url': url,
                    'type': 'post',
                    'data': {data: data},
                    'dataType': "json",
                    processData: false,
                    contentType: false,
                    mimeType: "multipart/form-data",
                    'headers': {
                        'X-CSRF-Token': csrfToken
                    }
                }).done(function (data) {
                    alert("成功");
                    console.log(data);
                }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("失敗");
                });

    public function uploadFile()
    {
        if ($this->getRequest()->is('ajax')) {
            $result = $_FILES;

            $this->viewBuilder()->setClassName('Json');
            $this->set('result', $result);
            $this->set('_serialize', ['result']);
        }
    }

試したこと

サーバ側にファイル情報が入ってきているかを確認したのですが$_FILESの中身は空で返って来てしまいました。
サーバに送る以前にvar data = new FormData(formData);の値をconsole.logで確認をしたら、空だったのでそのあたりも関係しているのでしょうか？

Answer 1

$.ajaxメソッドのdataオプションにオブジェクトリテラルではなく直接FormDataのインスタンスを渡してみたらどうでしょうか。

$.ajax({
  'url': url,
  'type': 'post',
- 'data': {data: data},
+ 'data': data,
  'dataType': "json",
  processData: false,
  contentType: false,