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.

Create Sql Server Database on GoDaddy and Connect from Sql Server Management Studio

Hi

Find the below steps to create a SQL server database on GoDaddy and connect it from Management studio

Its difficult to create Sql server database table's and manage their relationship on GoDaddy. Connect Your database from Sql server management studio.

1] Login to your GoDaddy  account  and click on Visit My Account
2] Launch your Web Hosting

3] from Control Panel -> Go to Databases -> Click SQL Server

4] Click on Add button to create a new database. Add SQL Server database details and click OK

5] Shortly your database will be setup and ready to connect.

6] Click on Database Name Link to open the database details.click on Code sample to get connection string for your database.

7] Copy the data source name from connection string  or HostName from database details.

8] In last step , you will able to access your database (only your database - but you can see all database names created on godaddy sql server  :) strange from godaddy )

Manage your GoDaddy database from sql server management studio

Hope it helps.