質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
.NET Standard

.NET Standardは、さまざまな.NET環境で用いることができる基本的なAPIセットまたはそれを定めた仕様です。この標準に沿って.NET実装を行うことで、どのプラットフォームでも動くポータブルなライブラリを作成できます。

blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

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

womo
womomo

総合スコア4

.NET Standard

.NET Standardは、さまざまな.NET環境で用いることができる基本的なAPIセットまたはそれを定めた仕様です。この標準に沿って.NET実装を行うことで、どのプラットフォームでも動くポータブルなライブラリを作成できます。

blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

1回答

0グッド

0クリップ

460閲覧

投稿2022/11/07 07:15

編集2022/11/08 02:22

前提

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

実現したいこと

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

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

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

該当のソースコード

Blazor(Client側)

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

JavaScript

1//ファイルを開く 2022.10.20 add 2function showOpenFileDialog() { 3 const createOpenFileDialog = () => { 4 return new Promise(resolve => { 5 const input = document.createElement('input'); 6 var form = document.createElement('form'); 7 8 form.id = 'form_fileupload'; 9 form.method = 'post'; 10 form.enctype = 'multipart/form-data'; 11 form.action = '/api/NyukaYoteiTourokuSaveFile/LoadExcel'; 12 13 input.type = 'file'; 14 input.accept = '.xlsx'; 15 form.appendChild(input); 16 input.onchange = event => { resolve(event.target.files[0]); }; 17 input.click(); 18 }); 19 }; 20 21 return new Promise(resolve => { 22 resolve(createOpenFileDialog() 23 .then((response) => { 24 25 var blob = new Blob([response.buffer], { type: "application/octet-stream" }); 26 var formData = new FormData(); 27 formData.append("postedFile", blob, response.name); 28 29 // var formData = new FormData(document.getElementById("form_fileupload")); 30 return formData; 31 32 }).then(function (formData) { 33 34 $.ajax({ 35 url: '/api/NyukaYoteiTourokuSaveFile/LoadExcel', 36 // method: 'post', 37 type: 'post', 38 data: formData, 39 processData: false, // jQuery にデータを処理させない 40 contentType: false // contentType を設定させない 41 }).done(function (response) { 42 window.alert("通信成功"); 43 }).fail(function (jqXHR, textStatus, errorThrown) { 44 window.alert("通信失敗"); 45 }); 46 47 return "test"; 48 })); 49 50 });

Blazor(Server側)

1 [HttpPost("LoadExcel")] 2 public void PostExcelAsync([FromForm] IFormFile postedFile) 3 4 //public void GetExcelAsync(string fileurl) 5 { 6 string result = ""; 7 if (postedFile != null && postedFile.Length > 0) 8 { 9 string typ = postedFile.ContentType; 10 11 // アップロードされたファイル名を取得 12 //string filename = Path.GetFileName(postedFile.FileName); 13 string filename = postedFile.FileName; 14 var ExcelFilePath = Path.Combine(Directory.GetCurrentDirectory(), "Import", "Book.xlsx"); 15 using (var stream = System.IO.File.Create(ExcelFilePath)) 16 { 17 postedFile.CopyTo(stream); 18 } 19 20 // アップロードされたファイルを処理(省略) 21 22 result = $"{filename} ({postedFile.ContentType}) - " + 23 $"{postedFile.Length} bytes アップロード完了"; 24 } 25 else 26 { 27 result = "ファイルアップロードに失敗しました"; 28 } 29 30 return; 31

試したこと

サーバー側で指定した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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

SurferOnWww

2022/11/07 08:40

ASP.NET のタグもつけて下さい。 元のファイルが間違ってるとか壊れてるということは絶対ないですか? Fiddler を使って、要求をキャプチャして、ブラウザから送信されたファイルのバイト列を、元のファイルのものと、サーバーで受け取ったものと比較してみてください。
womo

2022/11/08 02:24

元のファイルは正常に開けるので、壊れていません。 Fiddlerインストールしてみたのですが、見方合ってますでしょうか?
SurferOnWww

2022/11/08 02:51

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

2022/11/08 23:22

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

2022/11/09 01:28

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

回答1

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);

投稿2022/11/08 09:46

編集2022/11/08 09:52
SurferOnWww

総合スコア17435

womomo👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

.NET Standard

.NET Standardは、さまざまな.NET環境で用いることができる基本的なAPIセットまたはそれを定めた仕様です。この標準に沿って.NET実装を行うことで、どのプラットフォームでも動くポータブルなライブラリを作成できます。

blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。