<<< Back To Blog Post

ASP.NET MVC Uploadify Examples

Multiple File Examples

The following demonstrate how to use the jQuery plugin uploadify with ASP.NET MVC. The following ASP.NET MVC controller code.

public class UploadifyController : Controller
{
   public string Upload2(HttpPostedFileBase file, string packageId, string type)
   {
      // Add the file to the package.
      //
      Package package = PackageManager.GetPackage(packageId);
      package.AddFile(file, type);
      return "Upload received.\nFilename: " + file.FileName + "\nPackage Id: " + packageId + "\nType: " + type;
   }

   [AcceptVerbs(HttpVerbs.Post)]
   public ActionResult ProcessForm(string firstName, string lastName, string packageId)
   {
      Package package = PackageManager.GetPackage(packageId);
      package.FirstName = firstName;
      package.LastName = lastName;
      PackageManager.RemovePackage(package.Id);
      return View("UploadReceipt", package);
   }
}

Multiple File Upload - Single Input Element

In this example, the uploadify object is configured with 'multi':true. This allows multiple files to be selected using only one HTML input element. This files are posted to the same ASP.NET MVC action method. This is a useful technique if all the files can be processed the same way.

Navigate and select multiple files (1MB size limit) then click the 'Upload Files' button.

Multiple File Upload - Multple Input Elements

In this example, the uploadify objects are configured with 'multi':false. To allow multiple files to be uploaded, multiple HTML input elements are configured. These files are posted to asynchronously to the same ASP.NET MVC action method. The action method is provided a 'package ID' allowing the files to be grouped, and a 'type' variable to allow file dependent processing.

Using the buttons below, navigate and select up to three files (1MB size limit) then click the 'Upload Files' button:

Multiple File Upload - Multple Input Elements With Form Data

In this example, the uploadify objects are configured with 'multi':false. To allow multiple files to be uploaded, multiple HTML input elements are configured. These files are posted to asynchronously to the same ASP.NET MVC action method. Once all the files have been uploaded, the form is submitted.

Provide your name:

First Name

Last Name

Using the buttons below, navigate and select up to three files (1MB size limit) then click the 'Submit' button: