Question

I can’t get uploadify (jQuery plugin) to work in IE8, it works fine in all other browsers.

When I go to upload the file I’m getting this error:

Object doesn’t support this property or method

And it’s on this line in uploadify.js:

document.getElementById(jQuery(this).attr('id') + 'Uploader').startFileUpload(ID, false);

I can’t figure it out.

The JavaScript looks like this:

<script type="text/javascript">
$(document).ready(function() {
var scriptData;

$.get('/lib/upload_params.php', {'key': "files/<?=random?>/"},
    function(data) {
        scriptData = {
            'AWSAccessKeyId': data.AWSAccessKeyId,
            'key': encodeURIComponent(data.key),
            'acl': "private",
            'policy': encodeURIComponent(data.policy),
            'signature': encodeURIComponent(encodeURIComponent(data.signature)),
            'success_action_status': "201",
            'folder':'',
            'Filename':''
        };
        //    $('#file').uploadifySettings('scriptData',scriptData);
        start_uploadify();
              },
    "json" ); 

function start_uploadify() {
    $('#file').uploadify({
        'uploader'      : 'http://domain.com/lib/uploadify/uploadify.swf',
        'script'        : 'http://cdn.domain.com',
        'multi'         : false,
        'buttonImg'     : 'http://domain.com/images/select_button.png',
        'rollover'      : true,
        'width'         : '131',
        'height'        : '40',
        'sizeLimit'     : '1073741824',
        'auto'          : false,
        'method'        : 'post',
        'scriptData'    : scriptData,  
        'scriptAccess'  : 'always',
        'wmode'         : 'transparent',
        onSelect        : function(event, queueID, fileObj) {
                            $('#send_options').show().addClass('on');
                            $('#fileUploader').css('visibility', 'hidden');
                            $('#fileQueue').css({'margin-top' : '-40px', 'visibility' : 'visible'});
                          },
        onComplete      : function(event, queueID, fileObj, response, data) {
                            //alert(fileObj.name);
                            $('#upload_progess').html("<strong>Upload complete</strong><br />We are now processing your file...");
                            $('#fn').val(fileObj.name);
                            $('#fs').val(fileObj.size);
                            $('#form_1').submit();
                           },  
        'onError'       : function(e, queueID, fileObj, errorObj){
                            //alert( dump(scriptData) );
                            if(errorObj.info == 201){
                              //$('#file'+queueID).remove();
                            } else {
                              alert(errorObj.type+' error:'+errorObj.info+'. Sorry! (try again later)');
                            }
                          },
        'folder'        : '',
        'fileDataName'  : 'file'
    });
}

$('#send').live('click', function() {
    $('#file').uploadifyUpload();
    $('#send_options').hide();
    $('#upload_progress').show();
});

$('#change_file').live('click', function() {
    $x = $('#send_options');
    $y = $('#fileUploader');
    $z = $('#fileQueue');

    if ($x.hasClass('on')) {
        $x.removeClass('on').hide();
        $y.css('visibility', 'visible');
        $z.css('visibility', 'hidden');
    } else {
        $x.addClass('on');  
    }
});

$('#method_2').delegate('', 'click', function() {
    $('.wrap_to').show();                                             
});

$('#method_1').delegate('', 'click', function() {
    $('.wrap_to').hide();                                         
});

});

Answer 1

For some reason IE doesn’t like the var name to be the same as the jQuery object name, example:

var field1 = $(‘#field1’).val();

IE doesn’t like that, so I changed var field1 to var field1a and it works.