This information was mostly sourced from:
https://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/
The Modal Form
<div id="AddFileDialog" class="modal"> <!-- Modal content --> <div class="modalcontent"> <div class="modalheader"> <span class="close" onclick="cancelAddFileDialogClick();" id="closeAddFileDialog">×</span> <h1>Add File</h1> </div> <div class="modalbody"> <form id="NewsForm"> <input type="hidden" id="FAAuctionID" /> <div class="form-group has-feedback"> <label for="FAAuctionName">Auction</label> <input type="input" name="FAAuctionName" id="FAAuctionName" value="" placeholder="Enter Auction Name" autocomplete="off" class="form-control" disabled> </div> <div class="form-group has-feedback"> <label for="FileType">File Type</label> <select name="FileType" id="FileType" class="form-control"> <option value="1">Image</option> <option value="2">Document</option> </select> </div> <div class="form-group has-feedback"> <label for="FileName">Name</label> <input type="input" name="FileName" id="FileName" value="" placeholder="Enter Descriptive Name" autocomplete="off" class="form-control"> </div> <div class="form-group has-feedback"> <label for="Files">File</label> <input type="file" name="Files" id="Files" class="form-control"></input> </div> </form> </div> <div class="modalfooter"> <a href="#" class="btn btn-primary" onclick="OKAddFileDialogClick();" id="OKAddFileDialog">OK</a> <a href="#" class="btn btn-primary" onclick="cancelAddFileDialogClick();" id="cancelAddFileDialog">Cancel</a> </div> </div> </div>
Java Script Show Form
$("#FAAuctionID").val(data.record.id); $("#FAAuctionName").val(data.record.Name); $("#AddFileDialog").show();
JavaScript Dialog Management and send to server
function cancelAddFileDialogClick() { $("#AddFileDialog").hide(); } function OKAddFileDialogClick() { // Link Companies in group to Auction AuctionID = $("#FAAuctionID").val(); FileType = $("#FileType").val(); FileName = $("#FileName").val(); var fileData = new FormData(); var fileUpload = $("#Files").get(0); var files = fileUpload.files; for (var i = 0; i < files.length; i++) { fileData.append(files[i].name, files[i]); } fileData.append("AuctionID", AuctionID); fileData.append("FileType", FileType); fileData.append("Name", FileName); $.ajax({ method: "POST", contentType: false, processData: false, beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', 'Bearer ' + LoadToken(TokenName)) }, url: "/api/Auctions/File/Create", data: fileData }) .done(function (data) { if (data.Result == "OK") { alert("File Linked successfully."); $("#AddFileDialog").hide(); } if (data.status == "ERROR") { alert(data.message); } }) .fail(function (data) { alert(data.responseText); }); }
C# code in ApiController
[Route("api/Auctions/File/Create")] [HttpPost] public HttpResponseMessage UploadFiles() { // Checking no of files injected in Request object if (System.Web.HttpContext.Current.Request.Files.Count > 0) { List<Models.AuctionFile> OutFiles = new List<Models.AuctionFile>(); try { // Get all files from Request object HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; for (int i = 0; i < files.Count; i++) { //string path = AppDomain.CurrentDomain.BaseDirectory + "Uploads/"; //string filename = Path.GetFileName(Request.Files[i].FileName); HttpPostedFile file = files[i]; string fname; // Checking for Internet Explorer if (System.Web.HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || System.Web.HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER") { string[] testfiles = file.FileName.Split(new char[] { '\\' }); fname = testfiles[testfiles.Length - 1]; } else { fname = file.FileName; } fname = Path.GetFileName(fname); // Drop path of uploaded file // Get the complete folder path and store the file inside it. fname = Path.Combine(System.Web.Hosting.HostingEnvironment.MapPath("~/Uploads/"), fname); file.SaveAs(fname); // TODO: Link in Database AuctionFile Model = new AuctionFile(); Model.CreatedBy = UserHelper.currentUser(this); Model.CreatedDate = DateTime.Now; Model.AuctionID = Int32.Parse(System.Web.HttpContext.Current.Request.Params["AuctionID"]); Model.FileType = Int32.Parse(System.Web.HttpContext.Current.Request.Params["FileType"]); Model.Name = System.Web.HttpContext.Current.Request.Params["Name"]; Model.Path = fname; db.AuctionFile.Add(Model); // Done: Create Audit CreateAudit(Model); db.SaveChanges(); OutFiles.Add(Model); } // Returns message that successfully uploaded return Request.CreateResponse(HttpStatusCode.OK, new { Result = "OK", Records = OutFiles, TotalRecordCount = OutFiles.Count() }); } catch (Exception ex) { return Request.CreateResponse(HttpStatusCode.OK, new { Result = "ERROR", Message = ex.Message }); } } else { return Request.CreateResponse(HttpStatusCode.OK, new { Result = "ERROR", Message = "No files Selected" }); } }