Geek asks and answers

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

I am going to use the base version of the Blueimp jQuery-File-Upload library to upload files. In the PHP structure, this Javascript library is based on the execution of the PHP class "index.php", which is placed in the "server / php" directory. As shown on the page , the action should point to this directory.

If you use this library in the annex the Symfony2 , , where he placed the catalog "server /? Php" ? Which way should i use ? In practice, how to do it?

PS: I know that there is a Symfony2 suite, such as the "symfony2-file-uploader-bundle" Punkave, but there is something in the tutorial that I skipped, and I don’t want to repeat the Symfony2 forms -

+5
source share
1 answer

I would put the contents of the jquery plugin in web/bundles/<your bundle name>/js/jquery-file-upload. And then I set up a script (check the Options the config), to search for the file index.php at /bundles/<your bundle name>/js/jquery-file-upload/server/php/index.php.

Of course, you will need to modify this index.php file to check if the user is logged in and has rights.

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>
+6
source

More articles:


All Articles