Reputation: 11607
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
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