CODEWITHSUNDEEP
javascriptjqueryplupload
LukLed
LukLed

Reputation: 31842

plupload - upload button works only if click is triggered programatically

I am using plupload 1.5.7. I have two buttons on page:

buttons

First one (Add new attachment) was used as browse_button in plupload configuration. When I click it, it doesn't work. Click event is executed, but file browser is not opened. But there is second button (Trigger add new attachment click), which only does this:

$('#TriggerAddNewAttachmentClickButton').click(function() {
    $("#AddNewAttachmentButton").click();
})

So it only triggers click of the first button. It works fine. Clicking it opens file browser.

How is this possible? This behavior is consistent between Firefox, Chrome and Internet Explorer.

Obviously this is security related, because plupload uses tricks to hide input, but second method is not safer. I can't reproduce this issue in jsfiddle, it exists only in specific context, but maybe there is someone, who ecountered similar behaviour.

Upvotes: 1

Views: 1207

Answers (1)

Vigor
Vigor

Reputation: 1754

I got a similar issue with plupload. I digged into this issue for hours, and finally I find the reason. As @jbl said:

I guess I remember I had this kind of problem when the container was not visible upon plupload initialization. Could it be the same problem ?

The way of plupload working is as following:

Remember you need to set a browse_button? Actually the plupload will create an input[type="file"] for each browse_button. In normal situation, the size and position of the input[type="file"] will be the same with the browse_button exactly. So when you click the browse_button, it's not the button trigger a file chooser dialog popping up, it's the input[type="file"].

But when you set the browse_button container something like: display:none(we say, inactive), and after that even you set back the display:block(we say, active), the width and height of the input[type="file"]'s parent container would be zero some time.

My quick fix solution for this issue is as following:

I measure the position and size of the browse_button when change the state of the container from inactive to active. Then I'll manually set the position and size to the hidden input[type="file"];

Following is some sample code:

var $btn = $currPanel.find(".browse_button");
var w = $btn.outerWidth();
var h = $btn.outerHeight();
var position = $btn.position();
var $hiddenInputDiv = $currPanel.find(".moxie-shim");
$hiddenInputDiv.height(h);
$hiddenInputDiv.width(w);
$hiddenInputDiv.css(
{
    top: $btn.css("margin-top"),
    left: position.left
});

Upvotes: 2

Related Questions