Uploadify and ASP.NET MVC 3 and scriptData

I'm writing a member registration web application and the customer wants to see a picture with every member. And I wanted to add a progressbar and make it Ajax enabled. There are quite a few upload plugins available and one of them is Uploadify.
Uploadify isn't really Ajax but Flash but hey, it gets the DIV refreshed and that's what it's all about.

I also checked out Telerik but while they have great resources it is a royal pain to set up. You need to add references on all those different places while I like things clean and simple.

So here's how I got Uploadify to work:

Get the software

You can download the latest version here. Oh my, it's more than a year old. Oh well. Let's just get going.
And after that you just read this fantastic article. Done. No just kidding. While this is a great blogpost to get you started, I wanted something extra. I wanted to save the picture in the database. I wanted to rename the uploaded picture and I wanted the name to contain the Id of the person.

Grab the Id (Primary Key) of the record

In the Edit.cshtml just add a hidden label with the Model.Id:

  @Html.HiddenFor(model => model.Id)

Now check out how it renders:

<input id="Id" name="Id" type="hidden" value="5168e-yada-yada" /> 

And we see the name = "Id" and the type is Input, so we need to copy the value with the Uploadify upload.
Uploadify offers the scriptData method for this purpose. In this example I copy the value of the Id DIV to a variable called thisGuid.
This is then being posted to the server as a POST variable ($_POST in php).

 //Upload images with uploadify 
    $("#fotoupload").uploadify({
        'uploader': '/Scripts/uploadify.swf',
        'cancelImg': '/Content/images/cancel.png',
        'buttonText': 'Upload foto',
        'script': '/Person/UploadFile',
        'folder': '/Content/upload',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'scriptData': {'thisGuid': $("input#Id").val() },
        'multi': false,
        'auto': true
    });

Grab the scriptData variable in your controller code

In a former version of Uploadify you could use Request.QueryString["elementName"] but it returns null. Now you can get the value as part of a FormCollection. So you'll need to add the FormCollection to the arguments of your controller upload method. And then you can grab the value with form.Get("elementName").

[HttpPost]
public string UploadFile(HttpPostedFileBase fileData, 
    FormCollection form)
{
   var guid = form.Get("thisGuid");
   var fileName = Server.MapPath("~/Content/upload/" + 
        System.IO.Path.GetFileName(guid + fileData.FileName));
  var person = _repo.getPersonById(guid);
  person.Picture = guid + fileData.FileName;
  _repo.Update(person);
  fileData.SaveAs(fileName);
  return "ok";
}

And there you have it. The picture name is saved in the database with the Id of the person attached.