Q: Bootstrap fileupload button stacked beneath default html form button 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'}),
}


A: 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">


A: 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!
