asp.net core で input type="file" の選択内容を保持する

Question

実現したいこと

htmlの input type="file" で特定のファイルを既に選択している状態で画面を開きたいです。
具体的な流れとして
1.input type="file" でファイルを選択する
2.input type="submit" をクリックする
3.Controllerに値を渡した後、再度1.と同じ画面を表示する
4.ファイルを選択した状態の input type="file" を表示する
みたいな動きがしたいです。

前提

visual studio 2022 バージョン17.5.4を使用しており、
・プロジェクトテンプレートはASP.NET core webアプリ(Model-View-Controller)
・ターゲットフレームワークは.NET 7.0
・使用言語はC#、html、javascript
・OSはwindows10
です。

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

input type="file" でファイルを選択している状態で表示する方法が調べても出てきません。自分が知る限りではvalueで初期値を設定することができない仕様で、またファイルを選択するためには
・ファイル選択ボタンをクリック→好きなファイルをクリック→開く(O)ボタンをクリック
・ドラッグアンドドロップ
の2種類くらいしかありません。
前の画面で選択していたファイルを選択した状態の input type="file" を画面を開いた時点で表示できればなんでも良いので、もしそんな方法があれば教えていただきたいです。

該当のソースコード

試したこと

現在はjavascriptのlocalstorageを使用して遷移後の画面に値を渡すことで初期値を設定する方法を使っているのですが、これでもinput type="file" だけは初期値を設定できませんでした。
inputタグのtype="text"や"date"や"checkbox"などなら初期値を設定できるのは確認済みなのですが、type="file"だけは調べてもセキュリティ上の関係で不可能と書かれているサイトしか見つかりませんでした。
しかし、自分が調べられなかった方法が何かあればと思い質問しました。

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

Comments

[退会済みユーザー]

> 4.ファイルを選択した状態の input type="file" を表示する
みたいな動きがしたいです。

「表示する」とはどういうことですか？ページに配置した img 要素に画像を表示したい？

表題の

> asp.net core で input type="file" の選択内容を保持する

と話が違うようですが、一体何をしたいのか分かりません。説明願います。

[hoshi-takanori]

それを許すとセキュリティホールになるような…。

[maisumakun]

> 3.Controllerに値を渡した後、再度1.と同じ画面を表示する

再表示を行う目的はどのようなものでしょうか？

[退会済みユーザー]

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

Answer 1

【追加情報】

一つ案を思いつきました。ajax を使ってアップロードするのが良いと思います。

つまり、

1.input type="file" でファイルを選択する
2.input type="submit" をクリックする
3.Controllerに値を渡した後、再度1.と同じ画面を表示する
4.ファイルを選択した状態の input type="file" を表示する

のステップ 2 のように form を submit してファイルアップロードするのではなく、ajax を使ってファイルをアップロードすれば、アップロード後もブラウザ上の input type="file" はステップ 1 の状態に保たれるので、上の 4 は実現できます。

具体例やサンプルコードは以下の記事を見てください。

ASP.NET Core MVC でファイルアップロード
http://surferonwww.info/BlogEngine/post/2020/01/19/aspnet-core-mvc-file-upload.aspx

下の画像の赤枠で囲った部分を見てください。

input type="file" でユーザーが form.jpg というファイルを選択した後、［Ajax Upload］ボタンをクリックして、ajax を使って選択されたファイルをアップロードすると、サーバーはそれを受け取って保存した後 "form.jpg (image/jpeg) - 39951 bytes アップロード完了" と言う文字列を応答として返します。ブラウザはその応答を受け取って画面に表示したところが上の画像です。

タイトルの「asp.net core で input type="file" の選択内容を保持する」、ステップ 4 の「ファイルを選択した状態の input type="file" を表示する」は実現されています。

Answer 2

タイトルの「asp.net core で input type="file" の選択内容を保持する」と言うよりは、ユーザーの操作なしでファイルが選択された状態にしたいということのようですね。

それは質問者さんが、

type="file"だけは調べてもセキュリティ上の関係で不可能と書かれているサイトしか見つかりませんでした。

と書かれたとおりで、できません。

そんなことができたら、悪意のあるサイトが好き勝手にクライアントのファイルを取得できるということになります。なので、ユーザーの操作なしでファイルが選択された状態にはできないようになっています。

質問に書いてある 1, 2 のステップでサーバー側でファイルの情報が取得できた後でも、

4.ファイルを選択した状態の input type="file" を表示する

はできません。

ブラウザが昔の IE ですと、ユーザーがファイルを選択後送信すると、ユーザーの PC 内でのそのファイルのフルパス情報も一緒に送信したのですが、たとえフルパス情報が得られたとしても、JavaScript などでファイルが選択された状態にすることはできません。

前のスレッド、

System.IO の Fileクラスが使用できない
https://teratail.com/questions/5aa93c16whxwi0

の話の続きですか？ そこでも書きましたが、ASP.NET Web アプリで Windows Forms アプリと同様なことをしようとか、全く検討違いのことを考えているような気がします。

Answer 3

3.Controllerに値を渡した後、再度1.と同じ画面を表示する
4.ファイルを選択した状態の input type="file" を表示する

状況がわからないのでなんとも言えませんが、「どうしても<input type="file">の見た目で表示したい」「4の後にフォームを送信した場合に、ファイルも再送信する必要がある」という2つの条件がいずれもNoなら、「<input type="file">を使わず、何かしらの形で『アップロード済み』の表示をしておく」ような手段も考えられます。