Upload is null after adding jquery.unobtrusive-ajax.js reference

Question

If I don't refer jquery.unobtrusive-ajax.js I can get attachment on Post. If I refer it It's giving me null.

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>


@using (Ajax.BeginForm("Index", "ContactSubmission", new AjaxOptions{ InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess = "updateSuccess" },
     new { enctype = "multipart/form-data",@class = "form-horizontal", role = "form" }))
      {
               ///code here

}

[HttpPost]
public JsonResult Index(Contact contact)
{
    if (ModelState.IsValid)
    {
       if (contact != null)
       {
         string attachment = string.Empty;
         // HttpPostedFileBase Attachment
         if (contact.Attachment != null) attachment = SaveFile(contact.Attachment); 
                ......

How to handle this?

Have you accidentally referenced it twice"? Check your layout and/or bundle config — Zach Spencer, Dec 17 '13 at 20:04

score 7 · Answer 1 · answered Feb 27 '15 at 15:17

I modify the jquery.unobtrusive-ajax.js to work uploading files. First modification:

$(document).on("submit", "form[data-ext=true]", function (evt) {
        var clickInfo = $(this).data(data_click) || [],
            clickTarget = $(this).data(data_target),
            isCancel = clickTarget && clickTarget.hasClass("cancel");
        evt.preventDefault();
        if (!isCancel && !validate(this)) {
            return;
        }
        var formData;
        if (this.enctype && this.enctype === "multipart/form-data") {
            formData = new FormData(this);
        } else {
            formData = clickInfo.concat($(this).serializeArray());
        }

        asyncRequest(this, {
            url: this.action,
            type: this.method || "GET",
            data: formData
        });
    });

Second modification is in asyncRequest:

....
method = options.type.toUpperCase();
if (options.data instanceof FormData) {
    options.processData = false;
    options.contentType = false;
    options.data.append("X-Requested-With", "XMLHttpRequest");

    if (!isMethodProxySafe(method)) {
        options.type = "POST";
        options.data.append("X-HTTP-Method-Override", method);
    }
} else {
    options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

    if (!isMethodProxySafe(method)) {
        options.type = "POST";
        options.data.push({ name: "X-HTTP-Method-Override", value: method });
    }
}
...

This fix works, although I wish we could have away of implementing it without changing the the javascript library. — Dave Agaba, May 21 '17 at 07:18

score 2 · Answer 2 · answered Dec 17 '13 at 20:24

2

If you don't refer jquery.unobtrusive-ajax.js, you don't get the ajax form, but a regular HTML form. And if you do, I suppose the form works fine, but it is not possible to upload a file with it, as ajax does not allow multipart/form-data enctype.

You can use HTML 5 File API (Using files from web applications) or jQuery upload plugins.

answered Dec 17 '13 at 20:24

Zabavsky

13,340
8
54
79

Yes, I am opening partial view in jquery dialog box. post results are coming full postback. I need async to capture the results in dialog box. – James123 Dec 17 '13 at 23:17
@James123, so you need to use some jQuery upload plugins or implement your own. – Zabavsky Dec 18 '13 at 07:29

Upload is null after adding jquery.unobtrusive-ajax.js reference

2 Answers2

Linked