Uploadify unknown error

Question

I cant seem to get Uploadify (2.1.4) to work, In Google Chrome Inspector the console shows no errors during initialization, however, clicking on the select files button results in nothing happening and pressing the upload button results in:

Uncaught TypeError: Object #<HTMLObjectElement> has no method 'startFileUpload'

I have no Idea where to look, the weird thing is it only shows an error when any button or function is called, however the .uploadify(); is working fine.

I am using: - JQuery 1.7.1 - Twitter Bootstrap (in this case the twipsy & modal javascript files)

This is the code:

<script type="text/javascript">
$(function(){
    $("#uploadPopup").modal({
        backdrop: "static",
        keyboard: false
    });

    var uploadBox = '<div id="status-message">Select some files to upload:</div>\
                    <div id="fileQueue"></div>\
                    <input id="fileUploadSelector" type="file" name="Filedata" />';
    var uploadInProgress = false;

    $("#uploadphoto").click(function(){
        $("#uploadPopup h3").html("Video Uploader");
        $("#uploadPopup .modal-body").html(uploadBox);

        $('#fileUploadSelector').uploadify({
            'uploader': 'static/flash/uploadify/uploadify.swf',
            'script': 'www.example.com/script.php',
            'cancelImg': 'static/images/uploadify/cancel.png',
            'multi': true,
            'auto': false,
            'fileExt': '*.jpg;*.gif;*.png;*.bmp',
            'fileDesc': 'Image Files (.JPG, .GIF, .PNG, .BMP)',
            'queueID': 'fileQueue',
            'queueSizeLimit': 100,
            'simUploadLimit': 2,
            'removeCompleted': true,
            'buttonText': 'Select Files',
            'onSelectOnce': function (event, data) {
                $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
            },
            'onAllComplete': function (event, data) {
                $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
                uploadInProgress = false;
                $("#uploadMedia").button('reset');
            },
            'onClearQueue': function (event, data) {
                $('#status-message').text('Upload Cancelled');
                uploadInProgress = false;
                $("#uploadMedia").button('reset');
            }
        });

        $("#uploadPopup").modal({
            backdrop: "static",
            keyboard: false
        });
    });

    $("#uploadMedia").live('click', function(){
        $("#fileUploadSelector").uploadifyUpload();
        uploadInProgress = true;
    });

    $("#cancelUpload").live('click', function(){
        var answer = confirm("Are you sure you want to cancel the upload?");
            if(answer) {
                $("#fileUploadSelector").uploadifyClearQueue();
                $('#uploadPopup').modal('hide');
                return true;
            } else {
                return false;
            }
    });
});
</script>

And the HTML part:

<div class="btn success" id="uploadphoto">Upload Photo</div>

<div id="uploadPopup" class="modal hide">
    <div class="modal-header">
        <h3>Photo viewer</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary" id="uploadMedia" data-toggle="Uploading..">Upload</a>
        <a href="#" class="btn secondary" id="cancelUpload">Cancel</a>
    </div>
</div>

Explanation: - A user presses the #uploadphoto button and a modal appears (during this step also the uploadify initializes) - The modal contains a button (#uploadMedia) which, when pressed, starts the upload. - pressing the cancel button (#cancelUpload) cancels the upload and closes the modal

Please note this is still some prototype coding, cleanup still has to take place.

Thanks for any help in advance.

Answer 1

Uploadify fails to open file browser?

This guy had the same problem, looks like it's an issue with calling scripts across subdomains. Glad I could help!