Question

I’m very new to KnockoutJS, and I dig it so far, but try as I might I couldn’t find this info anywhere so I am hoping the community can help! In my View I have the following data-binding on a file input:

 <input type="file" data-bind="value: ImageToUpload"/>
 <button data-bind="click: $root.saveImage">Upload</button>

This is part of a list in a “foreach” div, so the variable “ImageToUpload” corresponds to a property on an object from that list.

In my ViewModel the Upload button calls saveImage() and I call the web service and pass the form data to a .aspx page:

self.saveImage = function (MyObject, event) {

    $.post("Service.aspx", MyObject,  function (returnedData) {

    });
}

The object passes to my service just fine and I can access all the form data as expected including the “ImageToUpload” variable… but here is where I am stuck:

1) The “ImageToUpload” is only a string representing the name of the file I uploaded and is not a ByteArray. How do I access the image file and not just the name?

2) Is there a better way to pass the ByteArray as a Stream or other format in the response header?

3) Is my technique totally off? Is there a better way to do this? My goal is to have a dynamic list of image “slots” that be uploaded to.

Thanks in advance!

Answer 1

Inability to access local file contents was a fundamental limitation of JavaScript security sandbox. It was lifted with the introduction of HTML5 file API, but, unfortunately, support is far from universal. If your code needs to work in non-compliant browsers, your only option is to let the browser handle the traditional multipart/form-data upload. If, on the other hand, not supporting IE < 10 is fine for you, it is possible to use File API “the Knockout way” with custom bindings. Have a look at this example: http://khayrov.github.com/jsfiddle/knockout-fileapi (for some reason jsFiddle breaks badly for me when I try to run this code in it). Source code at Github.