jQuery File Upload using Requirejs

Question

I have been trying this work it out in intranet environment, so obviously there are no CDNs. Later from this article I found we need to load the 'load-image', 'tmpl' and 'canvas-to-blob' as AMD using RequireJs.

I have a main.js as follows:

(function () {
    require.config({
        baseUrl: '/Scripts',
        waitSeconds: 800,
        paths: {
            'jquery': ['/Content/jQueryFileUpload/js/jquery', 'jquery-1.10.2'],
            'jquery.ui.widget': ['/Content/jQueryFileUpload/js/vendor/jquery.ui.widget'],
            'jquery.fileupload': '/Content/jQueryFileUpload/js/jquery.fileupload',
            'jquery.fileupload-ui': '/Content/jQueryFileUpload/js/jquery.fileupload-ui',
            'jquery.fileupload-image': '/Content/jQueryFileUpload/js/jquery.fileupload-image',
            'jquery.fileupload-validate': '/Content/jQueryFileUpload/js/jquery.fileupload-validate',
            'jquery.fileupload-video': '/Content/jQueryFileUpload/js/jquery.fileupload-video',
            'jquery.fileupload-audio': '/Content/jQueryFileUpload/js/jquery.fileupload-audio',
            'jquery.fileupload-process': '/Content/jQueryFileUpload/js/jquery.fileupload-process',
            'jquery.fileupload-jquery-ui': '/Content/jQueryFileUpload/js/jquery.fileupload-jquery-ui',
            'jquery.iframe-transport': ['jquery-1.10.2', '/Content/jQueryFileUpload/js/jquery.iframe-transport'],
            'load-image': '/Content/jQueryFileUpload/js/load-image',
            'load-image-meta': '/Content/jQueryFileUpload/js/load-image-meta',
            'load-image-exif': ['/Content/jQueryFileUpload/js/load-image-meta', '/Content/jQueryFileUpload/js/load-image-exif'],
            'load-image-ios': '/Content/jQueryFileUpload/js/load-image-ios',
            'canvas-to-blob': '/Content/jQueryFileUpload/js/canvas-to-blob',
            'tmpl': '/Content/jQueryFileUpload/js/tmpl',
            'bootstrap': 'Content/bootstrap/js/bootstrap',
            'app': 'app'
        }
    });

    require(['jquery', 'app'], function ($,app) {
        $(function () {
            app.init();
        });
    });

})();

and app.js:

define(
        ['jquery', 'tmpl', 'load-image', 'canvas-to-blob', 'jquery.iframe-transport', 'jquery.fileupload-ui'], function () {
            return {
                init: function ($) {
                    alert();
                    $('#fileupload').fileupload({
                        url: '/Upload/UploadHandler.ashx',
                        add: function (e, data) {
                            console.log("add", data);
                        },
                        submit: function (e, data) {
                            console.log("submit", data);
                        },
                        change: function (e, data) {
                            console.log("change", data);
                        },
                        send: function (e, data) {
                            console.log("send", data);
                            data.url = url + "'" + data.files[0].name + "'";
                        }

                    });
                }
            }
        }
    );

There are no errors in console and nothing is logging in the console. The app.init() is not invoked and when files are selected nothing happens? Not sure what I am missing or what is wrong in my code. I have searched many forums and couldn't get through this!

Answer 1

In my site i change the line

'load-image-exif': ['/Content/jQueryFileUpload/js/load-image-meta', '/Content/jQueryFileUpload/js/load-image-exif'],

by

'load-image-exif': '/Content/jQueryFileUpload/js/load-image-exif',

and is working fine.

Answer 2

According to the documentation the request is send when submit() is called to the data object.

The default add() callback is the one's which execute the submit action. Your error is you override it without calling submit function. So just add it like :

add: function (e, data) {
    console.log("add", data);
    data.submit();
},

But you can call it somewhere else.