I am using file input of jasny-boostrap in AngularJS in a Modal, so I also used the jasny-bootstrap-angular. I am having two doubts about:
When I Click on the button to open the model, I am able to select then file I want. If I select a file e close the model, when I open again the model, the file will be in data-preview, it it not cleaning up. I want pass null value (or reset) this image preview (fileinput-preview thumbnail) in my angularjs when I click in my button to open the modal;
If a click in a button that call a modal, I want to automatic get the image from my web service to the data-previw and automatic change the buttons to 'remove' and 'change' and I get a picture to service.
My HTML:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new">Select a image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="file" file-model="fileinput"> <!--compose.myFile-->
</span>
<a href="#" class="btn btn-primary fileinput-exists" data-dismiss="fileinput">Remover</a>
<button class="btn btn-info" ng-click="showInput()">Show Input</button>
</div>
</div>
And if I click on 'show input' I can see the image binary, I used this angularjs:
$scope.showInput = function () {
console.log($scope.fileinput.result);
}
I am using this HTML code with my angularjs to see the image from web service and it is everything work perfect:
<!-- Foto view-->
<div class="form-group">
<img ng-show="equipamento.FotoEquipamento != null" style="height:auto; width:225px;" data-ng-src="{{getImage(equipamento.FotoEquipamento)}}" />
</div>
jasny-bootstrap-angular is UPDATED.
Please check it out.
Now it supports event handlers also.