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.

phonegap iScroll issue: input types not working

Android Application development using Phonegap , Html5 and javascript is really nice.
To give Scroll effect to any html element  use iScroll.js .

iScroll.js is really great .But when we apply iScroll to any Html element like div or ul Then Input type element like Checkbox ,Textarea didn't work.

Finally this solution works for me on android using jQuery Mobile and phonegap.

example

Html sample code

   <div id="Allassignwrapper" style="overflow: auto; height: 420px; 

                                     width: 738px; position: relative;">

                <ul id="Allassignmentlist">
                    <li>
                        <div id="detailsDiv">
                            <span>Classname</span><span>Sent on :26-12-2011</span>
                            <p class="description">
                                this is an assignment</p>
                            <span class="action">
                                <input type="checkbox" />
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

Apply Scroll using iScroll.js 

onBeforeScrollStart event check for input type elements and prevents

 Defualt iScroll event

<script>

    var main = new iScroll('Allassignwrapper', {
         snap: 'ul',
         momentum: true,
         hScrollbar: false,
         vScrollbar: false,
         onBeforeScrollStart: function (e) {
             var target = e.target;
             while (target.nodeType != 1) target = target.parentNode;
             if (target.tagName != 'SELECT' && target.tagName != 'INPUT' 

                    && target.tagName != 'TEXTAREA')               

e.preventDefault();
         }
     });

</script>
here e.preventDefault() will allow checkbox to get focus and all its events.

When dynamic "li" element is added  to "ul" element.  then scroll will be applied automatically.