Sunday, 14 April 2013

Upload files using jquery fineuploader plugin in ASP.NET MVC

File uploading is one of the common tasks in web development.
One of the best scripts for file uploading is valums/file-upoader.

<link href="@Url.Content("~/css/fileuploader.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/js/fileuploader.js")" type="text/javascript"></script>
<div id="file-uploader">
<p>Please enable JavaScript to use file uploader.</p>
<script type="text/javascript">
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '@Url.Action("upload")' // put here a path to your page to handle uploading
//,allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'] // user this if you want to upload only pictures
sizeLimit: 4000000, // max size, about 4MB
minSizeLimit: 0, // min size

Valums Ajax Upload Plugin Overview

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.


  • multiple file select, progress-bar in FF, Chrome, Safari
  • drag-and-drop file select in FF, Chrome
  • uploads are cancellable
  • no external dependencies
  • doesn’t use Flash
  • fully working with https
  • keyboard support in FF, Chrome, Safari
  • tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;

Setup File Uploader plugin on ASP.NET MVC site

Here is step-by-step instructions how to setup file-uploader script on your page on ASP.NET MVC site.
- Download the script from github.
- Save files to the root of your project (or any folder you want). You need these three files:

- Put the script on your page (view):

- Create an ASP.NET MVC  controller which will handle the file uploading and save the file to some location on the server:
public class HomeController : Controller
public ActionResult Upload(HttpPostedFileBase qqfile)
if (qqfile != null)
// this works for IE
var filename = Path.Combine(Server.MapPath("~/app_data"), Path.GetFileName(qqfile.FileName));
return Json(new { success = true }, "text/html");
// this works for Firefox, Chrome
var filename = Request["qqfile"];
if (!string.IsNullOrEmpty(filename))
filename = Path.Combine(Server.MapPath("~/app_data"), Path.GetFileName(filename));
using (var output = System.IO.File.Create(filename))
return Json(new { success = true });
return Json(new { success = false });

Note that the controller action must return JsonResult.
Also note that there are two different ways to handle uploads from IE and other (Firefox/Chrome) browsers. The issue here that IE uploads uses multipart-mime while other browsers use Octet-Stream. And Valums Ajax plugin sends an application/octet-stream instead of multipart/form-data which is what the default model binder can work with.

Fine more examples on github.

Some discussions on stackoverflow about known issues:

No comments:

Post a Comment