如何捕捉“选定文件”事件？

Question

I have the following dialog box in my application :

When the user presses the Add logo button, following things should happen:

1. A file selectio dialog should pop up.
2. After the user has selected the file, a function should be called (which will update the image).

I have the following code for this. The markup for file selection looks like this:

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

$ctrl.addLogo() is defined as ( source )

$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");
    });
};

When I press the Add logo button, the file selection dialog does open, but the Click callback called message does not appear in the console. This means that I cannot detect, when the user has selected a file (or closed the dialog box with "Cancel").

How can I implement a reaction to the user selecting a file (or cancelling the dialog)?

Answer 1

When the user selects a file in an input with type="file" , it is the change event that is fired.

If you replace your click listener by a change listener, it should work :)

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

must become:

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