riot.jsでinput/fileで登録したファイル名を簡単に取得する方法はあるのでしょうか？

Question

AngularJSだとfile-modelという属性を使って簡単に取得する方法があると思うのですが、riot.jsにもこのようなものがあるのか、わかる方がいれば教えていただきたいです。
（調べても見つけることができなく、ただ単に存在しないのかもしれませんが、よろしくお願いします）

【追記】

下記のようなコードで、アイコンをクリックして画像を選択すると、プレビューを表示したいと思っているのですが、なぜかできなくて困っています。
初心者ですが以前ネットで調べながらAngularで同様のものを作成したことがあったため、最初にご質問させていただいた答えがわかればできると思っていたのですが、躓いてしまったので、どこが悪いのか教えていただけると嬉しいです。

しっかりreader.onloadは実行されて、変数previewもtrueになっていることは確認できているのですが、なぜか表示がされない状況です。。

<input type='file' id='inputEyecatch' class='inputEyecatch' onchange={onChange } hidden />
<i class='fa fa-picture-o' aria-hidden='true'></i>
<img id='eyecatchImage' class='eyecatchImage' src={ previewSrc } show={ preview }>

this.onChange = function(e) {
    var fileData = e.target.files[0];
    var fileType = fileData.type;

    if(!fileType.match(/^image/)) {
    	alert('画像を選択してください');
    	return;
    }
    var reader = new FileReader();

    reader.onerror = function() {
    	alert('ファイル読み取りに失敗しました')
    }

    reader.onload = function() {
    	var preview = true;
    	var previewSrc = reader.result;
    	console.log(preview);
    }

    reader.readAsDataURL(fileData);
}

Answer 1

Riotにそういった機能はありません。公式ドキュメントに書いてあることが全てで、非常にシンプルです。
name属性を与えた要素にはthis.hogeのようにしてアクセスできるので、それでファイルを取得します。

const filename = this.fileInput.files[0].name;

追記に対して

以下のように書いてみてください。
Riotは、this.でアクセスできるメンバーにバインドできます。
また、内部で非同期処理の後、プロパティを更新する場合は明示的にupdateを呼び出す必要があります。

this.onChange = (e) => {
    const fileData = e.target.files[0];
    const fileType = fileData.type;

    if(!fileType.match(/^image/)) {
        alert('画像を選択してください');
        return;
    }

    const reader = new FileReader();

    reader.onerror = () => {
        alert('ファイル読み取りに失敗しました')
    };

    reader.onload = () => {
        this.preview = true;
        this.previewSrc = reader.result;
        this.update();
        console.log(preview);
    };

    reader.readAsDataURL(fileData);
};

Comments

[退会済みユーザー]

ご回答ありがとうございます。
Riotは本当にシンプルな機能なのですね。

最初に質問させていただいた回答がわかればできると思っていたことが質問時からずっとできない状況で困っているので、もしよろしければ質問内容の【追記】以下を読んでいただき、そちらのご回答をいただけますでしょうか？

よろしければ何卒よろしくお願いいたします。

[syuilo]

追記しました :v:

[退会済みユーザー]

こんな遅いお時間にご丁寧に回答いただき、ありがとうございます！！
しっかり表示することができました。本当に助かりました！

this.previewでも試していたのですが、「this.update();」の記載がなく、しっかり更新できていないということがわかりました。
ご丁寧に回答いただいたおかげで、今後も多少スムーズに進めそうです。

本当にありがとうございました！