Bootstrap form upload file layout

Question

I'm creating a form for my MVC Web application using Bootstrap 3. I'm having some trouble correctly aligning my file input fields. I used this resource to create them.

My form currently looks like this.

I'd like to align the text field which shows the filename with the rest of my fields. This is how the code looks:

<form>
<fieldset>
...

        <div class="form-group">
            <label for="inputDeliveryDate" class="col-lg-2 control-label">Delivery date</label>
            <div class="col-lg-10">
                <input type="date" class="form-control" id="inputDeliveryDate">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-2 control-label">Attachment</label>
                <div class="col-lg-10">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <span class=" btn btn-info btn-file">
                                Browse<input type="file" name="data" id="data">
                            </span>
                        </span>
                        <input type="text" id="uploadFile" class="form-control small" readonly />
                    </div>
                </div>
            </div>

        <div class="form-group">
            <label for="inputComment" class="col-lg-2 control-label">Comment</label>
            <div class="col-lg-10">
                <textarea class="form-control" rows="5" id="inputComment"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-10 col-lg-offset-2">
                <button type="submit" class="btn btn-success">Submit</button>
            </div>
        </div>
</fieldset>
</form>

I tried wrapping the input fields in a col-xs-4 div but that doesn't seem to work.

Answer 1

FileUpload is the hard HTML element to change, specially if you use a CSS framework. There are some solutions to change the style of this element like one that you have mentioned in your question or http://www.quirksmode.org/dom/inputfile.html that are mostly based on CSS.

My solution involves in some Javascript / jquery programming; it has worked for me before and I hope it will work for you.

In this solution, we make a fake FileUpload element that consists of a button and a input textbox. It has also a real FileUpload element that is not shown in the form. Then in the javascript code we handle the click event of fake elements and send it to real FileUpload element.

In the solution we are free to design the fake element whatever we want; for instance, putting the browse button in the right side.

    $('#exampleFakeBrowseFile1, #exampleFakeFile1').on('click', function() {
      $('#exampleFile1').trigger("click");
    });
    $('#exampleFile1').change(function() {
      var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
      $('#exampleFakeFile1').val(file_name);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="form-group">
      <label for="exampleFakeFile1">File</label>

      <div class="input-group">
        <input type="file" id="exampleFile1" name="exampleFile1" style="display: none">
        <input type="text" class="form-control" id="exampleFakeFile1" readonly>
        <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="exampleFakeBrowseFile1">Browse...</button>
                </span>
      </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>