File uploading is one of the common tasks in web development.
One of the best scripts for file uploading is valums/file-upoader.
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.
Features
- 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:
/js/fileuploader.js
/css/fileuploader.css
/img/loading.gif
– Put the script on your page (view):
<link href="@Url.Content("~/css/fileuploader.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/js/fileuploader.js")" type="text/javascript"></script>
<div id="file-uploader">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
</noscript>
</div>
<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
});
</script>
– 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
{
..
[HttpPost]
public ActionResult Upload(HttpPostedFileBase qqfile)
{
if (qqfile != null)
{
// this works for IE
var filename = Path.Combine(Server.MapPath("~/app_data"), Path.GetFileName(qqfile.FileName));
qqfile.SaveAs(filename);
return Json(new { success = true }, "text/html");
}
else
{
// 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))
{
Request.InputStream.CopyTo(output);
}
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:
– http://stackoverflow.com/questions/4884920/mvc3-valums-ajax-file-upload
Jeff Johnson says:
double post 🙁
Jeff Johnson says:
Thank you so much for this. I’ve been racking my brains trying to figure out where/what I was doing wrong with Valums’ plugin. This is about as clear and simple an example as possible and it set me straight.
Sunil Sebastian says:
Thank you very much for this article. It works !!! I struggled more than three days to implement an ajax based upload in ASP.net MVC3
kingJ says:
can i do something after the upload is done?like a response or callback after the update is finished,something like the post or get of jquery?