Uploading data and file via Ajax to controller not returning to Ajax?

Question

I have an MVC form which contains text data as well as a file. When I submit the form, the expected outcome is that the file is uploaded and upon success, a modal will appear and display the value returned from the controller. However, what actually occurs is that the file is uploaded, but the controller never returns the value to the ajax function. Instead, the text is displayed to the browser on a new, empty page (with the url path pointing to the controller). The ajax call being used is based upon the following post: Uploading both data and files in one form using Ajax?.

If however, the ajax call uses data: $(form).serialize(), the ajax call returns the desired values and a modal appears. However, the file is not included in the ajax call.

I would greatly appreciate any suggestions as to what needs to change in order for the form to work properly so that:

a) the file can be uploaded, and

b) a value returned to the ajax function

Thanks in advance.

Form:

@using (Html.BeginForm("Submit", "QuoteRequest", FormMethod.Post, new { id = "contactForm", enctype = "multipart/form-data" }))
{   
    @Html.LabelFor(x => x.FirstName)                       
    @Html.TextBoxFor(x => x.FirstName, new { placeholder = "Your First Name" })
    @Html.ValidationMessageFor(x => x.FirstName)          
    <input type="file" id="Artwork" class="button" name="Artwork" value="Choose File" />                       
    <input type="submit" class="button" value="Submit" />
}

Ajax:

$('#contactForm').submit(function (ev) {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this)[0].serialize(),
        success: function (result) {                        
           $('#divMsg h2').html('Thank you for contacting us.');
           $('#hdnResponseVal').val("Success");
        },
        fail: function (result) {
           alert("fail");
        }
    });
    ev.preventDefault();
});

Controller:

[HttpPost]
public ActionResult Submit(QuoteRequestModel model)
{           
    string retValue = "There was a problem submitting your request. Please try again later.";
    if (!ModelState.IsValid)
        return Content(mretValue);

    try
    {
        string folderName = model.CompanyName;
        string filename = "";
        var contentService = Services.ContentService;
        var mediaService = Services.MediaService;
        int folderId = 0; ;

        if (model.Artwork != null)
        {
            //process the file
        }
        retValue = "We'll be in touch shortly.";
    }
    catch(Exception e)
    {
        retValue = "There was a problem submitting your request. Please try again later.";
    }
    return Content(retValue);        
}

You need to use `FormData` to upload files using ajax. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Aug 26 '15 at 22:27
@Stepjen Muecke, Your comment made me realize that I had entered the ajax code incorrectly. Currently, I have 'data: $(this)[0].serialize()', but the controller never sends the response back to the ajax function. — Yehuda Gutstein, Aug 27 '15 at 02:22
Did you read the answer I marked as a duplicate? It doesn't matter if you have `$(this)[0].serialize()` or `$(this).serialize()` - it simply wont post back the file. — , Aug 27 '15 at 02:28

Uploading data and file via Ajax to controller not returning to Ajax?

0 Answers0