Тип ввода = «файл» в Ember.js

Question

Я написал компонент Ember, который представляет собой стилизованное поле ввода, которое может обрабатывать загрузки файлов. Для этого я использовал <div> и <input>. У <input> есть visibility: hidden, и после того, как был запущен событие click на <div>, я запускаю событие click на невидимом <input> при обработке действий компонента Ember.

Моя проблема заключается в том, что после выбора файлов действие никогда не достигает моего компонента Ember.

надстройку документ-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"}} 

адд-документ-input.js

import Ember from 'ember'; 

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

Я думаю, что это что-то делать со мной запуская событие щелчка в рамках действия. Таким образом, во второй раз действие происходит в представлении, которое не доходит до компонента.

Ember версия: 2.7.0

Answer 1

Это open issue. Вы можете использовать собственный входной элемент и действие закрытия, чтобы перехватить событие 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"/> 

Answer 2

Как сказал @Ramy,

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

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

Осуществляя это, работает для меня.