C# loading a file through Ajax and Web API

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">&times;</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" });
            }
        }