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

score 4 · Answer 1 · answered Aug 23 '13 at 16:19

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'
    }
});

score 1 · Answer 2 · edited May 23 '17 at 12:13

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? .

score 1 · Answer 3 · answered Aug 21 '13 at 23:08

Try mapping jquery.widget.ui to the correct path...

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

score 0 · Answer 4 · answered Oct 14 '13 at 09:16

For anyone else having this problem...this is the config that worked for us.Hope it helps someone

The paths declaration

 paths: { 

        'jquery.ui.widget': '../../Scripts/FileUpload/jqueryui/jquery.ui.widget',
        'jquery_iframe_transport': '../../Scripts/FileUpload/jquery.iframe-transport',
        'jquery.fileupload': '../../Scripts/FileUpload/jquery.fileupload'

    }

The Define statement

define(['jquery.ui.widget','jquery_iframe_transport','jquery.fileupload'])

The above is dependent on jquery being loaded. We are using Durandal hence dont need a shim but you will need to ensure jquery is loaded before anything else

The initialisation in code

function uploadFile() {


        var url = '/Backload/UploadHandler';

        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            }
        });
    }

This is the basic upload example..

jQuery file upload and RequireJS configuration

4 Answers4