0

I'm new to front-end development and i'm trying to get a better understanding of front-end and how it connects with the back-end. Basically I am trying to submit a file to an action method in the back-end but for some reason it never hits the method.

Front-end:

<form id="Form2" name="Form2">
    <input type="file" name="file" id="file" multiple />
    <input type="submit" value="Upload" />
  </form>



<script>
    $(function () {
        $("#Form2").submit(function (event) {
            var formData = new FormData(this);
            $.ajax({
                url: "Property/UploadPropertyCSV",
                type: 'POST',
                datatype: 'json',
                data: formData
            }).done(function (data) {
                alert(data);
            });
        });
    });
</script>

Back end:

public ActionResult UploadPropertyCSV(HttpPostedFileBase file)
{
   // bunch of processing
   return Json(true);
}

Any ideas why this is happening?

Thanks in advance

Mark
  • 501
  • 2
  • 11
  • 28
  • 1
    You ajax options are wrong. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) –  Jun 28 '16 at 03:52
  • Thanks so much! Not quite sure how I missed this post. :) – Mark Jun 28 '16 at 04:00

1 Answers1

0

im not really sure about your ajax method, but basically, I would do it like bellow :

$("#Form2").submit(function (event) {
        var formData = new FormData(this);
        $.ajax({
            url: '@Url.Action("UploadPropertyCSV", "Property")',
            type: 'POST',
            datatype: 'json',
            data: { file: formData},
            success: function (result) {
                alert(result);
            }
        })
    });
Mark
  • 2,041
  • 2
  • 18
  • 35