kalai kalai - 2 months ago 11
HTML Question

change default "choose file" name to "upload file" with same functionality in angularjs

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
".

Can any one please help me.

Answer

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>