CODEWITHSUNDEEP
javascripthtml
user903724
user903724

Reputation: 3026

How to I associate a javascript function with the closing of the file chooser dialog?

I'm dynamically building a tabbed display of files based on user input from the file chooser that is displayed for input type=file

<input type="file" id="selectedFiles" style="display: none;" multiple/>
<input type="image" src="file_select_button_image.png" onClick="buildFileTabs();"/>

The problem is that when the user clicks on the file select button the file chooser is displayed ANDbuildFileTabs is called(). This is happening with the chromium browser. I have not tried any other browsers.

How to I associate the buildFileTabs() function with the closing of the file chooser dialog?

Upvotes: 0

Views: 58

Answers (1)

gilly3
gilly3

Reputation: 91497

Use the onchange event on the <input type="file" />.

function showFilePicker() {
    document.getElementById("selectedFiles").click();
}

function buildFileTabs(e) {
    var msg = "Selected "+ this.files.length+" files";
    var div = document.body.appendChild(document.createElement("div"));
    div.innerHTML = msg;
}
<input type="file" id="selectedFiles" style="display: none;" multiple onchange="buildFileTabs.call(this, event)" />
<input type="button" value="file_select_button_image.png" onclick="showFilePicker();"/>

Upvotes: 3

Related Questions