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

问题描述

我写了一个Ember组件，代表一个可以处理文件上传的样式输入字段。
为了达到这个目的，我使用了一个< div> 和一个< input> 。 < input> 具有 visibility：hidden ，一旦 div> 被触发，我在Ember组件的动作处理中触发不可见的< input> 上的点击事件。

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

add-document-input.hbs

 < div {{actionadd}} class =floating-button> 
< span> +< / span> 
< / div> 
 {{input multiple =trueaction =uploadon =changeaccept =image / png，image / jpeg，application / pdftype =file}} 
  

add-document-input.js

<从ember导入Ember pre>

导出默认Ember.Component.extend（{
actions：{
upload（）{
console.log（'This never happen'）;
}，
add（）{
Ember。$（input [type ='file']）。click（）;
}
}
} ）;


我想这与我在操作中触发点击事件有关。这样第二次在视图中发生一个动作，它没有得到组件。

Ember版本：2.7.0

解决方案

这是一个公开问题。
您可以使用本机输入元素和闭包操作截取更改事件，建议 here 。

 < div {{actionadd}} class =floating-button> 
< span> +< / span> 
< / div> 
< input multiple =trueonchange = {{actionupload}} accept =image / png，image / jpeg，application / pdftype =file/> 
  

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

解决方案

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屋！