Unable to get blueimp/jQuery.fileupload plugin to work

Question

Am trying use this jQuery plugin for cross domain image uploads jQuery.fileupload

I think the plugin uses require.js, which i have already included because i use it load javascript code for my page. The plugin doesnt seem to required that i include require.js, but when i test my page i get this error

Uncaught Error: Mismatched anonymous define() module: function ( $, undefined ) { http://requirejs.org/docs/errors.html#mismatch

Can someone please point me in the right direction

Answer 1

You don't need to use Requirejs to use jQuery File Upload.

Simply make sure you include the required files in the right order:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        // your options
    });
});
</script>

Answer 2

I am glad that I am not alone here. This issue took me hours and here is the answer for you,

This is all about the order of loading those JavaScript files. You must include the files in the following order or it won't work.

• jquery-min.js
• jquery.ui.widget.js
• jquery.iframe-transport.js
• jquery.fileupload.js
• jquery.fileupload-ip.js
• jquery.fileupload-ui.js
• require-min.js (this must be the last one to be included)