building a photo uploader using the jquery-file-upload plugin and custom ajax

Question

I'm building a photo upload form and have decided to use the jQuery plugin jquery-file-upload but have come across some issues... and questions.

First, the code I'm using (going with the basic version):

// File upload function
jQuery(function() {

    jQuery('#pick-photos').click(function(){

        jQuery('#file-upload').click();
    });

    // Initialize the jQuery File Upload plugin
    jQuery('#photo-upload').fileupload({

        dataType: 'json',
        add: function (e, data) {

            jQuery.each(data.result.files, function (index, file) {
            jQuery('<p/>').text(file.name).appendTo(document.body);
        });

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            jQuery('#upload').click(function() {

                data.submit();
            });         
        },

        progressall: function(e, data) {

            // Calculated the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            jQuery('#upload-progress .progress-bar').css(

                'width',
                progress + '%'
           );
        },

    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {

        if (typeof bytes !== 'number') {

            return '';
        }

        if (bytes >= 1000000000) {

            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {

        return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

The issue I'm facing is an error Uncaught TypeError: Object [object Object] has no method 'fileupload' on this line of code jQuery('#photo-upload').fileupload({

Secondly, I'm wondering how to include custom ajax in this code... so that I can change the page content based on success or error.

Any help is greatfully accepted!

Answer 1

In order to execute some code on success or on error (or both), the jquery-file-upload provides some callback :

• done (equivalent of success)
• fail (equivalent of error)
• always (equivalent of complete)

Each of these callbacks have same parameters than the add callback's one.

The basic version wiki gives an example :

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

---

For your issue do you include these files?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>