Cant open file dialog with button inside label

Question

To hide (but retain the functionality) the ugly default input type file button for file dialog I used the following mechanism:

HTML:

    <label for="file-input">
        <i class="fa fa-edit"></i> <!-- acts as file input on click-->
    </label>
    <input type="file" id="file-input" />

CSS:

#file-input {
    display: none; //hide the file input
}

This is working expectedly: I click on the font awesome edit icon and the file dialog pops up.

However, when I use a button it stops working. I get no file dialog on clicking the button:

    <label for="file-input">
        <button type="button">Upload file</button> <!-- not working-->
    </label>
    <input type="file" id="file-input" />

Nathan · Accepted Answer · 2015-11-05T12:40:46.697

The Label represents a "caption" for an item in a user interface. The reason why your button isn't working is because a button isn't considered a valid "caption" for a "control" element because it is a "control" element. (see: https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)

If you use an image or a piece of text inside the label it will work, because that will be considered a caption (this is why your first attempt worked). If you want to create a custom button you can use some text or an image tag otherwise you'll need some javascript.

Edit: maybe this page can be of help: http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/ The javascript they use shows the user what file (s)he has selected

score -3 · Answer 2 · edited Nov 06 '15 at 19:50

-3

Just change the jQuery code and HTML tag will be as it is.

    <label for="file-input">
        <button class="upload_file" type="button">Upload file</button> <!-- not working-->
    </label>
    <input type="file" id="file-input" />

Jquery Code:

jquery("[for=file-input] .upload_file").on("click", function(){
    jQuery("#file-input").trigger("click");
})

edited Nov 06 '15 at 19:50

Nisse Engström

4,636
22
26
40

answered Nov 05 '15 at 11:30

Harsh Sanghani

1,654
1
11
32

I dont want an icon inside my button. Adding 'fa fa-edit' adds an edit icon. – Tarun Dugar Nov 05 '15 at 11:33
I am not using jquery and this is not related to javascript in any way. – Tarun Dugar Nov 05 '15 at 11:40
but there is some code of jquery on that fa-edit icon that will triger the file inbox – Harsh Sanghani Nov 05 '15 at 11:43
click doesn't mean jquery. Its an input type file. If you click on an input type file, a file dialog opens. – Tarun Dugar Nov 05 '15 at 11:44
but not click on input type file button, You clicked on that icon and that will trigger the input type file click. – Harsh Sanghani Nov 05 '15 at 11:47
Yes and that trigger happens using label's 'for' attribute. – Tarun Dugar Nov 05 '15 at 11:48
I am not using jquery in my project! – Tarun Dugar Nov 05 '15 at 12:03
then use $ instead of jQuery – Harsh Sanghani Nov 05 '15 at 12:05
This method doesn't work. You cannot programmatically click an input[type=file] element, for security reasons. – Kevin May 18 '16 at 06:40
@kevin There is not any security issue with it and we are using these option commonly. – Harsh Sanghani May 18 '16 at 06:57
If you just want to down vote then I have no issue :) – Harsh Sanghani May 18 '16 at 06:58
@HarshSanghani Triggering click simply on an input file element doesn't work in all browsers : http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input But I'm not sure about the click triggered by another click event. Please edit the answer so I can remove the downvote. – Kevin May 18 '16 at 07:07
@kevin My answer was perfect for me and many others I don't want to change it. – Harsh Sanghani May 18 '16 at 09:17

Cant open file dialog with button inside label

2 Answers2

Linked