locked
modal ajax post file returns null in file upload RRS feed

  • 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)
            {

    Wednesday, January 22, 2020 11:14 AM

Answers

  • User-17257777 posted

    Hi marya,

    Are you using modal as a partial view? I have a test based on your code and I can get the file

    Index View:

    <a class="btn btn-primary add-tooltip" href="#" onclick="addNewSubject(1);">Add New</a>
    
    
    <div id="modal-container" class="modal fade" role="dialog">
        
    </div>
    
    @section scripts{
        <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>
        
    }
    

    Partial View:

    <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
            @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>
            }
            </div>
        </div>

    Controller:

            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult AddNewSubject(AddSubjectViewModel model, HttpPostedFileBase file)
            {
    
                return Content("");
            }
    
            [HttpGet]
            public ActionResult AddNewSubject(int Id)
            {
                ViewBag.StudentId = Id;
                return PartialView("AddNewSubject");
            }

    Result:

    If this is not your case, please provide us more related codes.

    Best Regards,

    Jiadong Meng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 23, 2020 3:38 AM