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:
[code]
@Html.HiddenFor(model => model.Id)
[/code]
Now check out how it renders:
[code lang=”html”]
<input id="Id" name="Id" type="hidden" value="5168e-yada-yada" />
[/code]
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).
[code lang=”javascript” highlight=”10″]
//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
});
[/code]
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”).
[code lang=”csharp” highlight=”2,3,5″]
[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";
}
[/code]
And there you have it. The picture name is saved in the database with the Id of the person attached.