MVC Ajax File Upload with upload progress- using blueimp/jQuery-File-Upload plugin

MVC Ajax -Uploading file using XMLHttpRequest asynchronously with progress.

Project structure

View 

@{
    ViewBag.Title = "UploadView";
}
<link href="~/Scripts/jquery.fileupload-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.min.js"></script>
<script src="~/Scripts/jquery.iframe-transport.js"></script>
<script src="~/Scripts/jquery.fileupload.js"></script>
<script src="~/Scripts/jquery.fileupload-ui.js"></script>


<script type="text/javascript">
    var currentSelectedFile;

    function Upload() {
        var file = currentSelectedFile;
        if (file == undefined) {
            alert("No file selected.");
            return false;
        }
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
        }

        if (xhr.upload != undefined) {
     xhr.upload.onprogress = function(e) {
      if (e.lengthComputable) {
       var percentComplete = (e.loaded / e.total) * 100;
       var percentCompleteValue = Math.round(percentComplete);
        console.log(percentCompleteValue + "%");
                }
            };
        }

        // path to controller method
        xhr.open('POST', '/Upload/UploadFiles');
    xhr.setRequestHeader('Content-type', 'multipart/form-data');

        //Appending file information in Http headers
        xhr.setRequestHeader('fileName', file.name);
        xhr.setRequestHeader('fileType', file.type);
        xhr.setRequestHeader('fileSize', file.size);

        xhr.send(file);

        xhr.onreadystatechange = function() {

            if (xhr.readyState == 4 && xhr.status == 200) {
                // success callback
            } else if (xhr.readyState == 0) {

                //error
            }

            if (xhr && xhr.status == 500) {
                // internal server error
            }

            if (xhr && xhr.status == 404) {
                // not found
            }

        };
        xhr.onerror = function() {

            return false;
        };
        xhr.ontimeout = function() {

            return false;
        };

    }

  

    $(function () {
        
        $('#fileuploadControl').fileupload({
            dataType: 'json',
            add: function(e, data) {

                currentSelectedFile = data.files[0];
                

            },
            done: function(e, data) {
                //data.context.text('Upload finished.');
            }
        });
       
    });

</script>
<h2>UploadView</h2>
<input id="fileuploadControl" type="file" name="file">

<input type="button" value="Upload" onclick="return Upload()"/>

Controller

using System.Web.Mvc;

namespace AjaxFileUploadMVC.Controllers
{
    public class UploadController : Controller
    {
        //
        // GET: /Upload/

        public ActionResult UploadView()
        {
            return View();
        }

        [HttpPost]
        public ActionResult UploadFiles()
        {

            string fileName = Request.Headers["fileName"];
            string fileType = Request.Headers["fileType"];
            string fileSize = Request.Headers["fileSize"];

            var inputStream = Request.InputStream;

            return  new EmptyResult();
            // save this stream to storage 
        }

    }
}


Upload file using XMLHttpRequest and manage the progress of uploading using xhr.upload.onprogress available in xmlhttprequest level 2 API.

Link to jQuery-File-Upload Plugin - 
https://github.com/blueimp/jQuery-File-Upload/wiki

nopcommerce Web Services API / Plugin - find the web service URL

Access NopCommerce web services API


Go to Plugins -> Nop.Plugin.Misc.WebServices

First Go to admin area > configuration > Access Control List and configured 'Access Web Service' permission.

INopService - defines all the API.

Web service URL - here you will find your service url
http://www.yourStore.com/Plugins/Misc.WebServices/Remote/NopService.svc

If you are running on localhost
http://localhost:port/Plugins/Misc.WebServices/Remote/NopService.svc

you can add your API's to INopService  or you can add new service.Also you can change web.config in Remote folder to add more configuration to your service.