MVC Async File Upload

To use the upload html control inside an ajax request, the following steps need to be taken:

  1. Define an ajax function for the upload button
  2. Define the form for the upload
  3. Add the input file control to the form
  4. Handle the file in the MVC controller
  5. Return the json result, wrapped in a text item
  6. Display the results client side, no post back

The file which is uploaded is sent to the controller as a HttpPostedFileBase object. When this file is saved, the result is then sent back to the client and the view is updated.

Controller Logic:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using MvcAsyncFilestreamUpload.Models;

namespace MvcAsyncFilestreamUpload.Controllers
    public class HomeController : Controller
        public static List<DocumentModel> Docs = new List<DocumentModel>();
        public ActionResult Index()
            return View();

        public ActionResult GetFileAsync(int id)
            // get your file from the database async...
            return View();

        public FileUploadJsonResult AjaxUpload(HttpPostedFileBase file, UploadModel model)
            if (file != null && !string.IsNullOrEmpty(file.FileName))
                // here you can save your file to the database...
                var doc = new DocumentModel
                        Id = Docs.Count+ 1,
                        DocumentName = file.FileName,
                        RecievedDate = DateTime.Now,
                        UploadDate = DateTime.Now

            if (file == null) return new FileUploadJsonResult { Data = new { message = "FileUploadJsonResultMessage" } };

            return new FileUploadJsonResult { Data = new { message = System.IO.Path.GetFileName(file.FileName) + "FileUploadJsonResultMessageSuccess" } };

        public ActionResult UploadForm()
            var model = new UploadModel();
            model.Documents = Docs;
            // get your file headers from the database

            return PartialView("UploadForm", model);

Async form and javascript logic:

@model MvcAsyncFilestreamUpload.Models.UploadModel

<!DOCTYPE html>

            A filestream demo
        <div id="doclist">
        <script type="text/javascript">
            $(document).ready(function () {
                    target: "#ajaxUploadForm",
                    iframe: true,
                    dataType: "json",
                    beforeSubmit: function () {
                    success: function (result) {
                        loadUrlContent('@(Url.Action("UploadForm"))', 'doclist');
		            $("#fileInput").replaceWith("<input type=\"file\" id=\"fileInput\" name=\"file\" />");
		        error: function (xhr, textStatus, errorThrown) {
	<form id="ajaxUploadForm" action="@Url.Action("AjaxUpload", "Home")" method="post" enctype="multipart/form-data">

		<fieldset class="form">
			<legend>Async Upload Form</legend>
			<ol class="last">
					<label>upload </label>
					<input type="file" id="fileInput" name="file" style="width:317px" />
					<input class="btn" id="ajaxUploadButton" type="submit" value="Upload" />


using System.Web.Mvc;

namespace MvcAsyncFilestreamUpload
    public class FileUploadJsonResult : JsonResult
        public override void ExecuteResult(ControllerContext context)
            ContentType = "text/html";

loadUrlContent javascript method:

var loadUrlContent = function (url, containerId, hideErrorMessage, successFunction) {
        type: "GET",
        url: url,
        cache: false,
        dataType: 'html',
        success: function (returnData, textStatus) {
            $('#' + containerId).empty().html(returnData);

            if (successFunction) {
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            if (!hideErrorMessage) {
                alert(textStatus + ': ' + errorThrown);

And here the result in the browser (not very nice looking, but it’s only to demonstrate an async upload):

Full source code:

Now all you have to do is save and get your files from a database. This could be implemented using MS SQL Server Filestream.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: