Ajax Multiple file upload script with Progress bar, Drag and Drop qq.FileUploader in mvc 4 razor

Ajax Multiple file upload script with Progress bar, Drag and Drop in mvc 4

This script uses XMLHttpRequest for uploading multiple files with progress-bar with drag and drop feature and falls back to hidden iframe based upload in other browsers.
Features

• multiple file select, progress-bar in Firefox, Chrome, Safari
• drag-and-drop file select in Firefox, Chrome
• uploads are cancellable
• no external dependencies
• doesn’t use Flash
• fully working with https
• keyboard support in Firefox, Chrome, Safari

Demo: Check the demo
URL: http://valums.com/ajax-upload/
Download: Download the source code

Usage:
Include fileuploader.js and fileuploader.css into upload.cshtml

<link href="~/Scripts/valums_file_uploader/fileuploader.css" rel="stylesheet" type="text/css"></link>
<script src="~/Scripts/valums_file_uploader/fileuploader.js" type="text/javascript"></script>

Now create a container element on the page, which accepts the files, we drop to it.

<div id="file-uploader">
<noscript>
Please enable JavaScript to use file uploader.
</noscript>
</div>

Now initialize your uploader. Paste the below the javascript below the container div tag.

var uploader = new qq.FileUploader({
     element: $("#file_uploader")[0],
     action: '@Url.Action("SaveFiles", "Upload")',
     // additional data to send, name-value pass     
     params: { id: $("#id").val() },
     // validation
     // ex. ['jpg', 'jpeg', 'png', 'gif'] or []
     allowedExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
     uploadButtonText: "Select Files",
     // each file size limit in bytes
     // this option isn't supported in all browsers     
     sizeLimit: 2147483647, // max size
     minSizeLimit: 0, // min size
     multiple: true,
     autoUpload: false,
     // set to true to output server response to console
     debug: false,
     failUploadText: 'File Already Exist.',
     //extraDropzones: [$(".qq-upload-extra-drop-area")[0]]
     // events
     // you can return false to abort submit
     onSubmit: function(id, fileName){},
     onProgress: function(id, fileName, loaded, total){},
     onComplete: function(id, fileName, responseJSON){},
     onCancel: function(id, fileName){},
     messages: {
         // error messages, see qq.FileUploaderBasic for content
     },
     showMessage: function(message){ alert(message); }
 });

 $('#startUpload').click(function () {
       uploader.uploadStoredFiles();
 });

Save Files in server side action.

[HttpPost]
public JsonResult SaveFiles(string qqfile)
{
    string id = Request["id"];
    var path = Server.MapPath("FilesFolderPath");
    var file = string.Empty;
    var file_Extension = string.Empty;
    var file_Size = string.Empty;
    try
    {
        var stream = Request.InputStream;
        if (String.IsNullOrEmpty(Request["qqfile"]))
        {
            // IE
            HttpPostedFileBase postedFile = Request.Files[0];
            stream = postedFile.InputStream;
            file = Path.Combine(path, System.IO.Path.GetFileName(Request.Files[0].FileName));
        }
        else
        {
            //Webkit, Mozilla
            file = Path.Combine(path, qqfile);
        }

        // Get Extension
        file_Extension = Path.GetExtension(file);

        // Save File
        var buffer = new byte[stream.Length];
        stream.Read(buffer, 0, buffer.Length);
        System.IO.File.WriteAllBytes(file, buffer);

        // Get File Size
        FileInfo f = new FileInfo(file);
        file_Size = Convert.ToString(f.Length);

    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message }, "application/json");
    }
    return Json(new { success = true }, "text/html");
}