Demonstration

Upload Manager

This is a demonstration of the backbone upload manager, based on Backbone.js and jQuery Upload File Basic.

Uploaded files

Here are displayed the uploaded files on the server. The list is updated each time that a file is successfully uploaded.

Backbone.TemplateManager.baseUrl = 'templates/{name}';

// Create the upload manager
var uploadManager = new Backbone.UploadManager({
    'uploadUrl': '/upload',
    'templates': {
        'main': 'upload-manager.main',
        'file': 'upload-manager.file'
    }
});

// Render it
uploadManager.renderTo($('div#manager-area'));

// On file uploaded, refresh list.
uploadManager.on('filedone', function () {
    $.get('/files').done(function(result){
        var target = $('ul#file-list').empty();
        
        $.each(result, function (index, file) {
            target.append(
                '<li>'+file.name+' ('+file.size+' bytes) '+
                '<a href="'+file.download_url+'">Downlooad<a>'+
                '</li>'
            );
        });
    });
});

Server-side

Upload Handler

There's an upload handler coming with Backbone Upload Manager. It's just a simple PHP class that handles uploads that you can find in the GitHub repository.

Note: the demonstration handler is a Symfony2 application, that you can found in the gae-handler branch of GitHub repository.

Symfony2 integration

You can simply integrate this handler by making it as a service. For instance, if you put the handler class in Acme\DemoBundle\Model\UploadHandler, your service looks like:

<service 
    id="acme.demo.upload_handler" 
    class="Acme\DemoBundle\Model\UploadHandler">
</service>

Then, in your controller, you simply have to do:

try {
    // Handle file uploads
    $files = $this->get('acme.demo.upload_handler')->handle(array(
        'root_path' => '/some/path/that/may/be/configured/as/bundle/config',
        'param_name' => 'files'
    ));
    
    return JsonResponse($files);
} catch (UploadException $e) {
    throw new HttpException(400, $e->getMessage());
}