jQuery file upload and RequireJS configuration

Question

I'm trying to use jQuery file upload, but I'm getting stuck with the RequireJS configuration. We install our dependencies in a /ext/ folder, e.g:

/src
  /ext
    /jquery-file-upload

In my main.js I use the following config:

require.config({
    paths: {
        "ext/jquery-file-upload": "../ext/jquery-file-upload/js/jquery.fileupload"
    }
});
require([
    "ext/jquery-file-upload"
]);

But then RequireJS tries to load jquery.ui.widget.js from the root instead of as a relative file. It is located in the jquery-file-upload directory..

Does anyone know what I'm doing wrong, or does anyone know of a working RequireJS config for jQuery file upload?

Thanks,

Martijn

Answer 1

If you look at the jquery.fileupload.js file, at the top it declares its own dependencies

if (typeof define === 'function' && define.amd) {
    // Register as an anonymous AMD module:
    define([
        'jquery',
        'jquery.ui.widget'
    ], factory);

You need to edit your require.config path for the jquery.ui.widget item.

require.config({
    paths: {
        'jquery.ui.widget': 'your_path_here/jquery.ui.widget'
    }
}); 

Answer 2

If I don't mistake, your problem is that your plugin - jquery-file-upload - tries to load its dependencies by itself.

The problem is that filepaths in JS are relative to the page loading the script file, not to the file itself (Relative Paths in Javascript in an external file). This explains why your file seems to be loaded relatively to the root and not the given path.

In this case, you probably will have to manipulate a bit of the plugin code and take a look at the explanations given here concerning requireJS and dependencies loading: How do I use requireJS and jQuery together? .