Ember syntax to get element by ID not working

My HTML template is a basic:

<h1>Upload Photo</h1>

<form >
  
  <button type="submit">Upload</button>
</form>

I have this in my controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  firebaseApp: Ember.inject.service(),

  actions: {
    upload() {
      console.log('Uploading photo from controller');
      var storageRef = this.get('firebaseApp').storage().ref();

      // var selectedFile = Ember.$('#image').files[0];
      var selectedFile = document.getElementById('image').files[0];

      console.log('selectedFile = ', selectedFile);

      // var photoRef = storageRef.child('ember-mascot.png');
    }
  }
});

If I use the normal javascript way:

var selectedFile = document.getElementById('image').files[0];

It works, I get a console log of the file.

However, if I use Ember's syntax of retrieving file:

var selectedFile = Ember.$('#image').files[0];

I get a javascript console error:

TypeError: Cannot read property '0' of undefined

If I use:

var selectedFile = this.$('#image').files[0];

I get this error:

TypeError: this.$ is not a function

According to this Stackoverflow answer:

Getting element by ID in Ember

Ember.$() or this.$() should work but it isn't for some reason.