Question

I cant’ seem to work uploadify on ASP.NET MVC3, I searched a lot and the code below seem to work fine, but not for me. When I try and upload it via html uploading method it works, not so much with uploadify. All libraries are included correctly.

<!-- Not working, HTTP ERROR 500 -->
<input id="file" type="file" name="file" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#file_upload').uploadify({
            // I tried to remove "/" at the start, does not help
            'uploader': '/Scripts/u/uploadify.swf',
            'script': '/home/upload',
            'cancelImg': '/Scripts/u/cancel.png',
            'folder': '/upload',
            'auto': true,
            'onError': function (event, ID, fileObj, errorObj) {
                alert(errorObj.type + ' Error: ' + errorObj.info);
            }
        });
    });
</script>

<!-- Working fine -->
<form action="home/upload" method="post" enctype="multipart/form-data">
  <label for="file">Filename:</label>
  <input type="file" name="file" id="file" />
  <input type="submit" />
</form>

Home Controller Action

[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
    var fileName = Path.GetFileName(file.FileName); // Object reference not set to an instance of an object. I get this if I try to upload via uploadify
    file.SaveAs(Server.MapPath("~/upload/") + fileName);
    return Content(fileName);
}

Answer 1

Didn’t you debug your code? Didn’t you notice that the file action argument is always null when the Upload action is hit? Your action argument is called file, so you need to specify that using the fileDataName option:

'fileDataName' : 'file',

By default uploadify uses Filedata, so if you don’t want to specify this name you could also adapt your action argument name to match this:

[HttpPost]
public ActionResult Upload(HttpPostedFileBase fileData)
{
    var fileName = Path.GetFileName(fileData.FileName);
    fileData.SaveAs(Path.Combine(Server.MapPath("~/upload/"), fileName));
    return Content(fileName);
}

Also make sure that the ~/upload folder exists on your server. It doesn’t when you create a new ASP.NET MVC application.

Another problem that I would like to point out with your code is that you have hardcoded absolutely all urls in your javascript. That’s very bad and chances are that your application won’t work when you deploy it in a virtual directory, say for example IIS.

In ASP.NET MVC you should always use url helpers when dealing with urls, just like that:

<script src="@Url.Content("~/Scripts/u/jquery.uploadify.v2.1.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/u/swfobject.js")" type="text/javascript"></script>

<input id="file_upload" type="file" name="file" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#file_upload').uploadify({
            'uploader': '@Url.Content("~/Scripts/u/uploadify.swf")',
            'script': '@Url.Action("upload", "home")',
            'cancelImg': '@Url.Content("~/Scripts/u/cancel.png")',
            'folder': '@Url.Content("~/upload")',
            'auto': true,
            'onError': function (event, ID, fileObj, errorObj) {
                alert(errorObj.type + ' Error: ' + errorObj.info);
            }
        });
    });
</script>