Passing File path to MVC controller from View with Ajax J query return null

Question

I'm trying to upload a image using MVC 5 and Ajax Jquery (asynchronously) but value of image variable always return null,

i already checked some previous stack overflow posts regarding this issue but i could not find my mistake, can anyone help me,

please help,,

Model Class

 public class TravelCategoryCustom
        {
            public int categoryId { get; set; }
            public string categoryName { get; set; }
            public string categoryDescriprion { get; set; }
            public HttpPostedFileBase image { get; set; }
            public int TotalPlaces { get; set; }
        }

View

<form enctype="multipart/form-data">
                <div class="form-group">
                    <label>Category Name</label>
                    @Html.TextBoxFor(model => model.categoryName, new { @class = "form-control" })

                </div>
                <div class="form-group">
                    <label>Category Description</label>
                    @Html.TextAreaFor(model => model.categoryDescriprion, 5, 1, new { @class = "form-control " })
                </div>
                <div class="form-group">
                    <label>Category Image</label>
                     <input type="file" id="dialog" />
                </div>

                <input type="button" value="Create" id="submtt" class="btn btn-primary" onclick="favfunct()" />

            </form>   

Script

<script>
    function favfunct() {
    $.ajax({
  var formData = new FormData($('form')[0]);
        url: "/MVCTravelCategories/Create",
        dataType: "json",
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ trvlcategory: { categoryId: '1', categoryName: 'testName', categoryDescriprion: 'TestDec', image: formData , TotalPlaces: '3' } }),
        async: true,
        processData: false,
        cache: false,
        success: function (data) {
            alert(data);
        },
        error: function (xhr) {
            alert('error');
        }
    });
    }
</script>

Action Result (image) http://ishara119-001-site1.myasp.net/content/Untitled.jpg

Answer 1

Thanks for everyone that check my question, finally i found the answer, i changed my script to this and it works.

<script>
    var myVariable ;
    var Asd = 'Helslo';

    $("#myImage").change(function () {
        var file = this.files[0];
        fileName = file.name;
        myVariable = file;
        size = file.size;
        type = file.type;
        myVariable = file;
    });


    function favfunct() {
        var formData = new FormData();
        var totalFiles = document.getElementById("dialog").files.length;
        for (var i = 0; i < totalFiles; i++) {
            var file = document.getElementById("dialog").files[i];

            formData.append("dialog", file);
        }

    $.ajax({

        url: "/MVCTravelCategories/Create",
        dataType: "json",
        type: "POST",
        enctype: "multipart/form-data",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ trvlcategory: { categoryId: '1', categoryName: 'TestName', categoryDescriprion: 'TestDes', image: myVariable, TotalPlaces: '3' } }),
        async: true,
        processData: false,
        cache: false,
        success: function (data) {
            alert(data);
        },
        error: function (xhr) {
            alert(Asd.toString());
            alert('error');
        }
    });
    }
</script>