How to access file input with knockout binding?

Question

Given the following code:

<input data-bind="event: { change: uploadImage(this.files[0]) }" style="width: 10px;" type="file"> 

I get an error saying "files is not defined". I'm trying to convert this demo:

https://github.com/paulrouget/miniuploader/blob/gh-pages/index.html

To a knockout-friendly implementation. The error happens when I load the page. Any idea how I can access the file, if it's been specified by the user?

jsfiddle : http://jsfiddle.net/LkqTU/9597/

Answer 1

You have two problems:

• if you just write a function call (uploadImage(this.files[0])) inside an object literal it will be executed once when the object literal is initialized so when KO parses the binding. So it will be executed once with the wrong arguments and you change event won't work. You can make it work with wrapping it into an anonymous function. See in documentation Accessing the event object, or passing more parameters section.

• the this doesn't refer to the current element in the binding you need to use $element instead.

So the correct binding looks like this:

data-bind="event: { change: function() { uploadImage($element.files[0]) } }" 

Demo JSFiddle.