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

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

新規登録して質問してみよう
ただいま回答率
85.50%
blazor

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

JavaScript

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

Q&A

解決済

2回答

1559閲覧

【JavaScript】ファイル選択したファイル名を同期的に返す

womo

総合スコア6

blazor

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

JavaScript

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

0グッド

1クリップ

投稿2022/10/14 04:21

編集2022/10/17 18:04

ASP.NetよりJavaScriptを呼び出して、ファイル選択したファイル・パスを戻り値として返したいですが、エラーによりできません。
初心者により苦戦しています。ご教授お願いします。

function showOpenFileDialog() {
const createOpenFileDialog = () => {
return new Promise(resolve => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.xlsx';
input.onchange = event => { resolve(event.target.files[0]); };
input.click();
});
};

return new Promise((resolve) => { const file = await createOpenFileDialog(); });

}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/10/14 04:28

何をトリガーにどうやってファイル情報を受け取り、どう利用したいのでしょうか?
yambejp

2022/10/14 06:19

タグに「blazor」があるようなの追加してみてはどうでしょうか?
guest

回答2

0

ちょっと状況がわからないのですがこんな感じでどうでしょうか?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const showOpenFileDialog=async ()=>{ 4 return new Promise(resolve => { 5 const input = document.createElement('input'); 6 input.type = 'file'; 7 input.accept = '.xlsx'; 8 input.addEventListener('change',e=>resolve(e.target.files[0])); 9 input.click(); 10 }); 11 }; 12 btn.addEventListener('click',async ()=>{ 13 const file=await showOpenFileDialog(); 14 console.log(file); 15 }); 16}); 17</script> 18<input type="button" value="fileopen" id="btn">

投稿2022/10/14 04:34

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

womo

2022/10/14 05:15

早速ご返信ありがとうございます。 状況が少し違いまして、説明不足ですみません。 blazorより外部JavaScriptを呼び出しておりまして、blazorにファイル名を返したいのです。 以下のようにすると、非同期になり、ファイル選択したファイル名をうまく返せません。 ********************************************** XXX.razor @code { string fileName = await JSRuntime.InvokeAsync<string>( "showOpenFileDialog" ); ********************************************** JSFunctions.js const createOpenFileDialog = () => { return new Promise(resolve => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.xlsx'; input.onchange = event => { resolve(event.target.files[0]); }; input.click(); }); }; (async () => { const file = await createOpenFileDialog(); return file.name; }) (); *********************************************
yambejp

2022/10/14 06:21

blazorの仕様がよくわからないのですがユーザーが任意にファイル選択ダイアログからファイルを選択するのですよね?blazorは、元来どのように戻り値を受け取るものなのでしょうか?asyncの無名関数を強制実行してもreturnした値はどこからも参照されていないように見えますが・・・
womo

2022/10/14 06:33

JSFunctions.jsで、固定でreturn "test"と返した場合は、受け取れるので、 (async () => { const file = await createOpenFileDialog(); return file.name; }) (); のcreateOpenFileDialogからfileを受け取る前にreturnしちゃっている気がします。 これを同期的にreturnしたいのですが、初心者で書き方がわからないので、 質問してみました。 ありがとうございます。色々トライしてみます。
guest

0

自己解決

JavaScript側を以下のように変更することで自己解決しました。
お騒がせしました。
↓↓↓
function showOpenFileDialog() {

const createOpenFileDialog = () => { return new Promise(resolve => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.xlsx'; input.onchange = event => { resolve(event.target.files[0]); }; input.click(); }); }; return new Promise(resolve => { resolve(createOpenFileDialog() .then((response) => { return response.name })); });

}

投稿2022/10/17 09:04

womo

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問