Question

I’m going to use the basic version of the Blueimp jQuery-File-Upload library for file upload.
In a PHP framework, this Javascript library relies on the execution of the PHP class “index.php” which is placed in “server/php” directory. As shown in the tutorial page, the “action” has to point to that directory.

When using this library in a Symfony2 application, where should “server/php” directory be placed? Which path should I use?
In practice how to let it works?

PS: I know there is some Symfony2 bundle like Punkave’s “symfony2-file-uploader-bundle”, but there is something in the tutorial I’m missing and I wish not to recurr to Symfony2 forms-

Answer 1

I would place the jquery plugin contents into web/bundles/<your bundle name>/js/jquery-file-upload. And then I would configure the script (check Options config) to look for the index.php file at: /bundles/<your bundle name>/js/jquery-file-upload/server/php/index.php.

Of course, you’ll have to modify that index.php file to check if the user is logged in and if he has the right permissions.

As an example, this is what I did in a test environment:

I added this action to the controller:

/**
 * @Route("/test/jquery-file-upload")
 * @Template("<your bundle name>:Default:test-jquery-file-upload.html.twig")
 */
public function testJqueryFileUploadAction()
{
    return array();
}

And I created this template:

<input id="fileupload" type="file" name="files[]" data-url="{{ asset('bundles/<your bundle name>/jquery-file-upload/server/php/index.php') }}" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="{{ asset('bundles/<your bundle name>/jquery-file-upload/js/vendor/jquery.ui.widget.js') }}"></script>
<script src="{{ asset('bundles/<your bundle name>/jquery-file-upload/js/jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('bundles/<your bundle name>/jquery-file-upload/js/jquery.fileupload.js') }}"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>