Input type=“file” in Ember.js

问题

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

回答1:

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:

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.

来源：https://stackoverflow.com/questions/38844566/input-type-file-in-ember-js

标签

file

ember.js

input

components

action