AJAX based Asynchronous file upload using JQuery & MVC4 web API

AJAX based Asynchronous file upload using JQuery & MVC4 web API.

Lots of web application in some point in time would have demanded asynchronous file uploads, might be for better usability, better and faster performance, better bandwidth utilization, etc. here we will have an asynchronous file upload component built using JQuery AJAX, built on top of ASP.Net MVC4 framework, using ASP.Net MVC web API. Here we will enable multiple file uploads to the server. Also we will be using html template to display the result of file upload back to the user screen.

We will be referring to the following scripts in addition to the standard JQuery script library

• Ø  jquery.tmpl.min.js, this is the JQuery template library
• Ø  jquery.form.js, the JQuery AJAX form library for asynchronous form submission

o    For further details, do refer to http://www.malsup.com/jquery/form/ 

The client code goes as follows  

The HTML Client code

<div id="divFile">      <div id="divStatus">                </div>      <form id="uploadForm" action="/api/webapi/PostUpload/1" method="post">          <input type="file" name="fileContent" id="fileContent" multiple /><br />          <input type="button" value="Upload" onclick="UploadFiles();"/>      </form>  </div>

Deciphering the client code

• Ø “divFile” The main div, encompassing our file upload component
• Ø  “divStatus” The div used to display the uploaded files to server
• Ø  “uploadForm” The form used for uploading files, set to appropriate URL as action and method as POST.
• Ø  “fileContent” The HTML file selector
• Ø  “button” AJAX submission action happens at the click of this button.

The server code is implemented as ASP.Net MVC web API, accepting HTTPPost, the client code is given below.

ASP.Net MVC Web API server side code.

[System.Web.Mvc.HttpPost]  public List<Files> PostUpload()  {      string uploadpath = @"D:\temp\Uploads\{0}";      List<Files> results = new List<Files>();      string filename = string.Empty;      for (int i = 0; i < HttpContext.Current.Request.Files.Count; i++)      {          HttpPostedFile file = HttpContext.Current.Request.Files[i];          filename = file.FileName;          results.Add(new Files { FileName = filename });          if (File.Exists(string.Format(uploadpath, filename)))          {              filename = DateTime.Now.ToString("yyyyMMddHHmmss") + "__" + filename;          }          var stream = File.Create(string.Format(uploadpath, filename));            int by = file.InputStream.ReadByte();          while(by != -1)          {              stream.WriteByte((byte)by);                  by = file.InputStream.ReadByte();          }          stream.Flush();          stream.Close();      }      return results;  }

The server side code is straight forward,

• Ø   loops through the attached files in the current contexts ,
• Ø  then adds the file names to the result,
• Ø  creates similar file name (if exists then precedes the new wile with date time),
• Ø  reads the attached files and
• Ø  Finally writes to designated area on the disk.

    

There are two kinds of client side scripts functions, first one, which submits form through AJAX and second one, which receives the response.

The client side scripts

<script type="text/javascript">     function UploadFiles() {         $("#uploadForm").ajaxSubmit({             url: '/api/webapi/PostUpload',             type: 'post',              success: ShowData});     }       var strTmplstatus = '<div class="row"><div class="columns">${FileName}</div></div>';          function ShowData(responseText, statusText, xhr, $form) {         $.template('Tmplstatus', strTmplstatus);         //alert(responseText);         $.tmpl('Tmplstatus', responseText).appendTo("#divStatus");         window.document.forms['uploadForm'].reset();     } </script>

 Enjoy!!

Jayan

 s