Input Type File Not Working In Bootstrap Modal

Question

This is incredibly odd. I have a basic Bootstrap modal with no fancy stuff going on and input type=file is not working inside of it. When you click it, nothing happens. If the file input is moved outside of the modal and onto the page, then no issues.

Here's the modal code for reference:

<div id="addImageModal" class="modal hide fade" data-toggle="modal">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    x
  </button>
  <h4>Add Drawing Image</h4>
</div>
<div class="modal-body">
  <div class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="inputDisplayName">Display Name</label>
      <div class="controls">
        <input id="inputDisplayName" type="text" placeholder="">
      </div>
    </div>
    <div class="control-group">
      <div id="previewImage"></div>
    </div>
    <div class="control-group">
      <input type="file" name="files[]" multiple="">
    </div>
  </div>
</div>
<div class="modal-footer">
  <a href="#" data-dismiss="modal" class="btn">Cancel</a>
  <a href="#" class="btn btn-primary btnUploadImage">Upload</a>
</div>
</div>

Really strange issue. Any ideas?

EDIT: It is Bootstrap 2.3.1 and I've tried setting z-index on the input for the fun of it and it made no difference.

Answer 1

Remove data-toggle="modal" from your container div.

This attribute should only be in the button or a tag used to launch the modal.

Answer 2

I know this question is really old but I thought I should share the fact that also the triggering button and modal markup cannot be contained within the same div either. The modal markup must be outside of the div that contains the triggering button. I searched a very long time for someone to have dealt with this issue, so thanks for posting it, as it helped me to realize this other aspect to the issue.