Search code examples
javascripthtmlcssfile-uploadblueimp

Blueimp fileupload opens file picker when whitespace is clicked.

Working on a pre-existing project, I found that the fileupload input triggers when whitespace after the input element is clicked, extending through several tags above it, and ending, in my page, only when it gets to a pair of <li> which contain form elements. (If there is one or fewer of these list items, the problem persists to the bottom of the page.)

I have a pair of JSFiddles with the minimal examples I could construct. I'm totally baffled what's going on here.

Example with one list item, behavior continues to bottom of window: https://jsfiddle.net/e980gzry/

Example with two list items, behavior stops above the first list item: https://jsfiddle.net/o76qd639/5/

Has anyone run into this situation before, and how could I go about addressing it?

Solution

  • If you don't mind using javascript to trigger the file browser, you can do something like this using jquery:

    $(function () {
  // whenever .fileinput-button is clicked, trigger a click on the input element
  $(".fileinput-button").on('click', function (e) {
    $("#fileupload").click();
  });
});

    But if you use this directly you will need to move the input outside of .fileinput-button as well:

    <div class='box-content'>
  <span class='fileinput-button' style='color: #008fd2; border-bottom: 1px solid #e0e2e5'>
      <i class='fa fa-upload'>
        <span>
          <i class="fa fa-fa-upload"></i> Add files...
        </span>
      </i>
  </span>
  <input id='fileupload' multiple='' name='files[]' type='file'>
</div>

    And simplify the css, removing the .fileinput-button input definition:

    .fileinput-button {
  display: block;
  cursor: pointer;
}

#fileupload {
  display: none;
}

    See complete jsfiddle, tested in chrome and firefox.

    By the way, the problem you're seeing is that browsers don't like giving complete css control over input elements. So this is just a workaround for that.