Pass fromdata with file from jquery, ajax to controller in asp.net mvc

Question

I am trying to pass formdata fileupload with ajax and Jquery to my controller.

But when I am in the controller the Request.files.count is 0??

What am I been missing?

The view file

<div class="form-group">
                  @Html.LabelFor(model => model.ImageFile)

                        <!-- Example file element -->
                        <input type="file" name="FileUpload1" id="FileUpload1" />

                </div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#loginButton').click(function (e) {
            e.preventDefault();
            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload1").files.length;

            var file = document.getElementById("FileUpload1").files[0];
            formData.append("FileUpload", file);
            alert(totalFiles);
            alert(file);

        $.ajax({
            type: "POST",
            url: '/Manage/GetPartialView)',
            data: $formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (result) {
                alert(result);
            },

        });
    });
  });

The controller

 [AllowAnonymous]
    [ValidateAntiForgeryToken]
    [HttpPost]
    public ActionResult GetPartialView(Listing listing)
    {
        if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
        }


        if (ModelState.IsValid)
        {
            db.Listings.Add(listing);
            db.SaveChanges();
        }
        return PartialView("_ProfileCreateListingsPartial");
    }

Hope someone could help me with this problem /Tina

`data: $formData` should be `data: formData` (you do not have a variable named `$formData`). And what is the point of the `Listing listing` parameter - your not posting back anything relating to that model? — , May 04 '16 at 12:57
And if you are wanting to pass the model and the file, refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , May 04 '16 at 13:12
You are not getting the model because your `.click()` even is cancelling the action and you only submitting the file :) — , May 04 '16 at 21:49

score 2 · Accepted Answer · answered May 04 '16 at 13:31

Use This:

   jQuery(document).ready(function ($) {
    $('#loginButton').click(function (e) {
        e.preventDefault();
        var formData = new FormData();
        var totalFiles = document.getElementById("FileUpload1").files.length;

        var file = document.getElementById("FileUpload1").files[0];
        formData.append("FileUpload", file);
        alert(totalFiles);
        alert(file);

    $.ajax({
        type: "POST",
        url: '/Manage/GetPartialView',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function (result) {
            alert(result);
        },

    });
});


});

It is still 0 in my controller – tinaw25 May 04 '16 at 13:47 — tinaw25, May 04 '16 at 13:47

Pass fromdata with file from jquery, ajax to controller in asp.net mvc

1 Answers1