Action after file selected

I'm working in ember (and js in general) for pretty much the first time.

Here's the scenario: there is a "choose file" button. The standard file selection button has been hidden and replaced with a custom button. A user clicks the button, a file selection window appears, the user selects their file, and clicks 'ok'. Because the default button has been hidden, I need to indicate to the user that a file has been selected. I want to display a message indicating this.

In template.hbs I have something like

<button class="outline-only inline-block" id="my_file_button" >
    Choose file
</button>
<input type="file" id="my_file" name="my_file"> <!-- this is set to display: none in css file -->

   File selected

in component.js I've defined as part of actions:

clickButton(button) {
  let self = this;
  jquery('#'+button).click();
  self.set(button+'_button_clicked', true);
}

What this does is cause the "file selected" message to be displayed as soon as the user clicks the "choose file" button, whether they complete the file selection or click 'cancel'. How can I make it so the message does not display until a completed, successful selection has been made?