CODEWITHSUNDEEP
requirejsjquery-file-upload
Martijn
Martijn

Reputation: 5611

jQuery file upload and RequireJS configuration

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

Upvotes: 3

Views: 3849

Answers (4)

shai
shai

Reputation: 111

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

Upvotes: 0

choniball
choniball

Reputation: 41

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

Upvotes: 4

mundizzle
mundizzle

Reputation: 31

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"
]);

Upvotes: 1

saeraphin
saeraphin

Reputation: 435

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

Upvotes: 1

Related Questions