输入类型=“文件"在 Ember.js 中 [英] Input type="file" in Ember.js

问题描述

我编写了一个 Ember 组件，它表示可以处理文件上传的样式化输入字段.为了实现这一点，我使用了一个 <div> 和一个 <input>.<input> 具有 visibility: hidden 并且一旦 <div> 上的点击事件被触发，我就会触发点击事件在 Ember 组件的操作处理中不可见的 <input>.

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.

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

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 版本:2.7.0

Ember version: 2.7.0

推荐答案

这是一个 打开问题.您可以使用本机输入元素和关闭操作来拦截 change 事件，如建议 这里.

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

这篇关于输入类型=“文件"在 Ember.js 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！