Input type="file" in Ember.js

2
votes

I wrote an Ember component that represents a styled input field that can handle file uploads. In order to achieve this I used a <div> and an <input>. The <input> has visibility: hidden and once the click event on the <div> is fired I fire the click event on the invisible <input> in the action handling of the Ember component.

My problem is that after choosing files the action never reaches my Ember component.

add-document-input.hbs

<div {{action "add"}} class="floating-button">
    <span>+</span>
</div>
{{input multiple="true" action="upload" on="change" accept="image/png,image/jpeg,application/pdf" type="file"}}

add-document-input.js

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        upload() {
            console.log('This never happens');
        },
        add() {
            Ember.$("input[type='file']").click();
        }
    }
});

I guess that it has something to do with me triggering the click event within the action. That way the second time an action happens in the view it does not get to the component.

Ember version: 2.7.0

2
fileember.jsinputcomponentsaction

2 Answers

8
votes

This is an open issue. You can use a native input element and a closure action to intercept the change event, as suggested here.

<div {{action "add"}} class="floating-button">
    <span>+</span>
</div>
<input multiple="true" onchange={{action "upload"}} accept="image/png,image/jpeg,application/pdf" type="file"/>
2
votes

Just like @Ramy said,

<input
  multiple="true"
  onchange={{action "upload"}}
  accept="image/png,image/jpeg,application/pdf"
  type="file"
/>

actions: {
  upload: function(event) {
    console.log('upload');
  }
}

By implementing this, working for me.