Multiple jQuery File Upload widgets on the same page

Question

I'm using Jquery File Upload plugin. I have tried to integrate the 3 widgets File Upload on the same page. Each widget accept a specific format: Images (png, jpg, gif), Documents (PDF, DOC) and Videos (mov, mpeg). The files will be in specific folders:

• Images -> folder '/server/php/imgs/'
• Documents -> folder '/server/php/docs/'
• Video -> '/server/php/videos/'

First, I changed id for class in form. And I put data-id that has the name of folders.

<form class="fileupload" data-id="imgs" method="POST" enctype="multipart/form-data"
    data-upload-template-id="template-upload-1"
    data-download-template-id="template-download-1">
    <!-- ... -->
</form>
<form class="fileupload" data-id="docs" method="POST" enctype="multipart/form-data"
    data-upload-template-id="template-upload-2"
    data-download-template-id="template-download-2">
    <!-- ... -->
</form>
<form class="fileupload" data-id="videos" method="POST" enctype="multipart/form-data"
    data-upload-template-id="template-upload-3"
    data-download-template-id="template-download-3">
    <!-- ... -->
</form>

In main.js file, I did this:

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('.fileupload').each(function () {

        $(this).fileupload({
            dropZone: $(this)
        });

        $(this).fileupload({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: 'server/php/'+$(this).attr('data-id')+'/'
        });

        // Load existing files:
        $(this).addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $(this).fileupload('option', 'url'),
            dataType: 'json',
            context: $(this)[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });

    });

    // Enable iframe cross-domain access via redirect option:
    $('.fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

});

And in index.php, I kept the original code:

require('UploadHandler.php');
$upload_handler = new UploadHandler();

But the code is not working! Where is the wrong? And How do I do to each one accept specific format to upload?