December 17, 2011
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.