request.files returns null when using onsubmit attribute

Question

Request.files returns null after adding onsubmit attribute to the BeginForm and working fine when removed . I tried with id attribute same issue. also i tried to add from collection in the controller

view

@using (Html.BeginForm("Create", "Candidate", FormMethod.Post, new { onsubmit = "return SubmitForm(this)",  enctype = "multipart /form-data" }))

{
    <div class="form-horizontal">
       ....
        <div class="form-group">
            @Html.Label("Avatar", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" name="file" multiple="multiple" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
   
 function SubmitForm(form) {
            $.validator.unobtrusive.parse(form);
            if($(form).valid()){
                $.ajax({
                    type : "POST",
                    url : form.action,
                    data : $(form).serialize(),
                    success : function (data) {
                        if(data.success)
                        {
                            Popup.dialog('close');
                            dataTable.ajax.reload();

                            $.notify(data.message,{
                                globalPosition :"top center",
                                className : "success"
                            })

                        }
                    }
                });
            }
            return false;
        }



actionResult Create(model model)
{
}

I think your question has been answered here https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously — Nadia Chibrikova, Nov 22 '20 at 08:31

score 0 · Answer 1 · answered Apr 04 '21 at 05:10

try this:

var form = $('form')[0];
var formData = new FormData(form);

    function SubmitForm(form) {
                $.validator.unobtrusive.parse(form);
                if($(form).valid()){
                    $.ajax({
                        type : "POST",
                        url : "your url",
                        data : formData ,
                        contentType: false,
                        processData: false,
                        success : function (data) {
                            if(data.success)
                            {
                                Popup.dialog('close');
                                dataTable.ajax.reload();
    
                                $.notify(data.message,{
                                    globalPosition :"top center",
                                    className : "success"
                                })
    
                            }
                        }
                    });
                }
                return false;
            }

also in your controller function you need to add the HttpPostedFileBase parameter:

actionResult Create(HttpPostedFileBase Uploadedfile)
{
//Do stuff here
}

request.files returns null when using onsubmit attribute

1 Answers1