ajaxで画像情報を受け取ることができない

Question

前提

ajaxを利用したファイルアップロードを行いたいのですが
コントローラファイル側で画像情報を受け取ることができません

実現したいこと

ajaxを利用してコントローラファイルで画像情報を受け取ること

該当のソースコード

// メッセージを送信したとき
$(document).on('click', ".message_submit", function() {
    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
    });
    var current_user_id= $('.current_user_id').val(),
        user_id = $('.destination_user_id').val(),
        text = $('#message_counter').val(),
        date=new Date(),
        h = date.getHours(),
        mi = date.getMinutes(),
        hh = ('0' + h).slice(-2),
        mmi = ('0' + mi).slice(-2),
        day = hh + ':' + mmi;

        //アップロードするファイルのデータ取得
        var fiup_file = document.getElementById("my_image").files[0];
        //フォームデータを作成する
        let form = $('#upload-form').get()[0];//フォームデータを格納
        //フォームデータにアップロードファイルの情報追加
        var formData = new FromData(form);//FormDataオブジェクト作成
        $.ajax({
        type: 'POST',
        url: '/ajax_message_process',
        dataType: 'text',
        data: {
            current_user_id: current_user_id,
            user_id: user_id,
            text: text,
            image: form
        },
        processData: false,
        contentType: false,
    }).done(function() {
        $('.message_add').replaceWith('<div class="my_message"><div class="mycomment right"><span class="message_created_at"> '+ day +' </span><p>'+text+'</p><img src='+current_user_img+'  class="message_user_img"></div></div><input type="hidden" class="message_add">');
        $('#message_counter').val('');
        $('html, body').scrollTop($(document).height());
    }).fail(function() {});
});

    public function ajax_message_process(Request $request)
    {
        $current_user = Auth::user();
        $date = new DateTime();
        $date->modify('+9 hour');
        $created_at = $date->format('Y-m-d H:i:s');
        if ($request->file('image') != '') {
            $file_name = $request->file('image')->getClientOriginalName();
            $request->file('image')->storeAs('public/sample', $file_name);
            $image = 'storage/sample/' . $file_name;
            $param = [
                'user_id' => $current_user->id,
                'destination_user_id' => $request->user_id,
                'text' => $request->text,
                'image' => $image,
                'created_at' => $created_at,
            ];
        } else {
            $param = [
                'user_id' => $current_user->id,
                'destination_user_id' => $request->user_id,
                'text' => $request->text,
                'created_at' => $created_at,
            ];
        }
        DB::table('messages')->insert($param);
    }

試したこと

画像取得方法はこちらのサイトを参考にしました。
https://qiita.com/hotate_chan/items/ad38b62278b32079aa32

：
        $created_at = $date->format('Y-m-d H:i:s');
log::debug($request->file('image'));
        if ($request->file('image') != '') {
：

このようにログを取得しているのですが、結果は空です。

Comments

[yambejp]

質問はアップロードの仕方ですか？受けた側の処理の方法ですか？

[karirin3948]

受けた側の処理方法です。
コントローラファイルでのファイル取得方法がわからなかったため質問しました。

Answer 1

非同期でファイルを送信

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    const body=new FormData(f);
    fetch('api.php',{body,method:"post"}).then(x=>x.text()).then(console.log);
  });
});
</script>
<form id="f">
<input type="file" name="myfile">
<input type="button" value="send" id="btn">
</form>

//api.php

<?PHP
print_r($_FILES);

Answer 2

他のかたも書いておられますが、
「送信側でちゃんと送られているか」と「受信側で受け取れているか」を分けて、
どこまで動いているかを切り分けるべきだとは思います。

怪しい点としては下記の箇所です

        //アップロードするファイルのデータ取得
        var fiup_file = document.getElementById("my_image").files[0];
        //フォームデータを作成する
        let form = $('#upload-form').get()[0];//フォームデータを格納

        // ～省略～

        data: {
            current_user_id: current_user_id,
            user_id: user_id,
            text: text,
            image: form
        },

上記の箇所がちゃんとファイルを送ることができるような組み合わせになっているか疑問です。
「受けた側での処理がわからない」とのことですが、送信に失敗していませんか？

        //フォームデータにアップロードファイルの情報追加
        form.append("file", fileData);

参考にしたとのURLには上記のような記述がありますが抜けていませんか？
ajax の data 部分も違いますが、正しいですか？

確認してみてください

Comments

[karirin3948]

回答ありがとうございます。
確認します。

[karirin3948]

ご指摘の通り
質問内容と参考ページに誤りがありました、失礼しました。

参考ページと同様に修正を行ったのですが、コントローラファイル側で画像情報を取得することができていませんでした。
```
// メッセージを送信したとき
$(document).on('click', ".message_submit", function() {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
});
var current_user_id= $('.current_user_id').val(),
user_id = $('.destination_user_id').val(),
text = $('#message_counter').val(),
date=new Date(),
h = date.getHours(),
mi = date.getMinutes(),
hh = ('0' + h).slice(-2),
mmi = ('0' + mi).slice(-2),
day = hh + ':' + mmi;

//アップロードするファイルのデータ取得
var fileData = document.getElementById("my_image").files[0];
//フォームデータを作成する
var form = new FormData();

form.append("file", fileData);
console.log(form);
$.ajax({
:
```
おっしゃる通りjavascript側で送信に失敗している可能性があります。
formをコンソールログで確認したのですが、値は入っていました。（画像情報は入っていない可能性があります）

[yamame]

ajaxのdataにはPOST(または、GET)のdataを列挙したような記述になると思いますが、
そこにformを一つの値として渡すと入れ子になってしまうのでは無いでしょうか？

image : fileData
のような形でformに入れずに送ればいいのでは無いですか