0

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.

while not taking mouse on that button from top

When taking move on that button from top or left

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.

Community
  • 1
  • 1
ksg91
  • 1,279
  • 14
  • 34
  • Can you create a full example at jsfiddle.net. please? A "video" says more than one million words. – Reporter Sep 17 '12 at 08:02
  • @reporter i cannot provide full code because it is a office code and I may not have the privilege to share the whole code. I'll see if I can make a video. – ksg91 Sep 17 '12 at 08:34
  • Then replacae the offcial values with dummy values. We just interested in the html source code that the browser received. – Reporter Sep 17 '12 at 08:55

2 Answers2

1

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;

nrip
  • 131
  • 4
  • That partially solved the issue but focus is bit towards down side. I mean little part of top button still doesn't work while little part after bottom of button works! – ksg91 Sep 17 '12 at 08:51
0

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.

ksg91
  • 1,279
  • 14
  • 34