【HTML/Jquery】POSTにてファイルアップロードの際ファイル名取得が失敗する

Question

###前提・実現したいこと
お世話になっております

JAVA(SpringBoot)にてファイルアップロードのシステムを作成しております

ファイルアップロードの際、稀に（10～15回に一度ほど）ファイル名の取得に失敗しております。POSTで受けてJqueryを経由しJAVA側に受け渡すという手順なのですが、原因ご教授頂けますと幸いでございます

■追伸
consoleでJqueryで受ける時点でファイル名が空なのは確認しております。

###該当のソースコード(HTML)

<form id="uploadForm" th:action="@{/upload/uploadForm}" method="post" enctype="multipart/form-data"> <button th:id="${id}" type="button" class="upload_file">アップロード</button> <input type="file" name="upfile" id="upfile"/> </form>

###該当のソースコード(javascript)
$(".upload_file).click(function(){
var upload_file = $('#upfile')[0].files[0];
var filename = upload_file.name;
$("#uploadForm").submit();
});

###該当のソースコード(JAVA)
//Form
import org.springframework.web.multipart.MultipartFile;
import lombok.Data;
@Data
public class failereceiveForm {
// アップロードファイル
private MultipartFile receive_file;
}

###補足情報(Jqueryバージョン)
jquery-3.1.1.js

Comments

[m.ts10806]

失敗しているということはエラーメッセージやエラーログが出ているはずなので、分かるようでしたらエラー情報もご提示願います。

[koppe]

ご返信ありがとうございます。エラーはvar upload_file = $('#upfile')[0].files[0]; upload_file=undefind となり、次の行のvar filename = upload_file.name; で「 Uncaught TypeError: Cannot read property 'name' of undefined」と表示されます

Answer 1

「稀に」となると、クライアントプログラムの問題ではないかもしれませんね
ブラウザのF12を押して開発環境でファイルのやり取りを監視し
再現されるまで実行するなど、再現性を上げる必要があります。
また「ファイル名」だけが問題なのか？ファイル名が渡らない場合でも
ファイルの本体は壊れずに受け取れているのかなど検証する必要があると思います

Comments

[koppe]

ご回答ありがとうございます。
ChromeのDeveloper ToolsでJSのソースをステップで送りながら検証をしてみました。
ファイル名取得失敗の場合はファイル自体受け取れていない様子でした。
また同一のファイル名、ファイルの中身も同じもので繰り返し検証したところ、やはり１０数度に一度はファイルアップロード失敗しております。

開発用のローカル環境でも、サーバー上の本番環境でも同一の挙動でした
ローカルでも起こり得るのはネットワークのエラーとは考えにくいのですが

Answer 2

本件解決いたしました。

input部分を繰り返し表示しており、同じIDを使いまわしていたためファイルの取得がうまくいっていない様子でした。

まだテスト段階ですがIDをユニークにすることでファイル取得エラーは回避できると想定しております。