an...">
Geek asks and answers

Input type = "file" in Ember.js

I wrote the Ember component, which is a user input field that can handle file uploads. For this, I used <div>and <input>. <input>has visibility: hiddenand as soon as the click event is <div>fired, I fire the click event on the <input>Ember component, which is invisible in processing actions.

My problem is that after selecting files, the action never reaches my Ember component.

Add-in 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-in 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 this has something to do with me, triggering the click event in action. Thus, the second time the action occurs in a view that does not reach the component.

Amber Version: 2.7.0

+2
2

. , change, .

<div {{action "add"}} class="floating-button">
    <span>+</span>
</div>
<input multiple="true" onchange={{action "upload"}} accept="image/png,image/jpeg,application/pdf" type="file"/>
+6

, @Ramy ,

<input
  multiple="true"
  onchange={{action "upload"}}
  accept="image/png,image/jpeg,application/pdf"
  type="file"
/>

actions: {
  upload: function(event) {
    console.log('upload');
  }
}

, .

+2

More articles:


All Articles