CODEWITHSUNDEEP
jqueryformscssfirefoxupload
Chris S.
Chris S.

Reputation: 1257

jQuery: Firefox doesn't show file select dialog on certain input[type=file] elements

Summary:

I have several input[type=file]elements all across my web app, that do work well. Well, 99% of them work just fine, but just now, I ran into a case, where Firefox does not show the file select dialog when I click on said element. I do not note any significant difference to the other circumstances, where it does work. There's no non-clickable element over it, you even see firefoxes own button-pushed effect when clicking the element.

To make this clear, there's no "simulated click". I'm aware this does not work at all, for security reasons. The upload elements are encapsulated in overflow:hidden;-Divs, overlaying the entire content having a higher z-index and the size of the container. You do definately click the button and this worked everywhere I used this technique.

Just not in the following circumstance, and I can't seem to find the reason since 2 days. Sorry for the inline CSS, I'll move that over into classes when the problem itself is solved.

Any hint that leads me to the cause of this problem would be greatly appreciated.

Uploader payload injector:

function _initThumbUploader()
{
// (1)
$iframe = $("<iframe />").attr(
{
    "name":     "thumb_uploader_target",
    "id":       "thumb_uploader_target",
    "class":    "upload_iframe_target"
}).css(
{
    "width":    "1px",
    "height":   "1px",
    "opacity":  "0",
    "display":  "block",
    "border":   "0px none"
});

// (2)
$uploadform = $("<form />").attr(
{
    "id":       "thumb_uploader_src",
    "method":   "post",
    "enctype":  "multipart/form-data",
    "name":     "thumb_uploader_src",
    "target":   "thumb_uploader_target",
    "action":   "/database/uploadproductpic"    
}).css(
{
    "position": "absolute",
    "left":     "0px",
    "top":      "0px",
    "opacity":  "1"
});

// (3)
$fileinput = $("<input />").attr(
{
    "class":    "upload_triggers",
    "type":     "file",
    "name":     "upthumb",
    "size":     "1",
    "accept":   "image/*"
}).css(
{
    "left":         "0px",
    "margin-left":  "-500px",
    "z-index":      "100005",
    "font-size":    "128pt",
    "position":     "absolute",
    "top":          "0px",
    "width":        "600px",
    "height":       "340px",
    "opacity":      "0",
    "cursor":       "pointer"
});

// 4
$appinput = $("<input />").attr(
{
    "name":     "app",
    "type":     "hidden",
    "value":    "products"
});

// 5
$idinput = $("<input />").attr(
{
    "name":     "productid",
    "type":     "hidden",
    "value":    "-1"
});

// Append 3, 4, 5 to 2
$uploadform.append($fileinput);
$uploadform.append($appinput);
$uploadform.append($idinput);

// Append everything to the uploader box
$(".thumbUploader").append($iframe).append($uploadform);

// Install onchange trigger
// TODO

}

Upvotes: 1

Views: 1178

Answers (2)

Geoff Kendall
Geoff Kendall

Reputation: 1415

I think the problem might be due to a recent reconfiguring of the input [type="file"] in FF22 and 23, and it's unrelated to jQuery. The FF devs have decided to do without the input boxes and now display a simple text message beside the Browse... button. I can't see what it is they are trying to fix with this, but it is now a problem when your form has a dark background - if your font colour works against a standard/default white form input background-color, it may become invisible (or appear 'broken', because it is low-contrast) when used for text outside the box. Potentially, this might leave us needing to target this kind of input with a rule for just the recent versions of this browser, but an easier solution is to define the background-color for all inputs, even if that's the default white:

input {background-color: #FFF}

in your CSS. I've proposed that this should now become part of normalise.css, but I'm really hoping that the FF devs put a BG of white in as default - that'll make the text visible, at least. Much better still, revert to as was - it wasn't broken!

Upvotes: 2

Chris S.
Chris S.

Reputation: 1257

Problem solved:

One of the parent nodes of said input field (see DOM Tree):

html > body > div#coreApp >*(div#productpage)*> div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input

had the following jQuery click event assigned:

/* ... */
$elem.click(function(e){
    if (e.target !== this) { return false; }
    /* ... */
}
/* ... */

This caused firefox to not react on the file input anymore.

I'll leave this here in case anyone else is running into this problem as it took me 3 days to reverse.

Thanks everyone for your time, especially a big thanks to @roasted

Upvotes: 0

Related Questions