Question

I’m using Plupload to allow multiple images to be uploaded to an mvc3 web app.

the files upload OK, but when i introduce the AntiForgeryToken it doesn’t work, and the error is that no token was supplied, or it was invalid.

I also cannot get the Id parameter to be accepted as an action parameter either, it always sends null. So have to extract it myself from the Request.UrlReferrer property manually.

I figure plupload is submitting each file within the upload manually and forging its own form post.

My form….

@using (@Html.BeginForm("Upload", "Photo", new { Model.Id }, FormMethod.Post, new { id = "formUpload", enctype = "multipart/form-data" }))
 {
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.Id)
    <div id="uploader">
        <p>You browser doesn't have HTML5, Flash or basic file upload support, so you wont be able to upload any photos - sorry.</p>
    </div>
    <p id="status"></p>
 }

and the code that wires it up…

$(document).ready(function ()
{
    $("#uploader").plupload({
        // General settings
        runtimes: 'html5,flash,html4',
        url: '/Photo/Upload/',
        max_file_size: '8mb',
        //              chunk_size: '1mb',
        unique_names: true,

        // Resize images on clientside if we can
        resize: { width: 400, quality: 100 },

        // Specify what files to browse for
        filters: [
            { title: "Image files", extensions: "jpg,gif,png" }
        ],

        // Flash settings
        flash_swf_url: 'Content/plugins/plupload/js/plupload.flash.swf'
    });

    $("#uploader").bind('Error', function(up, err)
    {
        $('#status').append("<b>Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + "</b>");
    });


    // Client side form validation
    $('uploadForm').submit(function (e)
    {
        var uploader = $('#uploader').pluploadQueue();

        // Validate number of uploaded files
        if (uploader.total.uploaded == 0)
        {
            // Files in queue upload them first
            if (uploader.files.length > 0)
            {
                // When all files are uploaded submit form
                uploader.bind('UploadProgress', function ()
                {
                    if (uploader.total.uploaded == uploader.files.length)
                        $('form').submit();
                });

                uploader.start();
            } else
                alert('You must at least upload one file.');

            e.preventDefault();
        }
    });

});  

and here is the controller action that receives it…

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Upload(int? id, HttpPostedFileBase file)
{
    if (file.ContentLength > 0)
    {
        var parts = Request.UrlReferrer.AbsolutePath.Split('/');
        var theId = parts[parts.Length - 1];
        var fileName = theId + "_" + Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
        file.SaveAs(path);
    }
    return Content("Success", "text/plain");
}

As you can see, i have had to make the id parameter nullable, and i extract this manually in the action method.

How can i ensure that the values are sent with each form post correctly?

Answer 1

short answer: you can’t.

What you can do in this case is pass your token either as another multipart paramenter (if using that), or as part of the URL as a GET parameter, but nothing from the form will be sent by plupload as it builds its own request.
Another possibility is using custom headers to pass back the token to the server (plupload has a headers option), but whichever is the method you use, you will have to process it on your backend to validate it.