file - 在 Ember.js 中输入类型 ="file"

Question

我写了一个 Ember 组件，代表一个可以处理文件上传的样式化输入字段。为了实现这一点，我使用了 <div>和一个 <input> . <input>有visibility: hidden一旦 <div> 上的点击事件被解雇 我在不可见的 <input> 上触发点击事件在 Ember 组件的 Action 处理中。

我的问题是，在选择文件之后，操作永远不会到达我的 Ember 组件。

添加文档输入.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"}}

添加文档输入.js

import Ember from 'ember';

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

估计跟我触发action中的click事件有关系。这样，第二次在 View 中发生操作时，它不会到达组件。

Ember 版本:2.7.0

Answer 1

这是一个 open issue .您可以按照建议使用 native 输入元素和闭包操作来拦截 change 事件 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"/>