Valums File Uploader - Including ValidateAntiForgeryToken

Question

I'm trying to protect my upload controller method using the MVC ValidateAntiForgeryToken but I'm struggling to work out how to get the __RequestVerificationToken included in the post.

My action is like this:

[HttpPost, ValidateAntiForgeryToken]
public ActionResult FileUpload(HttpPostedFileBase qqfile)

Looking through the documentation for the uploader there aren't any exposed hooks that I can find that would allow me access outside the qq code to manipulate the form it generates.

Has anyone else managed to get this to work?

After editing the source file for the form creation my requests are still not passing the validation:

Request

http://localhost:54275/UserProfile/FileUpload?qqfile=266758_10150696082935268_8163320_o.jpg

Host: localhost:54275
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip, deflate
DNT: 1
X-Requested-With: XMLHttpRequest
X-File-Name: 266758_10150696082935268_8163320_o.jpg
Content-Type: application/octet-stream
X-Mime-Type: image/jpeg
Referer: http://localhost:54275/UserProfile/Edit
Content-Length: 625352
Cookie: __test=1; RememberMe=-1167340540^1#-5833880764017141030; __RequestVerificationToken=BEIHblTcEaCio_1_i6bJnSYmituqQfq9y2ge63T85w15pAhbPldPZqY8DhLTubmtmd9OLtAuJcHdmfaFHSbn1L7oAYAtxDJWdMOOzNrddhU1; DotNetOpenAuth.WebServerClient.XSRF-Session=O-l5-Hv0flYqKL27j0TGhA; .ASPXAUTH=52C5EDFB92A09FA0395676E23BE1EBBBF03D3E88EF7C81761B76C1C8EF67936C0D9FBFD730ED77B0246C49757828A7C17D0DD7644A1C50988ECFF4C3DEDF15783E5FD7C4BA97E484F9FD6460EB6A5310E27453B461E320D10E74A5F8AEE1C0A5B1367D0DB4060958B48DACB12E80AA23; TCSESSIONID=D9016B850A1BCFD6921E274467F52CEE
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Fiddler-Encoding: base64

Answer 1

I am using version 5.11.10 of FineUploader (rename of Valum's FileUploader FineUploader history mentioned) and it does contain the feature to specify a form, see Form Options

An example of a FineUpload with AntiForgeryToken validation if your form doesn't contain any other form values is to include a form with some id (testForm in below example) with the AntiForgeryToken.

@using (Html.BeginForm(MVCHelpers.Bank.Transactions.UploadFile(), FormMethod.Post, new { id = "testForm" }))
{
    @Html.AntiForgeryToken()
}

And in the FineUploader specify the form it has to send also:

<div id="fileUploadContainer"></div>
<script>
    var uploader = new qq.FineUploader({
        element: document.getElementById("fileUploadContainer"),
        ...
        form: {
            element: "testForm",
            autoUpload: true
        }
    });
</script>

This enables you to upload files in combination with [ValidateAntiForgeryToken] on your Action. You can also specify a real form if the upload is part of other form values, by specifying the id of that form. Pay attention to the autoUpload true since it's false by default when you set a form element.

Answer 2

If you look in the source code it looks like you could add the antiforgery token code to the _createForm: function(iframe, params){...} portion of the uploader and be good to go. See the two answers here for more help.