Loading files into chunks with blueimp in Asp.Net MVC

Let's say you mean blueimp's jQuery FileUpload module. This is how I handle it in my project. I am uploading large images not exceeding 30MB. So this example is just code, not the fact that you need to process 1GB files.

This is a piece of javascript code. There is nothing special. I am just following the documentation and FileUpload example. I am just posting a couple more properties (including AntiforgeryToken) that are not required for correct behavior.

$("#file-upload").fileupload({
    url: 'upload-file',
    dataType: 'json',
    autoUpload: false,
    maxChunkSize: 5000000,
    progressInterval: 1000,
    bitrateInterval: 1000
}).on('fileuploadadd', function (e, data) {
    fileData = data; // save data to be able to submit them later

    if (window.File && window.Blob) {
        // update form data
        data.formData = {
            uploadFolder: '/upload-folder/some-guid',
            __RequestVerificationToken: $("#upload-form").find('input[name=__RequestVerificationToken]').val()
        };
    } else {
        // chunk upload not supported
    }
});

$("#file-submit").on('click', function (e) {
    e.preventDefault();
    fileData.submit();
});

      

        
        
        
      

    

On the server side, I have a model class:

public class UploadViewRequest
{
    public Guid UploadFolder { get; set; }
    public bool IsChunk { get; set; }
    public int ChunkNumber { get; set; }
    public bool IsFirst { get; set; }
    public bool IsLast { get; set; }
    public HttpPostedFileBase OriginalFile { get; set; }
    public bool JsonAccepted { get; set; }
}

      

        
        
        
      

    

And I wrote my own nexus for this class, so that I can see if it's the whole whole file or just a chunk, and if so, which part of the file I will process:

public class UploadViewRequestBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        UploadViewRequest model = base.BindModel(controllerContext, bindingContext) as UploadViewRequest;

        string rangeHeader = controllerContext.HttpContext.Request.Headers["Content-Range"];
        if (string.IsNullOrEmpty(rangeHeader))
            model.IsChunk = false;
        else
        {
            model.IsChunk = true;

            Match match = Regex.Match(rangeHeader, "^bytes ([\\d]+)-([\\d]+)\\/([\\d]+)$", RegexOptions.IgnoreCase);
            int bytesFrom = int.Parse(match.Groups[1].Value);
            int bytesTo = int.Parse(match.Groups[2].Value);
            int bytesFull = int.Parse(match.Groups[3].Value);

            if (bytesTo == bytesFull)
                model.IsLast = true;
            else
                model.IsLast = false;

            if (bytesFrom == 0)
            {
                model.ChunkNumber = 1;
                model.IsFirst = true;
            }
            else
            {
                int bytesSize = bytesTo - bytesFrom + 1;
                model.ChunkNumber = (bytesFrom / bytesSize) + 1;
                model.IsFirst = false;
            }
        }

        if (controllerContext.HttpContext.Request["HTTP_ACCEPT"] != null && controllerContext.HttpContext.Request["HTTP_ACCEPT"].Contains("application/json"))
            model.JsonAccepted = true;
        else
            model.JsonAccepted = false;

        return model;
    }
}

      

        
        
        
      

    

and this is the action method of the controller:

public ActionResult Upload(UploadViewRequest request)
{
    var path = ''; // create path
    FileStatus status = null;

    try
    {
        if (request.IsChunk)
        {
            if (request.IsFirst )
            {
                // do some stuff that has to be done before the file starts uploading
            }

            var inputStream = request.OriginalFile.InputStream;

            using (var fs = new FileStream(path, FileMode.Append, FileAccess.Write))
            {
                var buffer = new byte[1024];

                var l = inputStream.Read(buffer, 0, 1024);
                while (l > 0)
                {
                    fs.Write(buffer, 0, l);
                    l = inputStream.Read(buffer, 0, 1024);
                }

                fs.Flush();
                fs.Close();
            }

            status = new FileStatus(new FileInfo(path));

            if (request.IsLast) 
            {
                // do some stuff that has to be done after the file is uploaded
            }
        }
        else
        {
            file.SaveAs(path);
            status = new FileStatus(new FileInfo(path));
        } 
    } catch {
        status = new FileStatus 
        {
            error = "Something went wrong"
        };
    }

    // this is just a browser json support/compatibility workaround
    if (request.JsonAccepted)
        return Json(status);
    else
        return Json(status, "text/plain");
}

      

        
        
        
      

    

The FileStatus class I use as the return value and convert it to json (for the jQuery UploadFile module):

public class FileStatus
{
    public const string HandlerPath = "/";

    public string group { get; set; }
    public string name { get; set; }
    public string type { get; set; }
    public int size { get; set; }
    public string progress { get; set; }
    public string url { get; set; }
    public string thumbnail_url { get; set; }
    public string delete_url { get; set; }
    public string delete_type { get; set; }
    public string error { get; set; }

    public FileStatus()
    {
    }

    public FileStatus(FileInfo fileInfo)
    {
        SetValues(fileInfo.Name, (int)fileInfo.Length, fileInfo.FullName);
    }

    public FileStatus(string fileName, int fileLength, string fullPath)
    {
        SetValues(fileName, fileLength, fullPath);
    }

    private void SetValues(string fileName, int fileLength, string fullPath)
    {
        name = fileName;
        type = "image/png";
        size = fileLength;
        progress = "1.0";
        url = HandlerPath + "/file/upload?f=" + fileName;
        delete_url = HandlerPath + "/file/delete?f=" + fileName;
        delete_type = "DELETE";
        thumbnail_url = "/Content/img/generalFile.png";
    }
}