how to add jquery-fileupload plugin in Durandal

[Vijay Sherekar]

Hi Team,

I am using the Durandal 2.0, have to implement File upload functionality. iQuery plugin i have used is https://github.com/blueimp/JQuery-File-Upload. I am not able to reference the jquery-file upload dependencies in durandal viewModel. I am using the attached() function to attached file Upload event.  

[Robert Greyling]

I usually put the jQuery stuff in compositionComplete() - does that work?

On Mon, Dec 15, 2014 at 1:04 PM, Vijay Sherekar <vijays...@gmail.com> wrote:

Hi Team,

I am using the Durandal 2.0, have to implement File upload functionality. iQuery plugin i have used is https://github.com/blueimp/JQuery-File-Upload. I am not able to reference the jquery-file upload dependencies in durandal viewModel. I am using the attached() function to attached file Upload event.  

--
You received this message because you are subscribed to the Google Groups "DurandalJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to durandaljs+...@googlegroups.com.
Visit this group at http://groups.google.com/group/durandaljs.
To view this discussion on the web visit https://groups.google.com/d/msgid/durandaljs/d4fb1770-d137-48c2-9e04-ed409de46183%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Vijay Sherekar]

Hi Robert,

I tried using compositionComplete() still it is showing the same error. I have to provide references for jQuery file upload plugin in viewmodel. Consider dependency jquery.fileupload.js which has fileUpload() method. How can i use methods defined in that dependency file. When i add those dependency files in index.html and attached the method to the file upload control on my view. It throws error "undefined is not a function"  

[Bart Breen]

Hi Vijay,

I use the same plugin on my site, it was a bit of a nightmare to get going, but in the end the way i got it to work was to have each of the fileupload modules as its own path in my requirejs.config (in my main.js), like so:

...

        'jquery.ui.widget': '../Scripts/fileupload/js/vendor/jquery.ui.widget',

        'jquery_iframe_transport': '../Scripts/fileupload/js/jquery.iframe-transport',

        'jquery.fileupload': '../Scripts/fileupload/js/jquery.fileupload',

        'jquery.fileupload-image': '../Scripts/fileupload/js/jquery.fileupload-image',

        'jquery.fileupload-audio': '../Scripts/fileupload/js/jquery.fileupload-audio',

        'jquery.fileupload-video': '../Scripts/fileupload/js/jquery.fileupload-video',

        'jquery.fileupload-validate': '../Scripts/fileupload/js/jquery.fileupload-validate',

        'jquery.fileupload-process': '../Scripts/fileupload/js/jquery.fileupload-process',

        'jquery.fileupload-fp': '../Scripts/fileupload/js/jquery.fileupload-fp',

        'jquery.fileupload-ui': '../Scripts/fileupload/js/jquery.fileupload-ui',

...

i could then require it with: 'jquery.fileupload'

[Vijay Sherekar]

Hi Bart,

Thanks for your reply, I have completed file upload functionality by using  plugin https://github.com/blueimp/JQuery-File-Upload in durandal. Real problem was i had to add the dependency files of jquery-file upload that i have added by requirejs shim concept which helps to add non AMD files in our application. I will write a blog on uploading the file with jquery plugin in durandal.

[Vijay Sherekar]

Hi Team,

I have written a blog on file upload functionality on the below url

http://vijaysherekar.wordpress.com/2014/12/17/how-to-use-third-party-jquery-plug-ins-in-durandaljs/

[Bart Breen]

Hi Vijay, this should not have been necessary as all the fileupload modules use define if it is available. Just look in jquery.fileupload.js and you will see:

if (typeof define === 'function' && define.amd) {

        // Register as an anonymous AMD module:

        define([

            'jquery',

            'jquery.ui.widget'

        ], factory);

    }

In the end, as long as it works that's good enough