15

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

jstuardo
  • 3,901
  • 14
  • 61
  • 136
  • 1
    check example. there are lot more code in html to show the progress bar and listing.. – Biswajit Maji Sep 13 '13 at 17:03
  • something like – Biswajit Maji Sep 13 '13 at 17:08
  • 1
    I have checked them all... and I copied and pasted the same HTML code as the example, but it did not work. I don't want to show the progress bar and listing at the moment.... I am just beginning with it... to show the file upload control before selecting any file. – jstuardo Sep 13 '13 at 17:08
  • any source ? where I can see your code ? – Biswajit Maji Sep 13 '13 at 17:12
  • I already told - in question there are half code. Pls dont expect it would be half functional. – Biswajit Maji Sep 13 '13 at 17:19
  • what other code are you expecting? the only missing code is the plugin code. If I need to add some other code, that is the reason why I asked the question. Please told me what code is missing. – jstuardo Sep 13 '13 at 17:32
  • and? what do I have to do to apply style for the fileupload plugin?? – jstuardo Sep 13 '13 at 23:23
  • +1 because I'm pissed off. – fotanus May 12 '14 at 22:21

1 Answers1

6

I has wrong div id. That was the problem.

Regards, Jaime

jstuardo
  • 3,901
  • 14
  • 61
  • 136