I have a little weird problem with Bootstrap and a file field:

For a project I'm implementing a simple upload dialog.

/

As soon as I add data-toggle="modal" to the modal container, the file input field stops reacting to clicks (and the browser won't show the file selection dialog).

I suspect this to be caused by Bootstrap's modal code/event handling. Somewhere the click event is getting lost, but I can't really figure it out.

Any ideas?

I have a little weird problem with Bootstrap and a file field:

For a project I'm implementing a simple upload dialog.

http://jsfiddle/RxxSv/4/

As soon as I add data-toggle="modal" to the modal container, the file input field stops reacting to clicks (and the browser won't show the file selection dialog).

I suspect this to be caused by Bootstrap's modal code/event handling. Somewhere the click event is getting lost, but I can't really figure it out.

Any ideas?

• javascript
• events
• file-upload
• twitter-bootstrap

2 Answers 2

I can't really explain why but if you put all the attributes that are in the documentation (in the Live Demo), the input works correctly.

<div id="modal-upload" class="modal hide fade" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

JSFiddle: http://jsfiddle/4TQvY/

My rade adviced to do it in another way:

<a class="btn btn-primary" href="#" style="margin-left: 100px" id="prefix">Choose file</a><input type="file" id="file_source" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;">

Make separate a & input and then invoke click event

    jQuery("#prefix").click(function()
    {
        console.log("INSERT JSON");
        $("#file_source").click();
        return false;
    });