File Upload In WEBAPI Using JQuery

Welcome to the next part of tutorial in Web API series. In this post, I am going to explain, how to upload the files, using Web API help of jquery. If you are new to Web API in ASP.NET MVC5. Refer below the posts for the basics of Web API.

• Introduction to Web API.
• How to retrieve and display the data from Web API in ASP.NET MVC5.
• How to post the data to Web API, using jQuery client.

Create an API Service to save the uploaded file in the Server

1. I created a UploadapiController API controller.
2. Add a new folder "UploadFiles" folder to the solution.
3. Replace the UploadapiControlller code with the code, given below, to save the uploaded file.
   

   using System;
   using System.Collections.Generic;
   using System.IO;
   using System.Linq;
   using System.Net;
   using System.Net.Http;
   using System.Threading.Tasks;
   using System.Web;
   using System.Web.Http;
   namespace WebApiExample.Controllers {
       public class UploadapiController: ApiController {
           public Task Post() {
               List savedFilePath = new List();
               if (!Request.Content.IsMimeMultipartContent()) {
                   throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
               }
               string rootPath = HttpContext.Current.Server.MapPath("~/UploadedFiles");
               var provider = new MultipartFileStreamProvider(rootPath);
               var task = Request.Content.ReadAsMultipartAsync(provider).
               ContinueWith(t => {
                   if (t.IsCanceled || t.IsFaulted) {
                       Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
                   }
                   foreach(MultipartFileData item in provider.FileData) {
                       try {
                           string name = item.Headers.ContentDisposition.FileName.Replace("\"", "");
                           string newFileName = Guid.NewGuid() + Path.GetExtension(name);
                           File.Move(item.LocalFileName, Path.Combine(rootPath, newFileName));
                           Uri baseuri = new Uri(Request.RequestUri.AbsoluteUri.Replace(Request.RequestUri.PathAndQuery, string.Empty));
                           string fileRelativePath = "~/UploadedFiles/" + newFileName;
                           Uri fileFullPath = new Uri(baseuri, VirtualPathUtility.ToAbsolute(fileRelativePath));
                           savedFilePath.Add(fileFullPath.ToString());
                       } catch (Exception ex) {
                           string message = ex.Message;
                       }
                   }
                   return Request.CreateResponse(HttpStatusCode.Created, savedFilePath);
               });
               return task;
           }
       }
   }

Add Controller to display the Index(Fileupload element)

1. Right click on Controllers folder --> Add --> Controller --> select empty controller template -->name it.
   

   public class UploadController: Controller {
       // GET: Upload
       public ActionResult Index() {
           return View();
       }
   }

2. Now, add the view to this action method to display UI.
   
3. Replace an Index view code with the View code, given below:
   

   @{
   ViewBag.Title = "www.mitechdev.com";
   }
   <script src="~/Scripts/jquery-1.10.2.min.js"></script>
   <h2>File upload to webapi</h2>
   
   <div class="panel panel-info">
   <div class="panel-heading">

   File upload in Web API
   

   </div>
   <div class="panel-body">
       <div class="form-group"> <input type="file" id="uploadfile" /> </div> <input id="btnSubmit" class="btn btn-default" type="button" value="Upload" />
       <div class="text-info" id="status"></div>
   </div>
   </div>
   <script>
       $(document).ready(function() {
           $('#btnSubmit').click(function() {
               if ($('#uploadfile').val() == '') {
                   alert('Please select file');
                   return;
               }
               var formData = new FormData();
               var file = $('#uploadfile')[0];
               formData.append('file', file.files[0]);
               $.ajax({
                   url: 'http://localhost:28335/api/Uploadapi',
                   type: 'POST',
                   data: formData,
                   contentType: false,
                   processData: false,
                   success: function(d) {
                       $("#status").html("<span>File uploaded here: <a class='text-success' href=" + d + ">Open File</a></span>");
                       $('#uploadfile').val(null);
                   },
                   error: function() {
                       alert("Faild please try upload again");
                   }
               });
           });
       });
   </script>

4. Here, I created an object to FormData() and post the file to API controller.
   
5. Run the Application and see the output in the Browser.
   
   
   
   
6. After uploading the file, you can see the file by clicking on the link "Open", given below.
   
7. Here, in this sample Application, I uploaded a sample TXT file. We can see this by clicking Open.
   
   
   

Download the source code for this tutorial here.