JavaScriptよりファイル選択したExcelファイルをアップロードしたい

Question

前提

BlazorWebAssembly(フレームワーク.Net Standard2.1)より呼び出したJavaScriptからサーバーへExcelファイルをアップロードしたい

実現したいこと

サーバー側のフォルダへアップロードしたExcelファイルを一時保存し、操作したい

発生している問題・エラーメッセージ

Excelファイル名はサーバーへ渡るが、アップロードしたはずのExcelファイルが読み込めない。
ご教授頂きたいです。

該当のソースコード

@inject HttpClient Http
@inject IJSRuntime JSRuntime
 <button title="ファイル取込" @onclick="(async () => await UpLoadFileAsync())" disabled="@false" >
            ファイル取込
 </button>
@code {
    async Task UpLoadFileAsync()
    {
        // ダイアログのインスタンスを生成
            var fileurl = await JSRuntime.InvokeAsync<string>("showOpenFileDialog").ConfigureAwait(false);
    }
}

//ファイルを開く 2022.10.20 add
function showOpenFileDialog() {
    const createOpenFileDialog = () => {
        return new Promise(resolve => {
            const input = document.createElement('input');
            var form = document.createElement('form');

            form.id = 'form_fileupload';
            form.method = 'post';
            form.enctype = 'multipart/form-data';
            form.action = '/api/NyukaYoteiTourokuSaveFile/LoadExcel';

            input.type = 'file';
            input.accept = '.xlsx';
            form.appendChild(input);
            input.onchange = event => { resolve(event.target.files[0]); };
            input.click();
        });
    };

    return new Promise(resolve => {
        resolve(createOpenFileDialog()
            .then((response) => {
                
                var blob = new Blob([response.buffer], { type: "application/octet-stream" });
                var formData = new FormData();
                formData.append("postedFile", blob, response.name);
               
               // var formData = new FormData(document.getElementById("form_fileupload"));
                return formData;

            }).then(function (formData) {
                
                $.ajax({
                    url: '/api/NyukaYoteiTourokuSaveFile/LoadExcel',
                    //    method: 'post',
                    type: 'post',
                    data: formData,
                    processData: false, // jQuery にデータを処理させない
                    contentType: false  // contentType を設定させない
                }).done(function (response) {
                    window.alert("通信成功");
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    window.alert("通信失敗");
                });
                
                return "test";
            }));

    });

        [HttpPost("LoadExcel")]
        public void PostExcelAsync([FromForm] IFormFile postedFile)
            
        //public void GetExcelAsync(string fileurl)
        {  
            string result = "";
            if (postedFile != null && postedFile.Length > 0)
            {
                string typ = postedFile.ContentType;

                // アップロードされたファイル名を取得
                //string filename = Path.GetFileName(postedFile.FileName);
                string filename = postedFile.FileName;
                var ExcelFilePath = Path.Combine(Directory.GetCurrentDirectory(), "Import", "Book.xlsx");
                using (var stream = System.IO.File.Create(ExcelFilePath))
                {
                    postedFile.CopyTo(stream);
                }

                // アップロードされたファイルを処理（省略）

                result = $"{filename} ({postedFile.ContentType}) - " +
                    $"{postedFile.Length} bytes アップロード完了";
            }
            else
            {
                result = "ファイルアップロードに失敗しました";
            }

            return;

試したこと

サーバー側で指定したExcelファイルは出来るが、直接Excelファイルをクリックして開こうとしても開かない。
その為、サーバー側のソースからも読み込めない。
JavaScript側のformData.appendが間違っていると思われますが、正しいセットの仕方が分からないです。
JavaScriptによる以下のコマンドだとエラーが発生します。
var formData = new FormData(document.getElementById("form_fileupload"));

◆Fiddlerでの解析(HexView)

ファイル選択時
POST http://localhost:5000/api/NyukaYoteiTourokuSaveFile/LoadExcel HTTP/1.1
Host: localhost:5000
Connection: keep-alive
Content-Length: 215
sec-ch-ua: "Microsoft Edge";v="107", "Chromium";v="107", "Not=A?Brand";v="24"
Accept: /
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryP4OANBiTG5BB8aR4
X-Requested-With: XMLHttpRequest
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.35
sec-ch-ua-platform: "Windows"
Origin: http://localhost:5000
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:5000/nyukaYoteiTourokuFile
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7

------WebKitFormBoundaryP4OANBiTG5BB8aR4
Content-Disposition: form-data; name="postedFile"; filename="testExl.xlsx"
Content-Type: application/octet-stream

undefined
------WebKitFormBoundaryP4OANBiTG5BB8aR4--

Ajax通信時？
POST https://vortex.data.microsoft.com/collect/v1 HTTP/1.1
Content-Type: application/x-json-stream
Content-Encoding: gzip
Host: vortex.data.microsoft.com
Content-Length: 5449
Expect: 100-continue
Connection: Keep-Alive

補足情報（FW/ツールのバージョンなど）

BlazorWebAssemblyアプリでASP.NET Coreでホストされた環境
クライアント側: .Net Standard2.1
サーバー側: Net Core3.1

Comments

[退会済みユーザー]

ASP.NET のタグもつけて下さい。

元のファイルが間違ってるとか壊れてるということは絶対ないですか？

Fiddler を使って、要求をキャプチャして、ブラウザから送信されたファイルのバイト列を、元のファイルのものと、サーバーで受け取ったものと比較してみてください。

[womomo]

元のファイルは正常に開けるので、壊れていません。

Fiddlerインストールしてみたのですが、見方合ってますでしょうか？

[退会済みユーザー]

「ファイル選択時」と「Ajax通信時？」の違いが何だか分かりませんが、「ファイル選択時」で Excel ファイルを送信するということであれば、undefined となっているのが変です。そこは Excel ファイルのバイト列になるはずです。なぜそんなことになってしまうのか、コードを解析してみてください。

[退会済みユーザー]

質問者さん、その後無言ですが、回答したのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。

[womomo]

成功しました！
SurferOnWwwさん！前回に引き続き、お世話になりました。
本当にありがとうございます。

Answer 1

［ファイル取込］ボタンクリックで input type="file" のファイル選択ダイアログを表示して、ユーザーがダイアログでファイルを選んだら即アップロードできればいいのであれば、先の質問者さんのスレッド、

【JavaScript】ファイル選択したファイル名を同期的に返す
https://teratail.com/questions/9sarjzchr7z3rl

の、yambejp さんの回答のコード、

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const showOpenFileDialog=async ()=>{
    return new Promise(resolve => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.xlsx';
      input.addEventListener('change',e=>resolve(e.target.files[0]));
      input.click();
    });
  };
  btn.addEventListener('click',async ()=>{
    const file=await showOpenFileDialog();
    console.log(file);
  });
});
</script>
<input type="button" value="fileopen" id="btn">

で、console.log(file); のところを以下のようにすれば送信できるはずです。お試しください。

const formData = new FormData();
formData.append("postedFile", file);
const param = {
    method: "POST",
    body: formData
}
fetch("送信先 Web API の URL", param);