How to: Fix OCUpload/One-Click Upload clicking bug in IE7 & IE8 (jquery)

Posted by Cyber Valdez in Bug Fixes, How-tos, Jquery, Programming on 08 18th, 2009 | one response

Problem: Help! I’m using the OCUpload, or One Click Upload Plugin for Jquery. IE7 and IE8 is requiring me to do a double click to display the upload dialog box!

Solution: The one-click upload technique uses a trick that sets the file input’s browse button directly in front of your mouse cursor. This is misbehaving in IE7/IE8 due to how they handle CSS, this can be resolved by directly setting the cursor position through javascript instead. You can fix the problem by editting the script and updating the following lines (highlighted in bold):

Somewhere on line 87:

/** Move the input with the mouse to make sure it get clicked! */
container.mousemove(function(e){
   input.css({
       top: e.pageY-container.offset().top+’px’,
       left: e.pageX-container.offset().left-175+’px’
   });
});

Finally, we need to set the margin css property to 0, you can find it somewhere on line 63:

/** File Input */
var input = $(
       ‘<input ‘+
       ‘name=”‘+options.name+’” ‘+
       ‘type=”file” ‘+
       ‘hidefocus=”true” ‘+
     ‘/>’
).css({
     background: ‘#ffffff’,
     position: ‘relative’,
     display: ‘block’,
     marginLeft: 0+’px’,
     opacity: 0
});