Eingabetyp = "Datei" in Ember.js

Question

Ich schrieb eine Ember-Komponente, die ein formatiertes Eingabefeld darstellt, das Dateiuploads verarbeiten kann. Um dies zu erreichen, habe ich eine <div> und eine <input> verwendet. Die <input> hat visibility: hidden und sobald das Klickereignis auf die <div> ausgelöst wird, feuere ich das Klickereignis auf die unsichtbare <input> in der Aktion Handhabung der Ember-Komponente.

Mein Problem ist, dass nach der Auswahl der Dateien die Aktion nie erreicht meine Ember-Komponente.

Add-Dokument-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-Dokument-input.js

import Ember from 'ember'; 

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

Ich denke, dass es etwas mit mir zu tun hat das Click-Ereignis auslösenden innerhalb der Aktion. Auf diese Weise kommt es beim zweiten Mal, dass eine Aktion in der Ansicht passiert, nicht zur Komponente.

Ember Version: 2.7.0

Answer 1

Dies ist ein open issue. Sie können ein natives Eingabeelement und eine Abschlussaktion verwenden, um das -Ereignis abzufangen, wie vorgeschlagen 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"/> 

Answer 2

Genau wie @Ramy, sagte

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

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

Durch diese Implementierung, für mich zu arbeiten.