Hello,
I have a page with a <input type="file" button. I want the user to be able
to choose a file. When a file is chosen the binary contents of the file
should be assigned to a $scope key. I use directive and the HTML5
FileReader class. I have access to the file data in the directive but don't
succeed in assigning that data to key in the parent's scope. This is what I
have:
view.html:
<div class="col-md-3 bgLightGrey">
<input
type="file"
placeholder="File upload"
ng-model="newItem.file"
upload-file={"img":["jpg","jpeg","bmp","png","gif"],"doc":["doc"],"appl":["pdf"]}
max-file-size="5">
</div>
[...code...]
Directive:
.directive('uploadFile',function(){
return{
restrict: 'A',
scope:{ngModel: '=ngModel'},
link: function(scope,element,parentController){
var listener = function(e){
e.stopPropagation();
e.preventDefault();
var setScopeVal = function(val){
console.log(val) <<=== this dumps base64 data to console
scope.ngModel=val;
};
var f = this.files[0];
var reader = new FileReader();
reader.onload = (function(f){
return function(e){
setScopeVal(e.target.result); <<=== this gives access to the base64 encoded
filedata
}
})(f);
reader.readAsDataURL(f);
}
element.bind('change',listener);
}
}
}
)
I have a handle to filedata, I cannot assign that data to the value of
ng-model: "newItem.file" on the parent element where I have put my
directive. Despite granting access to it via the isolated scope:{ngModel:
'=ngModel'}. Should give me 2-way access (read/write of parent attribute
value) right?
What do I miss here? Any help appreciated!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
