CODEWITHSUNDEEP
javascriptjqueryfile-upload
MC Emperor
MC Emperor

Reputation: 23037

Any ideas why my blueimp jQuery file upload script is not working?

I'm using blueimp JQuery file upload script to fancy the uploading of files. You can download it here: https://github.com/blueimp/jQuery-File-Upload/zipball/master (ZIP).

Here is a snippet of the JavaScript code:

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
    // Dirs
    url: 'accesspoint/upload.php',
    uploadDir: 'accesspoint/files/',
    thumbnailsDir: '',

    // Options
    autoUpload: 1,
    maxNumberOfFiles: 1,
    limitConcurrentUploads: 1,
    maxFileSize: 1000000,
    });

    // Load existing files:
    $.getJSON($('#fileupload form').prop('action'), function (files) {
        var fu = $('#fileupload').data('fileupload');
        fu._adjustMaxNumberOfFiles(-files.length);
        fu._renderDownload(files)
            .appendTo($('#fileupload .files'))
            .fadeIn(function () {
                // Fix for IE7 and lower:
                $(this).show();
            });
    });

    // Open download dialogs via iframes,
    // to prevent aborting current uploads:
    $('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
        e.preventDefault();
        $('<iframe style="display:none;"></iframe>')
            .prop('src', this.href)
            .appendTo('body');
    });
});

Now take a look at http://www.mcemperor.nl/test/appstest/blueimpjqueryfileupload/example/. We can upload a file, and it works. Now if I upload a file which is larger than the maximum file size defined in the JavaScript snippet above, then you'll see something like this. File upload like it's supposed to.

Perfect, works as expected. (Note that I have set the maximum upload size to 1000000 bytes, so if you upload a file of 1 MB, it states the file is too big.)

But... Now when I paste the same script (with some small modifications) as a module into a framework of some kind, the script won't work properly; I get this: File upload that is not the idea...

As you can see, The 'delete entry' icon is smaller (it's supposed to be square) and nothing happens when I click on it.

I do not have any clue what can be the problem. Does anyone have ideas?

Upvotes: 0

Views: 6678

Answers (1)

bgmCoder
bgmCoder

Reputation: 6370

I am not sure how to fix the scripts, but maybe a workaround would be to locate the element using FireBug and patch it with a css entry or a jquery function. Also, you might take a look at jquery.fileupload-ui.css which is the css file responsible for overriding jqueryUI elements for the control. I do know that the buttons are styleable independently. Again, I am not for certain, but there may be a class added via script to change the icon on the delete button.

Upvotes: 1

Related Questions