Upload Button created with AjaxUpload behaves strange

Question

question is bit different than other questions regarding this. I had a similar issue as jQuery AjaxUpload, have to click button twice? but I managed to fix it with my workaround. Button comes perfectly. But now issue is, when I click that button after dragging my mouse when coming from top or the left of the button, it doesn't work, but if i drag my mouse from other side, it works fine. In short, when coming from top to that button, button gets hovered, not the hidden file selector created by ajax upload.

In first image, I took mouse pointer from side of the button and i get option to choose file. But as shown in other image, I took mouse pointer from top of the button and button is hovered.

Here is my button code:

<input type="button" value="Upload Image" class="imgUploadBtn" />

My JS snippet:

function uploadAndGetImgUrl(tsource,status) {
    new AjaxUpload(tsource,{
        action: 'imageUpload.php',
        name: 'uploadfile',
        data: {},
        onSubmit: function(file, ext){
                if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
                    status.text('Only Images are Allowed');
                    return false;
                }
                status.text('Uploading...');
        },
        onComplete: function(file, response){
            //On completion clear the status
            status.text('');
            $('#idSpclImgLink').val(response);
            $('#idImgLink').val(response);
        }
    });
}

$(document).live("imgAttach",function() {
    alert("Want something Added");
    uploadAndGetImgUrl($('.imgUploadBtn'),$('#idStatus'));
});

I checked ajaxupload.3.5.js but and found it does some process while hovering and uses left and top offsets to retain hover effect. But I couldn't fix a fix yet for that. Any idea why is this happening?

PS: I use chrome. I also checked in Firefox and same behavior.

Answer 1

Not exactly an solution to general problem but for my case, I simply changed 2 lines and works for my scenario.

Change line number 368 and 369 to

if ((c.x >= box.left-5) && (c.x <= box.right) && 
        (c.y >= box.top-10) && (c.y <= box.bottom)){    

It will apparently work.

Answer 2

open the plugin file for ajaxupload..

in the function where the mousemove event handler is being defined, find the comment: // mouse left the button

Update the next line to over = true;