modal ajax post file returns null in file upload

Question

User456628452 posted

i am trying to upload file in ajax modal pop up, when i submit data and file to controller, file give null value.

this is what i have done so far

index page

<a class="btn btn-primary add-tooltip" href="#" onclick="addNewSubject(@student.Id);">Add New</a>

Modal pop up

<script>
    function addNewSubject(Id) {

        var urlPath = '@(Url.Action("AddNewSubject", "Student"))';


        $.ajax({
            type: "GET",
            url: urlPath,
            data: { "Id": Id},
            success: function (data) {
                $('#modal-container').html(data);
                $('#modal-container').modal('show');
            },
            error: function () {
                alert("Error loading the page.");
            }
        });
    };
</script>

Modal View

@using (Ajax.BeginForm("AddNewSubject", "Student", new AjaxOptions { UpdateTargetId = "result-ajax", LoadingElementId = "preloader", OnSuccess = "success", OnFailure = "failure", HttpMethod = "POST" }, new { enctype = "multipart/form-data" })) 
                    {
                    <div id = "result-ajax" >
                         @Html.AntiForgeryToken()
                         <div class="modal-body">
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                            @Html.Hidden("StudentId", (int) ViewBag.StudentId)

                            <div class="form-group">
                                @Html.LabelFor(model => model.Number, "Subject No", htmlAttributes: new { @class = "control-label" })
                                @Html.TextBoxFor(m => Model.Number, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.Number, "", new { @class = "text-danger" })
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Name, "Subject Name", htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(m => Model.Name)
                                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                            </div>
                            

                            <label for="file">Upload Image:</label>
                            <input type = "file" name="file" id="file" /><br><br>
        @*<input type="submit" value="Upload Image" />*@
                                </div>

                            </div>
                        <div class="modal-footer">
                            <input type = "submit" id="BtnSave" class="btn btn-primary" value="submit" />
                        </div>
                    }



<script>
            function success(ajaxContext)
{
                $('#modal-container').modal('hide');
            location.reload();
}

function failure(ajaxContext)
{
            var response = ajaxContext.responseText;

                $.notify({
            icon: 'fa fa-thumbs-o-down',
                    title: "<strong>An error occured: <strong>",
                    message: "Server returned an error"
                }, {
            type: "danger",
                    //showProgressbar: true,
                    placement:
                {
                from: "top",
                        align: "right"
                    }
            });
}
            </script>

Controller

     [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AddNewSubject(AddSubjectViewModel model, HttpPostedFileBase file)
        {