Laravel 4 TokenMissMatchException with Plupload

Question

I'm trying to upload files with Plupload but I always get TokenMissMatchException.

// Route
Route::post("/posts/gallery", "PostsController@uploadGallery");
// Controller action
    public function uploadGallery(){
        $file = Input::file('file');
        $destinationPath = public_path() . '/imgs';
        $extension = $file->getClientOriginalExtension();
        $filename = "post-" . str_random(12) . "." . $extension;

        $inFile = $file->getRealPath();
        $outFile = public_path() . "/imgs/" . $filename;

        $image = new Imagick($inFile);
        $image->thumbnailImage(550, 0);
        if($image->writeImage($outFile)){
            return Response::json(["response" => "ok", "img" => $filename]);
        }else{
            return Response::json(["response" => "error"]);
        }
    }

This is my attempt to fix this. I tried to add _token to request but it's not picking it up:

$("#uploader").pluploadQueue({
            runtimes : 'html5,flash,silverlight,html4',
            url : "{{ URL::action('PostsController@uploadGallery') }}",
            chunk_size: '1mb',
            rename : true,
            dragdrop: true,

            filters : {
                max_file_size : '3mb',
                mime_types: [
                    {title : "Image files", extensions : "jpg,gif,png"},
                ]
            },
            resize : {width : 320, height : 240, quality : 90},
            flash_swf_url : "<?php echo public_path() . '/js/Moxie.swf'; ?>",
            silverlight_xap_url : "<?php echo public_path() . '/js/Moxie.xap'; ?>",
            prevent_duplicates: true,
            multipart_params : {
                "_token" : $("[name=_token]").val()
            }
        });

In filters.php I have this:

Route::filter('csrf', function() {
    $token = Request::ajax() ? Request::header('x-csrf-token') : Input::get('_token');
    if (Session::token() != $token){
        throw new Illuminate\Session\TokenMismatchException;
    }
});

Can someone help me with this?

UPDATE:

Html form for uploading files:

<div class="imageGallery">
    {{ Form::open() }}
        <div id="uploader">
            <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
        </div>
    {{ Form::close() }}
</div>

// hidden input field

<input type="hidden" value="VJRUpvq92oYxCsNHVBi5TqqkU6I6CQayay6x7L0m" name="_token">

Answer 1

If the upload is being done via ajax, your csrf filter is expecting the token to be in the 'x-csrf-token' header, not the input.

Instead of adding the token to the multipart_params, try adding it to the headers:

$("#uploader").pluploadQueue({
    runtimes : 'html5,flash,silverlight,html4',
    url : "{{ URL::action('PostsController@uploadGallery') }}",
    chunk_size: '1mb',
    rename : true,
    dragdrop: true,
    filters : {
        max_file_size : '3mb',
        mime_types: [
            {title : "Image files", extensions : "jpg,gif,png"},
        ]
    },
    resize : {width : 320, height : 240, quality : 90},
    flash_swf_url : "<?php echo public_path() . '/js/Moxie.swf'; ?>",
    silverlight_xap_url : "<?php echo public_path() . '/js/Moxie.xap'; ?>",
    prevent_duplicates: true,
    headers: {
        "x-csrf-token" : $("[name=_token]").val()
    }
});

Edit

In addition to the above change, it was determined that the javascript was not finding the _token input element to get the value. The solution to that issue was to add quotes around the value in the CSS attribute selector.

The javascript that ended up working:

$("input[name='_token']").val()

The CSS3 docs regarding attribute selectors can be found here. Although some browsers work without the quotes, the examples they provide show the selector values being quoted.