Save Image Using Ajax.BeginForm in MVC 4

Question

I'm trying to Save Image Using Ajax form. But Unable to Get uploaded image in my action. This is my Index Page, In this page I'm loading partialview for Add Item . My Index.Cshtml

@Html.Action("_AddOrUpdateItem","Admin")

My Action Code

public PartialViewResult _AddOrUpdateItem(int? itemId)
        {
           //Some Code Here 
            return PartialView("_AddItem", item);
        }

        [HttpPost]
        public PartialViewResult AddOrUpdateItem(ToolItem toolItem, HttpPostedFileBase toolItemImage)
        {
           ////Some Code Here
            return PartialView("_AddItem", toolItem);
        }
    }

And My ajax form is as follow

@using (Ajax.BeginForm("AddOrUpdateItem", "Admin", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
{
  // Some more text boxes here
  <input type="file" id="ToolItemImage" name="toolItemImage" />
  <input type="submit" value="Save" />
}

I got a link for this same type of problem , But In my case it is not working

Upload file using Ajax form

What does not work? Does it hit your action if you debug the `[HttpPost] AddOrUpdateItem() ` method? — scheien, Feb 08 '15 at 19:06
Are you using the same javascript code as in the question you linked? Seems like a lot of similar problems with `Ajax.BeginForm` when it comes to files, and that the js is the magic wand. Any reason for not using `Html.BeginForm` and overriding submit with your own js? IIRC you should also treat it as a collection, rather than a single file, as in the answer you linked. — scheien, Feb 08 '15 at 19:20

score 0 · Answer 1 · answered Feb 08 '15 at 18:32

0

It's impossible load file using only Ajax.BeginForm without additional js script,which have been provided in your link and I can't see it in your code.Anyway I strongly recommend use Jquery Form Plugin for such purposes.

answered Feb 08 '15 at 18:32

vborutenko

4,323
5
28
48

That form.js is need only when we want to submit form using code like `$('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); ` But here I I'm submitting form . – Amit Kumar Feb 08 '15 at 18:35

score 0 · Answer 2 · answered Feb 08 '15 at 18:43

I dont know ASP MVC but for submitiing a form with file you have to use enctype="multipart/form-data">

so your form must be having something like this

<form action"your controller" method="post" enctype="multipart/form-data">
<input type="file" id="ToolItemImage" name="toolItemImage" />
<input type="submit">
</form>

score 0 · Answer 3 · answered May 04 '18 at 06:50

Save Ajax.Begien Form Image save this Jquery method and also check validation your form using ($("#frmUploader").valid()) this line of code ...

  @using (Ajax.BeginForm("Create", "Employee", new AjaxOptions()
        {
            OnBegin = "startBLoading",
            OnComplete = "stopBLoading",
            OnSuccess = "OnSuccessI"
        }, new { enctype = "multipart/form-data", id = "frmUploader" }))
        {
<div class=row>
..... Enter the Page View Desgine.....

<button type="submit" class="btn btn-product text-capitaliz">Create</button>
</div>
}
<script type="text/javascript">
 window.addEventListener("submit", function (e) {
        debugger

        if ($("#frmUploader").valid()) {
            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)

                    );

                }

            }
            OnSuccessI();
        } else {
            e.preventDefault();
        }
    },

        true
    );
</script>

Save Image Using Ajax.BeginForm in MVC 4

3 Answers3