Symfony2 and Blueimp jQuery-File-Upload: where to set the "server/php" directory

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-

adosaiguas · Accepted Answer · 2012-08-27 14:52:23Z

6

+50

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>

edited Aug 27, 2012 at 14:52

answered Aug 27, 2012 at 11:50

adosaiguas

1,3309 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JeanValjean Over a year ago

You said "I would configure the script to look for the index.php file at: web/bundles//js/jquery-file-upload/server/php/index.php.". However there is no reference to path server/php in the js library. Isn't it?

adosaiguas Over a year ago

I Have edited the answer as the paths weren't rendered as I wrote them and added a link to the plugin options documentation. You can set the path to the index.php file via the url option of the jquery plugin.

adosaiguas Over a year ago

Another possible way is to create a Symfony 2 field class that uses this plugin, so that you can easily use it in any form. But I understood from your question that you don't want to go that way.

JeanValjean Over a year ago

Did you tried the solution that you are proposing? The script I should configure I guess is the Javascript code in the webpage (a twig template in my case). As you are proposing, it should point to the index.php class and everything should work. However, it doesn't! I also guess that checking if the user is logged is not a requirement (apart from security considerations).

JeanValjean Over a year ago

Well. It works perfectly. It worked also with your first answer. Simply it doesn't work in my pages, it works in a new project. Maybe some of my Javascript library has a conflict with the Blueimp). Thank you so much for your helpful answer.

Collectives™ on Stack Overflow

Symfony2 and Blueimp jQuery-File-Upload: where to set the "server/php" directory

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related