AngularJS: upload file inside modal-ui-bootstrap - angularjs

Question

I have an angular modal-ui, in it I upload file. The problem is that for some reason the <input> of the file doesn't triggers the app directive. The directive returns the file name and size when the <input> being changed.
this is the result I want to get:
example
I really tried already any thing, but still for some reason I can't see in the <span> the file name.
The html file :
<form novalidate ng-submit="add(Form.$valid)" name="Form">
<div class="modal-header col-lg-12">
<h3 class="col-lg-4 col-lg-offset-4">add file</h3>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="row">
<div class="form-group col-lg-8" ng-class="{'has-error': notPass && Form.fileName.$invalid}">
<label class="control-label label-add-card" for="fileName">name</label>
<input class="input-add-card form-control " id="fileName" name="fileName" type="text" ng-model="fileName" ng-pattern="/^[a-z1-9]{10,}$/" ng-required="true">
<p ng-show="notPass && Form.fileName.$invalid" class="help-block">not good</p>
</div>
</div>
<div class="row">
<div class="form-group col-lg-8" ng-class="{'has-error':notPass && Form.fileExplain.$invalid}">
<label class="control-label label-add-card" for="fileExplain">explain</label>
<textarea class="input-big form-control " id="fileExplain" name="fileExplain" type="text" ng-model="fileExplain" ng-pattern="/^[a-z1-9]{1,}$/" ng-required="true"></textarea>
<p ng-show="notPass && Form.fileExplain.$invalid" class="help-block">not good</p>
</div>
</div>
<div>
<div class="form-group col-lg-12" ng-class="{'has-error':notPass && Form.uploadDownloads.$invalid}">
<input ng-model="uploadDownloads" type="file" fd-input file-name="fileName" />
<input class="btn btn-primary" type="button" value="choose" onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important">{{fileName}}</span>
<p ng-show="notPass && Form.uploadDownloads.$invalid" class="help-block">please choose</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success col-lg-12 btn-modal-costume">add</button>
</div>
</form>
the modal controller:
/**
* Created by Ariel on 22/11/2015.
*/
app.controller('uploadDownloadsController',function($scope,$modalInstance ){
app.directive('fdInput', fdInput);
function fdInput() {
return {
scope: {
fileName: '='
},
link: function(scope, element, attrs) {
element.on('change', function(evt) {
var files = evt.target.files;
console.log(files[0].name);
console.log(files[0].size);
scope.fileName = files[0].name;
scope.$apply();
});
}
}
};
$scope.fileName = '';
$scope.add = function(valid){
if(valid){
$scope.data = 'none';
var f = document.getElementById('uploadDownloads').files[0];
var r = new FileReader();
r.onloadend = function(e){
$scope.data = e.target.result;
$scope.notPass = false;
$modalInstance.close({
'data':$scope.data,
'fileName':$scope.fileName,
'fileExplain':$scope.fileExplain
});
};
/*activate the onloadend to catch the file*/
r.readAsBinaryString(f);
} else {
$scope.notPass = true;
}
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});

Answer 1

here is how I have done it :
the html :
<form novalidate ng-submit="add(Form.$valid)" name="Form">
.
.
.
<div>
<div class="form-group col-lg-12" ng-class="{'has-error':notPass && Form.uploadDownloads.$invalid}">
<input ng-model="uploadDownloads" class="form-control-file" id="uploadDownloads" type="file" fd-input file-names="fileNames" />
<input class="btn btn-primary" type="button" value="choose" ng-click="choose()"/> <!-- on button click fire the file click event -->
<span class="badge badge-important">{{fileNames}}</span>
<p ng-show="notPass && Form.uploadDownloads.$invalid" class="help-block">you have to choose file</p>
</div>
</div>
.
.
.
</form>
I built a direcvtive to show thee file name dorring the upload:
/*get and shows the file name*/
app.directive('fdInput', function($timeout){
return {
scope: {
fileNames: '='
},
link:function(scope, element, attrs) {
$timeout(element.on('change', function(evt) {
var files = evt.target.files;
scope.fileNames = files[0].name;
scope.$apply();
}),0);
}
}
});
and this is the upload file controller:
app.controller('uploadDownloadsController',function($scope,$modalInstance,$timeout){
$scope.fileNames = '';
$scope.choose = function(){
$('#uploadDownloads').trigger('click');
};
$scope.add = function(valid){
if(valid){
$scope.data = 'none';
$scope.notPass = false;
/*this catches the file*/
var fileInput = document.getElementById('uploadDownloads');
var file = fileInput.files[0];
/* to send the file and the other inputs about it, need to use formData type*/
var formData = new FormData();
formData.append('file', file);
formData.append('fileName', $scope.fileName);
formData.append('fileExplain', $scope.fileExplain);
console.log(formData);
$modalInstance.close(formData);
} else {
$scope.notPass = true;
}
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});