How do I get jQuery's Uploadify plugin to work with ASP.NET MVC?

Answer 1

This isn't how I had to implement file upload at all. I had an action method with no parameters that used the current Request object to dive into the collection of posted files.

Some sample code from my implementation:

[AcceptVerbs(HttpVerbs.Post)]
public ContentResult Upload() {
    if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) {
        HttpPostedFileBase postedFile = Request.Files[0];
        // Do something with it
    }
}

Of course, writing tests for this becomes a PITA. You have to mock several objects in order to get it to work, for example:

var mockHttpContext = mocks.StrictMock<HttpContextBase>();
var mockRequest = mocks.StrictMock<HttpRequestBase>();
var postedFile = mocks.StrictMock<HttpPostedFileBase>();

var postedFileKeyCollection = mocks.StrictMock<HttpFileCollectionBase>();

mockHttpContext.Expect(x => x.Request).Return(mockRequest).Repeat.Any();
mockRequest.Expect(x => x.Files).Return(postedFileKeyCollection).Repeat.Any();

postedFileKeyCollection.Expect(x => x[0]).Return(postedFile).Repeat.Any();
postedFileKeyCollection.Expect(x => x.Count).Return(1);

postedFile.Expect(f => f.ContentLength).Return(1024);
postedFile.Expect(f => f.InputStream).Return(null);

It would be easier to create an interface into the posted files and only mock that, with a concrete implementation injected into your controller using IoC.

I think this was largely based off of this post: Implementing HTTP File Upload with ASP.NET MVC including Tests and Mocks

Answer 2

Reading the documentation, it looks like it is sending an array of files. Have you tried:

public string Upload( HttpPostedFileBase[] fileData )

It's also possible that the default model binder won't work with HttpPostedFileBase and you'll either need to use Rory's mechanism or write your own model binder.

Answer 3

The problem might be that you need to specify that the action you are uploading to is set to Post...it won't work with the action as a Get action.

So, this:

public string Upload(HttpPostedFileBase FileData)
{
   //do something
}

Should be this:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase FileData)
{
   //do something
}

Also, be aware that if you are using this in a "logged in" section of your site, you should take a look here for a known bug with uploadify and authentication: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx

Also, just an aside, there are several ways in MVC to handle file uploads (using Request.Files as per Rory Fitzpatrick's suggestion, as well as passing the HttpPostedFileBase file as an argument in the action definition). It shouldn't really matter in order to get Uploadify to work.

Answer 4

public string Upload(HttpPostedFileBase FileData) {}

is correct - the file uploaded by uploadify will get binded to FileData. No need to get into Request.Files to retrieve the file - which makes it harder to mock and test.

If your action isn't firing at all (i.e. try debugging and see if a breakpoint within the method is hit), then your issue is most likely the 'script' value - are you running under a virtual directory? If so you'll need to put the name of the directory in front. Uploadify is using an absolute path.

i.e. 'script: '/virtual_directory/Placement/Upload'

right now uploadify is sending to http://localhost/Placement/Upload.

also try using the route debugger (http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx) to check where your route is being mapped to.

Answer 5

try with this http://www.scriptsearch.com/details/8402.html