jQuery File Upload plugin does not work

Question

I am trying to use jQuery File Upload plugin in my site but at the moment it has been impossible, and the documentation is the worst I have ever seen. The only things I can see are some demos files with a lot of lines of code without any kind of explanation.

I have tried to use it in my site, with the CSS and JS files included in the demos, but the file upload plugin is not rendered as it should.

After some research, I have found that _renderUpload method of jquery.fileupload-jquery-ui.js is never called. Neither do _create method of the same file.Those methods are the responsible to add the CSS classes so that the file upload could look better.

This is the HTML code I have:

<div class="fileupload-buttonbar">
    <div class="fileupload-buttons">
        <span class="fileinput-button">
            <span>Agregar archivo...</span>
            <input type="file" name="files[]">
        </span>
        <button type="submit" class="start">Importar</button>
    </div>
    <div class="fileupload-progress fade" style="display:none">
        <!-- The global progress bar -->
        <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
        <!-- The extended global progress information -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>              
<table role="presentation"><tbody class="files"></tbody></table>

And this is the initialization:

$(function () {
            $('#fileupload').fileupload({
                url: '@Url.Action("Import")',
                disableImageResize: false,
                maxFileSize: 30000,
                acceptFileTypes: /(\.|\/)(csv|txt|xls|xlsx)$/i,
                singleFileUploads: true,
                autoUpload: false,
                maxNumberOfFiles: 1,
                change: function (e, data) {
                    alert(data.files.length);
                    $.each(data.files, function (index, file) {
                        $('#import_file').text(file.name);
                        $('button#import').attr('style', 'display: ');
                        $('span#status').text('');
                    });
                },
                add: function (e, data) {
                    alert(data.files);
                    data.context = $('button#import')
                        .click(function () {
                            data.context = $('span#status').text('Importando...');
                            $('button#import').attr('style', 'display: none');
                            data.submit();
                        });
                },
                done: function (e, data) {
                    data.context.text('Completo.');
                    $("#administradores").trigger("reloadGrid", [{ page: 1 }]);
                }
            });

                $('#fileupload').addClass('fileupload-processing');
}

And finally, I told that I am including the following CSS file: jquery.fileupload-ui.css

And this is the JS files in this order:

• jquery.ui.widget.js
• jquery.iframe-transport.js
• jquery.fileupload.js
• jquery.fileupload-process.js
• jquery.fileupload-validate.js
• jquery.fileupload-ui.js
• jquery.fileupload-jquery-ui.js

Any help will be greatly appreciated

Thanks Jaime

Answer 1

I has wrong div id. That was the problem.

Regards, Jaime