Home/ Questions/Q 7894913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T07:30:53+00:00

I’m using blueimp JQuery file upload script to fancy the uploading of files. You

  • 0

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?

  • Can using this script inside another <form> be the problem?
  • Can multiple elements with the same id be the problem?
  • Can collisions between javascripts (e.g. redefining functions or objects) be the problem?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0