Question

So I have ajax file upload partial (using Jquery Form plugin), it’s working perfectly, but I don’t know to update model value after file uploading

<div>
   @Html.Partial("PhotoUpload", Model.Place)
</div>

Here I’m calling partial and giving to it part of a model.

@model PlaceMap.DAL.Entities.Place
@using (Html.BeginForm("PhotoUpload", "Place", FormMethod.Post, new { @id = "photoUpload", enctype = "multipart/form-data" }))
{
    {
        @Html.ValidationSummary(true, "Image upload was unsuccessful")
        @Html.HiddenFor(m => m.Photo)                                                                                                                                                                                  
        <input type="file" id="file" name="file"/>
        <input type="submit" id="sbm" />
    }
}

This is view code of partial, accepting model and form for uploading

var options = {
    url: "/Place/PhotoUpload",
    dataType: "json",
    clearForm: true,
    resetForm: true,
    success: showResponse
};

function showResponse(responseText, statusText, xhr, $form)
{
    $('#photo').append('<img src="/Images/Places/' + responseText.Photo + '" />');
}

$('#photoUpload').submit(function ()
{
    $('#photoUpload').ajaxSubmit(options);
    return false;
});

Javascript code for plugin

    [Authorize]
    [HttpPost]
    public ActionResult PhotoUpload(string Photo, HttpPostedFileBase file)
    {
        try
        {
            using (var ms = new MemoryStream())
            {
                //some logic here
                return Json(new { Photo = filename });
            }

        }
        catch (ArgumentException)
        {

        }

        return PartialView();
    }

Controller action code. It’s returning file name, it’s going to js function “showResponse” and appending image to div. It’s all work perfectly, but I have to write file name to @Model.Photo of this partial and I don’t know how to do it. Any suggestions?

Answer 1

One possibility is to use text/plain from the server:

return Json(new { Photo = filename }, "text/plain");

and on the client manually parse:

function showResponse(responseText, statusText, xhr, $form) {
    var data = $.parseJSON(responseText);
    $('#photo').append('<img src="/Images/Places/' + data.Photo + '" />');
}

Obviously you lust remove the dataType: 'json' option for this to work.

Another possibility is to follow what’s explained in the documentation and write a custom action result which will wrap your JSON response with the <textarea> tags:

Browsers that support the XMLHttpRequest Level 2 will be able to
upload files seamlessly and even get progress updates as the upload
proceeds. For older browsers, a fallback technology is used which
involves iframes since it is not possible to upload files using the
level 1 implmenentation of the XMLHttpRequest object. This is a common
fallback technique, but it has inherent limitations. The iframe
element is used as the target of the form’s submit operation which
means that the server response is written to the iframe. This is fine
if the response type is HTML or XML, but doesn’t work as well if the
response type is script or JSON, both of which often contain
characters that need to be repesented using entity references when
found in HTML markup.

To account for the challenges of script and JSON responses when using
the iframe mode, the Form Plugin allows these responses to be embedded
in a textarea element and it is recommended that you do so for these
response types when used in conjuction with file uploads and older
browsers. Please note, however, that if there is no file input in the
form then the request uses normal XHR to submit the form (not an
iframe). This puts the burden on your server code to know when to use
a textarea and when not to. If you like, you can use the iframe option
of the plugin to force it to always use an iframe mode and then your
server can always embed the response in a textarea. But the
recommended solution is to test for the ‘X-Requested-With’ request
header. If the value of that header is ‘XMLHttpRequest’ then you know
that the form was posted via ajax.