Hello,
I have a directive attached to a input type='file' field that lets users
upload a file. I use a directive because the file to eb uploaded is sent
via a ajax request to the backend - not via a page refresh
What happend is this
user clicks the fle upload button;
user selects a img and clicks ok;
in FireBug I can see that the file's properties are being read - name,
size, fileSrc and name;
But the value of ng-src={file.fileSrc} is not updated - only when I change
something in the view (e.g. add a chareactr in a inp[ut field) the digest
is run and the image is shown.
This is what I have
view:
<tr ng-repeat-start="item in items | orderByPriority">
<td><div ng-bind="item.name"></div></td>
<td><img ng-src="{{item.fileSrc}}" title="{{item.fileName}}"
alt="{{item.fileName}}" width="50px"></td>
</tr>
<tr ng-repeat-end ng-show="editRow">
[...code...]
<input type="file" upload-file >
[...code...]
</tr>
//initially all keys in item have no value so no img is shown
directive
.directive("uploadFile",["$parse",function($parse){
return {
restrict: 'A',
link: function(scope,element,attrs){
element.bind('change',function(){
var file = element[0].files[0];
scope.$apply(function(){
var reader = new FileReader();
reader.onloadend = function(){
scope.item.fileSrc = reader.result;
scope.item.fileName = file.name;
scope.item.fileType = file.type;
scope.item.fileSize = file.size;
}
reader.readAsDataURL(file);
});
});
}
}
}])
With this code, when user clicks upload button, selects an image and clicks
ok, nothing happens. As soon a digest is triggred by typing something in a
textfield the value of item.fileSrc in the view is updated and the image is
shown.
How can I do this in Angular?
--
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.
