Bootstrap fileupload button stacked beneath default html form button

Question

As shown in the picture below I have bootstrap beneath the standard html form file upload button. How can I remove the standard button and the text. So that it's only the bootstrap button and my own text?

The text is in danish, but it's the "no file has been chosen"

I use ModelForm to display the form field.

html:

<label class="btn btn-primary btn-file">
    {{ field }}
</label>

ModelForm:

widgets = {
    'image': forms.FileInput(attrs={'class' : 'add-image-upload-hidden'}),
}

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

Posible duplicate question

Use Bootstrap FileStyle:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Changes the button text. Type: String, Default: "Choose file"

Via JavaScript:

$(":file").filestyle({buttonText: "Find file"});

Via data attributes:

<input type="file" class="filestyle" data-buttonText="Find file">

edited May 23 '17 at 10:29

Community

1
1

answered Mar 02 '17 at 02:51

alfredo138923

1,509
1
15
15

score 0 · Answer 2 · answered Mar 02 '17 at 02:40

You have to use another button element to wrap your btn-file and add your button text inside it.

I think this is what you want to achieve

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       
       </head>
       <body>
       
  <label class="btn btn-primary ">
  <button class="btn btn-file">my own text</button>
    your label
</label>
</body>
</html>

Hope this helps!

Bootstrap fileupload button stacked beneath default html form button

2 Answers2