0

I used the below code and functionality is working fine but when I choose the file for first time then the upload file button gets shrink.

When I inspect my code I saw

Inspected Code : (from console)

<div class="fileinput fileinput-exist" data-provides="fileinput">
  <span class="btn btn-default btn-file" style="margin-right: 1em;">
       <span class="fileinput-new" ng-show="resumeflag==false" ng-hide="resumeflag==true || uploaded==true">Choose File</span>

       <span class="fileinput-exist" ng-show="resumeflag==true" ng-hide="getFile==true || resumeflag==false">Update Resume</span>

      <input type="hidden" value name/>

       <input class="form-control" type="file" file-model="resume"/>
  </span>                          
  <span class="fileinput-filename"><input readonly class="name" placeholder="No file choosen"/></span>

</div>

Actual Code :

<div class="fileinput fileinput-exist" data-provides="fileinput">
  <span class="btn btn-default btn-file" style="margin-right: 1em;">
       <span class="fileinput-new" ng-show="resumeflag==false" ng-hide="resumeflag==true || uploaded==true">Choose File</span>

       <span class="fileinput-exist" ng-show="resumeflag==true" ng-hide="getFile==true || resumeflag==false">Update Resume</span>

       <input class="form-control" type="file" file-model="resume"/>
  </span>                          
  <span class="fileinput-filename"><input readonly class="name" placeholder="No file choosen"/></span>

</div>

I don't know why it is changing to "fileinput fileinput-exists" instead of "fileinput fileinput-exist".

halfer
  • 19,824
  • 17
  • 99
  • 186
kalai
  • 177
  • 5
  • 22
  • Possible duplicate of [How to change the button text of ?](http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file) – Adnan Umer Aug 25 '16 at 09:11
  • How to change "choose file" name to "choose resume" with same "choose file - no file choosen" functionality – kalai Aug 25 '16 at 09:45

1 Answers1

0

There is no way out there to change default behavior of input[type=file]. There is a plugin that can help you out to achieve that

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<link href="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet"/>
<link href="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<div class="fileinput fileinput-new" data-provides="fileinput">
  <span class="btn btn-default btn-file">
       <span class="fileinput-new">Upload File</span>
       <span class="fileinput-exists">Change File</span>
       <input class="form-control" type="file" file-model="resume" ng-disabled="profileFilled==false;" />
  </span>
  <span class="fileinput-filename"></span>
  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>
Adnan Umer
  • 3,669
  • 2
  • 18
  • 38