Step 1: Create a empty MVC project with MVC and Web API checkbox selected.
Step 2: Add WebAPI2 Controller in controller folder.
Step4: Write Following Code in WEBAPI Controller.
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 WEBAPIVideoDEMO.Controllers { public class fileuploadController : ApiController { public Task<HttpResponseMessage> Post() { List<string> savedFilePath = new List<string>(); // Check if the request contains multipart/form-data if (!Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } //Get the path of folder where we want to upload all files. string rootPath = HttpContext.Current.Server.MapPath("~/documents"); var provider = new MultipartFileStreamProvider(rootPath); // Read the form data. //If any error(Cancelled or any fault) occurred during file read , return internal server error var task = Request.Content.ReadAsMultipartAsync(provider). ContinueWith<HttpResponseMessage>(t => { if (t.IsCanceled || t.IsFaulted) { Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception); } foreach (MultipartFileData dataitem in provider.FileData) { try { //Replace / from file name string name = dataitem.Headers.ContentDisposition.FileName.Replace("\"", ""); //Create New file name using GUID to prevent duplicate file name string newFileName = Guid.NewGuid() + Path.GetExtension(name); //Move file from current location to target folder. File.Move(dataitem.LocalFileName, Path.Combine(rootPath, newFileName)); } catch (Exception ex) { string message = ex.Message; } } return Request.CreateResponse(HttpStatusCode.Created, savedFilePath); }); return task; } } }
Step 5: Create new Controller and write following code.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace WEBAPIVideoDEMO.Controllers { public class HomeController : Controller { // GET: Home public ActionResult fileupload() { return View(); } } }
Step 6:Add View in fileupload action and add following code.
@{ ViewBag.Title = "fileupload"; } <script src="~/Scripts/jquery-1.10.2.js"></script> <h2>fileupload</h2> <div> <div class="form-group"> <input type="file" id="myfile" /> </div> <input id="btn1" class="btn btn-default" type="button" value="Upload" /> </div> <script> $(document).ready(function () { $('#btn1').click(function () { if ($('#myfile').val() == '') { alert('Please select file'); return; } var formData = new FormData(); var file = $('#myfile')[0]; formData.append('file', file.files[0]); $.ajax({ url: '/api/fileUpload', type: 'POST', data: formData, contentType: false, processData: false, success: function (d) { alert('file is uploaded successfully') }, error: function () { alert('Some thing went wrong'); } }); }); }); </script>
hello sir how can we store data with image in api
Hello there, This helped me.
Thanks!
How can I get uploaded file path after upload?
Please reply fast..
Hi,
it’s worked to me,
but i can’t upload file which exceeds 32kb to my server
even i set maxcontentlength to it
Excellent it works!!