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? — user3559349
– user3559349, Commented May 4, 2016 at 12:57
And if you are wanting to pass the model and the file, refer this answer — user3559349
– user3559349, Commented May 4, 2016 at 13:12
You are not getting the model because your .click() even is cancelling the action and you only submitting the file :) — user3559349
– user3559349, Commented May 4, 2016 at 21:49

vipin Bhandari · Accepted Answer · 2016-05-04 13:31:31Z

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

    });
});


});

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related