c# MVC3 ajax.beginform to upload file not working

Question

After clicking the submit button. I am getting null in entity. Do anyone have a solution?

View

    @using (Ajax.BeginForm("CreateRoom", "Room", new AjaxOptions { HttpMethod = "POST", OnComplete = "window.location.href='Index'" }, new { enctype = "multipart/form-data", id = "ajaxUploadForm" }))
    {
        <input type="file" name="Room" />
        <input type="submit" value="OK" />
    }

controller

    [HttpPost]
    public ActionResult CreateRoom(RoomFileView entity)
    {
        //code
    }

model

     public class RoomFileView
    {
        public RoomFileView();

        public int BuildingId { get; set; }
        public int CityId { get; set; }
        public int CountryId { get; set; }
        public int FloorId { get; set; }
        public int LocationId { get; set; }
        public HttpPostedFileWrapper Room { get; set; }

        public string Content();
    }

try as an Html.Form, and remove the OnComplete attr. If that works, then its a subtlely. If not, its something big we havent seen... — Dave Alperovich
– Dave Alperovich, Commented Feb 20, 2013 at 5:17

Aleksey · Accepted Answer · 2014-01-03 21:40:31Z

8

I have written a little hack. It works fine in most of browsers, but FormData object doesn't supported in IE. You could add this code to you custom js file or html page.

window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        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;
                        } 
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);

answered Jan 3, 2014 at 21:40

Aleksey

1,6061 gold badge14 silver badges9 bronze badges

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

2 Comments

Alan Macdonald Over a year ago

Brilliant. No idea what "but FormData object doesn't supported in IE" is trying to say but I needed this hack for Firefox to work as well as IE. Haven't tested in Chrome yet.

Alan Macdonald Over a year ago

Turns out this breaks Request.IsAjaxRequest() server side so it doesn't realise this is an Ajax request anymore. Have you any idea how to fix that @Aleksey?

smCoder · Accepted Answer · 2013-02-20 06:40:55Z

5

You cannot upload files using AJAX. Use the notmal Html.BeginForm. Please Check out this link click here as this will be helpful for you.

If you want to use asynchronous uploads you may try some of the available upload components such as Ajax Upload and Uploadify.

answered Feb 20, 2013 at 6:40

smCoder

735 bronze badges

2 Comments

Felipe Miosso Over a year ago

Another solution (but no so simple one) is to convert your image to a base64 string and then decode it on the server.

Hervian Over a year ago

I found this related response useful: stackoverflow.com/a/23508202/6095334

S2K · Accepted Answer · 2013-02-20 11:54:59Z

0

You cannot upload files using AJAX.Beginform.
There are many third party js controls available.
But i don't find them much useful.
Either you have to use <iframe> or use Html.Beginform

answered Feb 20, 2013 at 11:54

S2K

1,3155 gold badges30 silver badges62 bronze badges

Comments

coder771 · Accepted Answer · 2016-10-25 13:32:57Z

0

window.addEventListener("submit", function (e) {
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
    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;
                    } 
                }
            }
        };
        xhr.send(new FormData(form));
    }
}}, true);

answered Oct 25, 2016 at 13:32

coder771

3685 silver badges19 bronze badges

1 Comment

Diego Over a year ago

Im using this script, but function defined in AjaxOptions for OnBegin and OnSuccess do not run...

Corey Byrum · Accepted Answer · 2018-04-16 22:08:10Z

0

Unfortunately you can't use Ajax.BeginForm() to upload a file. I got around this by running an onclick() event on the submit event. I found this SO answer very useful: Ajax.BeginForm is not working as expected

answered Apr 16, 2018 at 22:08

Corey Byrum

1581 silver badge4 bronze badges

Collectives™ on Stack Overflow

c# MVC3 ajax.beginform to upload file not working

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related