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, Feb 20 '13 at 05:17

score 8 · Answer 1 · answered Jan 03 '14 at 21:40

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);

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, May 12 '15 at 10:33
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? — Alan Macdonald, May 12 '15 at 13:44

score 5 · Answer 2 · answered Feb 20 '13 at 06:40

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 '13 at 06:40

smCoder

73
5

Another solution (but no so simple one) is to convert your image to a base64 string and then decode it on the server. – Felipe Miosso Feb 20 '13 at 14:24
I found this related response useful: https://stackoverflow.com/a/23508202/6095334 – Hervian Nov 26 '17 at 21:04

score 0 · Answer 3 · answered Feb 20 '13 at 11:54

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 '13 at 11:54

S2K

1,185
3
27
55

score 0 · Answer 4 · answered Oct 25 '16 at 13:32

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);

Im using this script, but function defined in AjaxOptions for OnBegin and OnSuccess do not run... — Diego, Feb 16 '17 at 19:13

score 0 · Answer 5 · answered Apr 16 '18 at 22:08

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 '18 at 22:08

Corey Byrum

119
1
3

c# MVC3 ajax.beginform to upload file not working

5 Answers5

Linked