plupload - upload button works only if click is triggered programatically

Question

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.

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 ? — jbl
– jbl, Commented Jun 20, 2014 at 15:39
@jbl: I see it on screen during initialization. It is shown in popup, but popup is visible. I even added button in popup to init plupload, instead of automatic mechanism. But I can't be sure how browser calculates it. — LukLed
– LukLed, Commented Jun 21, 2014 at 7:33

Vigor · Accepted Answer · 2015-11-10 12:34:06Z

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
});

Collectives™ on Stack Overflow

plupload - upload button works only if click is triggered programatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related