Ember.js - clicking one button to fire a click event on another

Question

I want to press button 2 to trigger the click event on button 1. I can complete these tasks using jQuery.

HTML:

<div id="container">
<input id="upload_input" type="file" name="files[]" style="display:none" />
<button id="button-2">Upload File</button>
</div>

JS:

$('#upload_input').trigger('click');

I am new to Ember.js and I would like to implement the same functionality in the context of Ember.View. Thank you in advance for your help.

Answer 1

Just use the change event in the input. Then you can submit the form or use ajax for asynchronous output. Here is a simple example:

View

App.UploadButtonView = Ember.View.extend({
  tagName: 'input',
  attributeBindings: ['type'],
  type: 'file',

  change: function(e){
    var self = this;
    var formData = new FormData();
    formData.append('file', this.$().get(0).files[0]);
    $.ajax({
      url: '/file_upload/', 
      type: 'POST',
      //Ajax events
      success: function(data){ },
      error: function(){ },
      // Form data
      data: formData,
      //Options to tell jQuery not to process data or worry about content-type.
      cache: false,
      contentType: false,
      processData: false
    });
  }
});

Template

{{view 'uploadButton'}}

Example: http://emberjs.jsbin.com/jameg/1/edit