asp.net MVC input attribute of type file with bootstrap style casuing strange result

Question

I want to have a file-input attribute with the same style as the upload button as seen in the image below. The upload button is using bootstrap. When I apply bootstrap to button A with "TextBoxFor", I get this weird looking button. When I apply bootstrap to button B with "LabelFor", I get the desired style, only without the functionality of the file-input attribute.

My question is, how do I get a file-input field with a certain bootstrap style applied and maintain its functionality. With the same result(style) as if it was applied to a submit-type attribute. I prefer to use one of the html helpers, because I am trying to understand them.

Button A vs Button B

A:

@Html.TextBoxFor(m => m.File, new { type = "file", @class = "btn btn-default btn-file" })

B:

@Html.LabelFor(m => m.File, new { type = "file", @class = "btn btn-default btn-file" })

Upload button:

<input type="submit" class="btn btn-default" value="Upload" />

Germano Plebani · Accepted Answer · 2015-05-25 12:22:56Z

5

This is the normal aspect of an html input type file (A), and the aspect change from browser to browser. If you want to change as it appears, you have to work with some CSS hiding the real input with another fake over or something similar.

Here is a good example to do this with bootstrap 3.

answered May 25, 2015 at 12:22

Germano Plebani

3,6753 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Synctrex · Accepted Answer · 2017-01-25 15:21:19Z

This is a year old, but I just spent a while struggling with this and figured I'd share my solution. I'd be interested to hear how you resolved this!

I wrapped the razor stuff with a div that uses the form-control class, like so:

...
<div class="col-md-8">
     <div class="form-control">
          @Html.TextBoxFor(model => model.Filepath, new { type = "file", id = "filepath", accept = ".jpg, .jpeg, .gif, .png" })
          @Html.ValidationMessageFor(model => model.Filepath, "", new { @class = "text-danger", style = "font-weight: bold;" })
          <p class="help-block">
               Images must be 300x300 pixels or smaller, and in a .PNG, .JPG, or .GIF format.
          </p>
      </div>
</div>
...

However, since Bootstrap's form-control class puts a border around things by default, I had to override those.

border: none;
box-shadow: unset;

The result was pretty clean.

Collectives™ on Stack Overflow

asp.net MVC input attribute of type file with bootstrap style casuing strange result

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related