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

Question

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

}

Comments

[yambejp]

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

[yambejp]

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

Answer 1

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

<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">

Comments

[womomo]

早速ご返信ありがとうございます。
状況が少し違いまして、説明不足ですみません。
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]

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

[womomo]

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

Answer 2

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

}