How to send Javascript File Object+ Data to MVC 6 Controller - ASP.NET 5

Question

This Ajax is inside a function that I know has the file and properties in. Nothing is happening, I am dragging my file and dropping it but nothing is happening with the Ajax. When I output the properties to the page I see that my function in JS has the file but it doesn't send it to the controller. I do not think it is working correctly, and when I debug my Index Controller there is no file properties in my parameters. The Ajax isn't giving me success or failure alert message.

My End goal is to get the data inside the file uploaded so I can then parse it.

JavaScript

        function sendFile(file) {


        $.ajax({
            type: "POST",
            url: "HomeController/Index", // the method we are calling
            contentType: "application/json; charset=utf-8",
            data: { filename: file.name, fileType: file.type, fileSize: file.size },
            dataType: "json",
            success: function(result) {
                alert('Yay! It worked!');
                // Or if you are returning something
                alert('I returned... ' + result.WhateverIsReturning);
            },
            error: function(result) {
                alert('Oh no :(');
            }
        });

        Output(
            "<p>File information: <strong>" + file.name +
            "</strong> type: <strong>" + file.type +
            "</strong> size: <strong>" + file.size +
            "</strong> bytes</p>"
        );

    }

AJAX

            $.ajax({
            type: "POST",
            url: "HomeController/Index", // the method we are calling
            contentType: "application/json; charset=utf-8",
            data: { filename: file.name, fileType: file.type, fileSize: file.size },
            dataType: "json",
            success: function(result) {
                alert('Yay! It worked!');
                // Or if you are returning something
                alert('I returned... ' + result.WhateverIsReturning);
            },
            error: function(result) {
                alert('Oh no :(');
            }
        });

C#

        public IActionResult Index(string fileName, string fileType, int fileSize)
    {
        ViewBag.Environments = _configHelper.GetEnvironments();
        var model = new HomeViewModel { Environment = "DEV" };
        return View(model);
    }

CSHTML

            <div class="form-group col-md-12">
            <label>Company Ids:</label>
            <div id="filedrag"><textarea class="form-control" rows="5" id="textAreaCompanyIDs" placeholder="Drop Files Here"></textarea>
            </div>
        </div>

Answer 1

To get the file in the controller, you have to send the full file.

Try something like:

AJAX:

 $.ajax({
            type: "POST",
            url: "HomeController/Index", // the method we are calling
            contentType: "application/json; charset=utf-8",
            data: { file: file, fileType: file.type, fileSize: file.size },
            dataType: "json",
            success: function(result) {
                alert('Yay! It worked!');
                // Or if you are returning something
                alert('I returned... ' + result.WhateverIsReturning);
            },
            error: function(result) {
                alert('Oh no :(');
            }
        });

Controller:

   public IActionResult Index(HttpPostedFileBase file, string fileType, int fileSize)
    {
        ViewBag.Environments = _configHelper.GetEnvironments();
        var model = new HomeViewModel { Environment = "DEV" };
        return View(model);
    }