CODEWITHSUNDEEP
ember.jsgetelementbyid
Zhang
Zhang

Reputation: 11607

Ember syntax to get element by ID not working

My HTML template is a basic:

<h1>Upload Photo</h1>

<form {{action "upload" on="submit"}}>
  {{input type="file" id="image"}}
  <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.

Upvotes: 2

Views: 1983

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

this.$ is available only in component. if you create component everything will start to work.

ember g component upload-photo

In upload-photo.js,

import Ember from 'ember';

export default Ember.Component.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');
    }
  }
});

and in upload-photo.hbs,

<h1>Upload Photo</h1>

<form {{action "upload" on="submit"}}>
  {{input type="file" id="image"}}
  <button type="submit">Upload</button>
</form>

and include it in template like the below,

{{upload-photo }}

Upvotes: 1

Related Questions