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: 
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.](http://knockoutjs.com/documentation/event-binding.html)
* the `this` doesn't refer to the current element in the binding you need to use [`$element` instead.](http://knockoutjs.com/documentation/binding-context.html)

So the correct binding looks like this:

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

```

Demo [JSFiddle](http://jsfiddle.net/RKmQG/).
Probably this is the simplest one, also you can see the preview of the image before upload

```
<input type="file" data-bind="fileSrc: src" id="file"/>
<img data-bind="attr:{src:src}"/>

$(function() {
    ko.applyBindings(new ViewModel());
});

var ViewModel = function () {
    var self = this;

    self.src = ko.observable();
};

ko.bindingHandlers.fileSrc = {
    init: function (element, valueAccessor) {
        ko.utils.registerEventHandler(element, "change", function () {
            var reader = new FileReader();

            reader.onload = function (e) {
                var value = valueAccessor();
                value(e.target.result);
            }

            reader.readAsDataURL(element.files[0]);
        });
    }
};

```