Input type="file" in Ember.js

Question

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

score 8 · Accepted Answer · answered Aug 09 '16 at 07:50

8

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"/>

answered Aug 09 '16 at 07:50

Ramy Ben Aroya

2,333
14
20

@Schnodderbalken `Ember.$("input[type='file']").click();` will cause clicks on all file inputs in the document. You should replace it with: `this.$("input[type='file']").click();` – Ramy Ben Aroya Aug 09 '16 at 09:44
Yes, sure. In that case it didn't matter because it was the only input in the document and the problem laid somewhere else. Thanks for the advice though. – Schnodderbalken Aug 09 '16 at 11:25

score 2 · Answer 2 · answered Nov 01 '16 at 22:01

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.

Input type="file" in Ember.js

2 Answers2

Linked