cloudinary jquery image upload

Question

I am trying to use cloudinary to upload images directly to cloud server using jQuery. I have followed this example. Here is my code :

jQueries included :

1. jquery.ui.widget.js
2. jquery.iframe-transport.js
3. jquery.fileupload.js
4. jquery.cloudinary.js
5. jquery.min.js

I am getting TypeError: $.cloudinary is undefined ERROR. I am new to cloudinary and stackoverflow

function uploadSignature(){

        var cloud_name = 'myCloudName';
        var preset_name = 'myPresetName';

        if (cloud_name != '' && preset_name != '') $('#message').remove();

        $.cloudinary.config({ cloud_name: cloud_name, api_key: '874837483274837'})

        $('.upload_field').unsigned_cloudinary_upload(preset_name, {
          cloud_name: cloud_name
        }, {
          multiple: true
        }).bind('cloudinarydone', function(e, data) {

            $('.thumbnails').append($.cloudinary.image(data.result.public_id, {
              format: 'jpg',
              width: 150,
              height: 100,
              crop: 'thumb',
              gravity: 'face',
              effect: 'sharpen:300'
            }))
          }

        ).bind('cloudinaryprogress', function(e, data) {
            var percent = Math.round((data.loaded * 100.0) / data.total);
          $('.progress_bar').css('width', percent + '%');
          $('.progress_wrapper .text').text(percent + '%');
        });