Cakephp3.9.3　Ajaxで処理した後にreturnで値を受け取りたい

前提・実現したいこと

Cakephp（3.9.3）です。
Ajaxで画像をアップロードして、リネームしたファイル名をDBに保存。
そして、リネームしたファイル名をreturnで受け取りたいです。

リネームした新しいファイル名をDBに保存して、アップロードまでは上手くいきましたが、リネームしたファイル名をreturnで受け取るところが上手くいきません。
ご教授お願いいたします。

該当のソースコード

フォームの「btn_submit」を押すと、非同期通信がはじまって「div.result」にリネームした新しいファイル名が表示されるというのが実現したい内容です。

<script type="text/javascript">
$(document).ready(function(){
$('#btn_submit').click(function(e){
    var fd = new FormData($('#form').get(0));
    $.ajax({
       url: "/user/imgup/<?php echo $user_id; ?>",
        type: 'POST',
        data: fd,
        processData: false,
        contentType: false,
        datatype:'json'
    }).done(function(response){
        $("div.result").text(response['rename']);
    }).fail(function() {
      alert('エラーが起きました');
    }).always(function() {
      console.log('complete');
    });
    return false;  
});  
});  
</script>

<?php
echo $this->Form->create(null,['type'=>'post','enctype' => 'multipart/form-data','id' => 'form']);
echo $this->Form->control('image',['type' => 'file','id' => 'image']);
echo $this->Form->button('登録する',["name" => "mode","value" => "登録する","id"=>'btn_submit']);
echo $this->Form->end();
?>

<div class="result"></div>

以下は、コントローラーの処理です。

<?php
public function imgup($user_id)
{
    $this->autoRender = false;

    if ($this->request->is('ajax')) {
        if($this->request->data('image')){
            //ディレクトリ作成、アップロード、リネーム処理など、、、省略
            
            $rename = 'abc.jpg';

            $UserTable = TableRegistry::get('User');
            $User = $UserTable->get($user_id);
            $User->img_file_name = $rename;
            $UserTable->save($User);
            //ここまでは成功。
            
            return $this->response->withType('application/json')->withStringBody(json_encode(['rename'=>$rename]));
            //ここの書き方が悪いのと、、、。
        }
    }
}
?>

<div class="result">abc.jpg</div>となれば成功なのですが、上手くいきません。自分としてはreturnの記述の仕方が悪いのかと思い、いろいろなパターンを試しましたが、どうしてもダメです。

以上、よろしくお願い申し上げます。