Posting JSON Object and Files to WebAPI from Javascript

This Post is on how to Post data and files in a single request from Javascript to WebAPI.

I wanted to post a Entity object along with the files but the issue i found was only one object can be posted at a time so to post data we'll have to send two AJAX calls to the service which introduces more problems such as managing transactions.

So i found out a way to overcome the issue.
Its simply posting the javascript object as a string and deserializing  it from the backend.

Now lets see the code.

//The model class 
public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
}

//The controller
public class EmployeeController : ApiController
{
    //Post
    public IHttpActionResult Post()
    {
        var httpRequest = HttpContext.Current.Request;

        //Get Employee from posted object
        var employeeString = httpRequest.Form.Get("object");

        //Deserialize the string to object
        var employee = JsonConvert.DeserializeObject(employeeString);

        if (httpRequest.Files.Count < 1)
        {
            // return BadRequest (no file(s) available)
            return BadRequest("No files to upload");
        }

        // return result
        return Ok(employee.Name + " Inserted");
    }

}

Now the Javascript part

function postEmployee() {
    //fileToUpload is input of type file
    var fileSelect = document.getElementById('fileToUpload');
    var files = fileSelect.files;

    var data = { Id: 1, Name: "John", Address: "US" };

    var formData = new FormData();
    //insert the object to be posted
    //remember this is the key thats restored from the other side
    formData.append("object", JSON.stringify(data));

    //Append the files to be uploaded
    for (var i = 0; i < files.length; i++) {
        formData.append("file" + (i + 1), files[i], files[i].name);
    }

    var xhr = new XMLHttpRequest();
    //Change the post link according to your service
    xhr.open('POST', '/api/File', true);

    xhr.onload = function () {
        if (xhr.status === 201) {
            alert(xhr.responseText);
        } else {
           alert(xhr.responseText);
        }
    };
    xhr.send(formData);
}