How to use HTML5 File API with Unobtrusive JavaScript?

Question

I would like to use the HTML5 File API with unobtrusive JavaScript. But I can only get it working by calling JavaScript functions from the HTML. Is there any way to use the File API with unobtrusive JavaScript?

The File API is not supported by all browsers, but I have tried this in Google Chrome and in Firefox.

From the documentation this works:

<input type="file" id="input" onchange="handleFiles(this.files)">

And I have tried with this unobtrusive JavaScript that doesn't work:

window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}

A complete example is below, and testable on jsFiddle.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}

function handleFiles(e) {
    alert('got files');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input1" onchange="handleFiles(this.files)"/>
<input type="file" id="input2"/>
</body>
</html>

KooiInc · Accepted Answer · 2011-07-21 11:30:15Z

7

Try:

window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('change', handleFiles,false);
    //                       ^not onchange        ^older firefox needs this
}

jsfiddle here

edited Jul 21, 2011 at 11:30

answered Jul 21, 2011 at 11:22

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raynos Over a year ago

Why do you set the useCapture to true rather then false ?

KooiInc Over a year ago

@Raynos: no particular reason. Default is false, I'll change it. But it's not optional in some browsers (see note @ developer.mozilla.org/en/DOM/element.addEventListener), so providing a value is useful.

Molecular Man · Accepted Answer · 2011-07-21 11:22:40Z

3

not onchange but

input2.addEventListener('change', handleFiles);

answered Jul 21, 2011 at 11:22

Molecular Man

22.4k3 gold badges74 silver badges90 bronze badges

Collectives™ on Stack Overflow

How to use HTML5 File API with Unobtrusive JavaScript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related