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>

If you are trying to send an actual file you need to pass more than just the name, size, etc properties, you have to send the actual file object — Patrick Evans
– Patrick Evans, Commented Feb 1, 2016 at 13:57
Thanks, well what I need to do is just get whats inside the file so I can parse the data. — James DuBois
– James DuBois, Commented Feb 1, 2016 at 13:59
Possible duplicate of How can I upload files asynchronously? — Patrick Evans
– Patrick Evans, Commented Feb 1, 2016 at 14:09

Zippy · Accepted Answer · 2016-02-01 14:07:57Z

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);
    }

edited Feb 1, 2016 at 14:07

answered Feb 1, 2016 at 13:53

Zippy

1,8365 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James DuBois Over a year ago

Thank you but still doesn't seem to want to fill in the parameters with data.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related