How to upload file using ajax.beginform in asp.net MVC

Question

My view:

using (Ajax.BeginForm("Create", "CustomerEngagement", null, new AjaxOptions { OnSuccess = "closePopUpAndShowNextPost", InsertionMode = InsertionMode.Replace, HttpMethod = "post" }, new { @id = "create" }))
{
    // Lots of things going on here 
    // I need to implement fileupload to upload attachments asynchronously here 
    <input name="fileupload1" id="fileupload1" multiple type="file" />
    <button id="fileupload" name = "upload">
    //Button to submit the form
    <button id="save" value="save">
}

Controller :

[HttpPost]
public ActionResult Create(string word, StudentModel model)
{
    List<string> synonyms = new List<string>();
    List<string> sugg = new List<string>();
    //Doing lot of stuff here
    // I'm trying to get httppostedfilebase here but its null, also request.Files[] coming null. 
}

I think in ajax.beginform file is not uploaded, can we have any other solution here?

Include the new { enctype = "multipart/form-data" } html attribute — user3559349
– user3559349, Commented Jun 15, 2015 at 7:28
You cannot upload a file using AJAX - stackoverflow.com/questions/17037948/… — ramiramilu
– ramiramilu, Commented Jun 15, 2015 at 7:46

Nilmag · Accepted Answer · 2015-06-15 14:34:21Z

0

Basically you cannot upload using AJAX as it is not supported, you can however use some plugins such as Ajax Upload and Uploadify. Many of which are found here: http://www.sitepoint.com/10-jquery-ajax-file-uploader-plugins/

You can also follow this tutorial: http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx/

answered Jun 15, 2015 at 14:34

Nilmag

5836 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karan Singh · Accepted Answer · 2017-10-12 04:18:36Z

Using this we can get the file in ajax.begin form

$("body").on("submit", "#frmAddEditProcess", function (e) {
    var form = e.target;
    if (form.dataset.ajax) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (form.dataset.ajaxUpdate) {
                    var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                    if (updateTarget) {
                        updateTarget.innerHTML = xhr.responseText;
                        OnEmployeeCertificationSuccess();
                    }
                }
            }
        };
        if ($("#frmAddEditProcess").valid()) { xhr.send(new FormData(form)); }
    } return true;
});

Collectives™ on Stack Overflow

How to upload file using ajax.beginform in asp.net MVC

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related