ファイル入力でプログラムによるファイル名表示: Angular を使用して実装

Question

＃＃＃こんばんは、＃＃＃

私は Angular15 を使用してアプリケーションを開発しています。その機能の 1 つは、テーブルにチーム メンバーのデータを入力することです。

メンバーを追加するには、ボタンをクリックしてモーダル ウィンドウを表示し、データを入力し、いくつかのファイルを追加する必要があります。編集操作も同様です。

データを正常に保存し、ファイルをサーバー フォルダーにアップロードしましたが、編集中に問題が発生しました。ファイル入力ボックスにアップロードされたファイル名が表示されず、ファイルがアップロードされていないように見えます。実際にアップロードされました。

ドキュメントの名前をメンバー プロパティに保存し、ngModel を使用してファイル入力ボックスをメンバー プロパティにバインドします。

入力ボックスに「ファイルが選択されていません」というメッセージが表示され、入力ボックスにプログラムでファイル名を設定しようとすると (.ts ファイルの ViewChild と ElementRef を使用して制御します)、次のエラーが表示されます。

##core.js:1448 エラー: キャッチされません (約束内): InvalidStateError: 'HTMLInputElement' に 'value' プロパティを設定できません: この入力要素はファイル名を受け入れますが、プログラム的に null にのみ設定できます。エラー: 'HTMLInputElement' の 'value' 属性を設定できません: この入力要素はファイル名を受け入れますが、プログラムで空の文字列にのみ設定できます。

セキュリティ上のリスクがあるため、これを実行できないことは十分に理解していますが、プログラムによってファイルを挿入するのではなく、ファイルの内容ではなくファイル名を表示したいだけです。これを達成する方法はありますか?

＃＃＃ありがとう。

Answer 1

Web ドキュメント内

const input = document.querySelector("input[type=file]");
input.value = "foo";