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.
   
   1. using System;
   2. using System.Collections.Generic;
   3. using System.IO;
   4. using System.Linq;
   5. using System.Net;
   6. using System.Net.Http;
   7. using System.Threading.Tasks;
   8. using System.Web;
   9. using System.Web.Http;
   10. namespace WebApiExample.Controllers {
   11. public class UploadapiController: ApiController {
   12. public Task Post() {
   13. List savedFilePath = new List();
   14. if (!Request.Content.IsMimeMultipartContent()) {
   15. throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
   16. }
   17. string rootPath = HttpContext.Current.Server.MapPath("~/UploadedFiles");
   18. var provider = new MultipartFileStreamProvider(rootPath);
   19. var task = Request.Content.ReadAsMultipartAsync(provider).
   20. ContinueWith(t => {
   21. if (t.IsCanceled || t.IsFaulted) {
   22. Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
   23. }
   24. foreach(MultipartFileData item in provider.FileData) {
   25. try {
   26. string name = item.Headers.ContentDisposition.FileName.Replace("\"", "");
   27. string newFileName = Guid.NewGuid() + Path.GetExtension(name);
   28. File.Move(item.LocalFileName, Path.Combine(rootPath, newFileName));
   29. Uri baseuri = new Uri(Request.RequestUri.AbsoluteUri.Replace(Request.RequestUri.PathAndQuery, string.Empty));
   30. string fileRelativePath = "~/UploadedFiles/" + newFileName;
   31. Uri fileFullPath = new Uri(baseuri, VirtualPathUtility.ToAbsolute(fileRelativePath));
   32. savedFilePath.Add(fileFullPath.ToString());
   33. } catch (Exception ex) {
   34. string message = ex.Message;
   35. }
   36. }
   37. return Request.CreateResponse(HttpStatusCode.Created, savedFilePath);
   38. });
   39. return task;
   40. }
   41. }
   42. }

Add Controller to display the Index(Fileupload element)