Not able to upload file using Ajax.BeginForm() asynchronously

Question

I'm trying to upload a file using Ajax.BeginForm(), but it's not working out.

My view contains:

@using (Ajax.BeginForm("UploadFile", null, new AjaxOptions { HttpMethod="POST",     UpdateTargetId = "result" }, new { enctype = "multipart/form-data" }))
{
   <label id="lblUploadNewFile" for="fileUploadControl">Upload New File&lt;/label>
   <input type="file" name="fileToUpload" id="fileUploadControl"/>
   <input id="btnFileUpload" type="submit" value="Upload" />
   <span id="result" />
}

and the corresponding Controller is:

[HttpPost]
public string UploadFile(FormCollection formData)
{
   HttpPostedFileBase file=null;

   try
   {
      file = Request.Files[0];
   }
   catch { }

   if ( file!=null &amp;&amp; file.ContentLength &gt; 0)
   {
      file.SaveAs(string.Concat(
            AppDomain.CurrentDomain.BaseDirectory,
            Path.GetFileName(file.FileName)));

      return &quot;Successfully Uploaded&quot;;
   }
   else
   {
      return &quot;Upload Failed, please try again.&quot;;
   }
}

The problem is that it's uploading the file, but no longer doing any asynchronous posts when I remove jquery.unobtrusive-ajax.js. Instead, it does a full post-back.

When I add jquery.unobtrusive-ajax.js in my view, it's doing it asynchronously, but it is not sending an upload file in the form data. No file is being sent to the server in Request.Files[].

It's not possible with Ajax for obvious reasons: you could build a page hat uploads any accessible file on the visitors filesystem to the server without telling him. — Rob
– Rob, Commented Jun 11, 2013 at 6:57

Darin Dimitrov · Accepted Answer · 2013-06-11 06:44:19Z

17

You cannot upload files using AJAX. This is not supported. If you want to do that you could either use some file upload plugin such as Uploadify or Blueimp File Upload or use the HTML 5 File API if the client browser supports it.

answered Jun 11, 2013 at 6:44

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

4 Comments

Sunny Sharma Over a year ago

thanks Darin for your reply, I'll try implementing Blueimp as Uploadify requires flash.

Sunny Sharma Over a year ago

I'm using jQuery-asyncUpload shared by steven: blog.stevensanderson.com/2008/11/24/…

Iago Rodríguez Over a year ago

@Darin Dimitrov, I don't understand your answer. As per this other StackOverflow question, file uploading is actually supported and the way to do it is given in that other answer. Can you please clear what you say up?

Murat Yıldız Over a year ago

@Darin Dimitrov Yes, could you please clarify us a little bit more regarding to this issue?

James 'Fluffy' Burton · Accepted Answer · 2014-12-18 11:50:45Z

10

You can do this without additional libraries.

I came across this little hack, which resolves it nicely

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

Found http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working

answered Dec 18, 2014 at 11:50

James 'Fluffy' Burton

1,51814 silver badges8 bronze badges

3 Comments

Martijn Pieters Over a year ago

http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working is no more; it was a scraper site copying Stack Overflow, you really found this post.

Nomi Ali Over a year ago

whoever you are I'll find you and love you!

Aswin Arshad Over a year ago

But how to implement the call back for the form ??

bradrn · Accepted Answer · 2019-05-20 09:45:36Z

1

very simple solution:

  @using (Ajax.BeginForm("action", "controller", new AjaxOptions
        {
            HttpMethod = "post",
            InsertionMode = InsertionMode.Replace,
            OnBegin = "startLoader",
            OnSuccess = "Update_Record",
            UpdateTargetId = "Succ_Msg"
        },new { enctype = "multipart/form-data" }))

notice the new { enctype = "multipart/form-data" } which tells the razor page to add the enctype that can pass HttpPostedFileBase

good luck:).

edited May 20, 2019 at 9:45

bradrn

8,5472 gold badges25 silver badges53 bronze badges

answered May 20, 2019 at 9:21

tzuk polinsky

511 silver badge2 bronze badges

2 Comments

Sunny Sharma Over a year ago

hey @tzuk, that's exactly what I've posted in question!

Craig Over a year ago

Does this technique require a particular version of .net framework? When I add , new { enctype = "multipart/form-data" } to an existing Ajax.BeginForm that has AjaxOptions, then the action loses resolution. As if it's illegal. Using Rider, if it makes a difference, and .net framework v4.7.2.

jeyhosseini · Accepted Answer · 2018-10-12 09:16:30Z

0

You can do this to get this work: get jquery.form library from nuget and import it to your cshtml file.You should create your form with @Html.BeginForm. then bottom of your form write this script to ajax-ify your form:

$(function(){
  $('#formId').ajaxForm({
    complete:function(xhr){...},
    success:function(){...},
    error: function(){...}
  });
});

With these steps you can pass a file to controller.

edited Oct 12, 2018 at 9:16

answered Oct 4, 2018 at 17:53

jeyhosseini

327 bronze badges

Collectives™ on Stack Overflow

Not able to upload file using Ajax.BeginForm() asynchronously

4 Answers 4

4 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related