I wish to follow up on my previous post Uploading a file in MVC4 C#5 .NET 4.5

I promised a few things here, an Ajax client, WinRT, iOs, Droid, This post addresses the ajax upload.

First some background, I’m working on an expense tracking system at the moment, the core technologies involved in this Single Page Application are:

• ASP MVC4 WebApi
• Html5 SPA
• Knockout.js

A fundamental part of this system is the ability to upload receipts.
 

When the user browses to an image file, it gets converted to base64 and uploaded via a MVC4 Api controller.

Here are the important parts:

Html

First we create an image where we can display either the previously selected image or the newly selected image.
We only display this image if it’s in the javascript model.

Secondly we bind the html5 input file with a knockout binding.

Javascript

Model

The important parts are the image and imageType properties, there also exists a computed property that joins these two so it can be displayed in an image tag. The reason i keep these separated is that I can’t post the source as is without further encoding.

Knockout Bindings

In knockout.js you are not limited to the built in bindings like, click and value, you can create your own,
I’ve taken https://github.com/khayrov/khayrov.github.com/blob/master/jsfiddle/knockout-fileapi/ko_file.js as my start point, this pretty much does what I want, however I made a slight tweak in that i wanted base64. (basically because I’ve written some of the objective-C iOS app already and didn’t fancy changing it).

WebApi

ExpenseDto

All source can be viewed @ https://github.com/brianbruff/Expenses

So I’ve had a problem uploading a file using a HTML5 input of type file field.

For love nor money could I see a problem with the code above (in my defence I’m working on this project late in the evening and have my First dose of Man Flu this year, I’m a 2012 survivor see: www.manfluanonymous.com )

When i get into my server code an exception was getting thrown when i read the multipart post.

All the Googling in the world didn’t help me, I saw lots of people adding “\r\n” which I’m still scratching my head over to be honest, I saw others complain about the MVC4 beta..

But hang on: I’ve done this before: So what has changed? actually something really silly ,

I simply forgot to set the input name attribute!!!

Hope this helps somebody …