Having trouble clearing the ng-src (input file) using ng-click. Looking to solve this with Angular. Tried using angular.element.val('') but it's not working for me. Any other suggestions?
controller.js
app.imagePreview = false;
$scope.thumbnail = {
dataUrl: null
};
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function(files){
if (files != null) {
var file = files[0];
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function(){
$scope.thumbnail.dataUrl = e.target.result;
app.imagePreview = true;
});
}
});
}
}
};
app.clearImage = function(){
$scope.thumbnail = {
dataUrl: null
};
}
index.html
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-picture-o"></i>
</div>
<input type="text" class="form-control" readonly>
<span class="input-group-btn">
<span class="btn btn-default btn-file add-img-upload">
<a id="clearPreview" type="button" ng-click="product.clearImage()">
<span class="glyphicon glyphicon-remove"></span> Clear
</a>
</span>
<span class="btn btn-default btn-file add-img-upload"><span class="glyphicon glyphicon-folder-open"></span> Choose
<input type="file" name="file" id="imgInp" onchange="angular.element(this).scope().photoChanged(this.files)" ng-model="files">
</span>
</span>
</div>
<img ng-if="product.imagePreview" ng-src="{{ thumbnail.dataUrl }}" id='img-upload'/>
</div>