Как я могу поймать событие "file selected"?

Question

В моем приложении есть следующее диалоговое окно:

Когда пользователь нажимает кнопку Add logo, должно произойти следующее:

1. Должно появиться диалоговое окно выбора файла.
2. После того, как пользователь выбрал файл, должна быть вызвана функция (которая обновит изображение).

У меня есть следующий код для этого. разметка для выбора файла выглядит следующим образом:

<button class="btn" ng-click="$ctrl.addLogo()">Add logo</button>

$ctrl.addLogo() определяется как ( источник )

$ctrl.addLogo = function() {
    console.log("'Add logo' button clicked");
    var uploadForm = document.createElement('form');
        var fileInput = uploadForm.appendChild(document.createElement('input'));
    fileInput.type = 'file';
        fileInput.name = 'images';
    fileInput.multiple = true;
        fileInput.click(function() {
        console.log("Click callback called");
    });
};

Когда я нажимаю кнопку Add logo, открывается диалоговое окно выбора файла, но сообщение Click callback called не отображается в консоли. Это означает, что я не могу определить, когда пользователь выбрал файл (или закрыл диалоговое окно с кнопкой «Отмена»).

Как я могу реализовать реакцию на выбор пользователем файла (или отмену диалога)?

Answer 1

Когда пользователь выбирает файл в input с помощью type="file", запускается событие change.

Если вы замените click слушателя на change слушателя, он должен работать:)

fileInput.click(function() {
    console.log("Click callback called");
});

должно стать:

fileInput.change(function() {
    console.log("Click callback called");
});