How do I upload a file to an ng-repeated model? [duplicate] - angularjs

Question

This question already has answers here:
File Upload using AngularJS
(29 answers)
Closed 5 years ago.
I have an angular controller that is supposed to update person data. With text and date fields, that works just fine, I have
<ul>
<li ng-repeat="person in $ctrl.persons | filter:$ctrl.query">
...
<div ng-show="person.edit">
<label>Full Name*:</label><input class="edit-person" ng-model="person.fullname" /><br />
<label>Birthdate:</label><input class="edit-person" type="date" ng-model="person.birthdate" /><br />
<label>Deathdate:</label><input class="edit-person" type="date" ng-model="person.deathdate" /><br />
<label>Description: </label><input class="edit-person" type="text" ng-model="person.description" /><br />
<img ng-src="{{person.picture}}" width="100px" height="100px" /><br />
<label>Picture: </label>
<input class="edit-person" type="file" accept="image/*"
ng-file-select="handleEditPersonFiles(this.files);" /><br />
<button ng-click="$ctrl.submitEdit(person); person.edit = false;">submit</button>
<button ng-click="$ctrl.cancelEdit(); person.edit = false;">cancel</button>
</div>
</li>
</ul>
and the component code:
var self = this;
this.submitEdit = function(person){
$http.post('/edit_person', {
id: person.id,
fullname: person.fullname,
birthdate: person.birthdate,
deathdate: person.deathdate,
description: person.description,
picture: person.picture
}).then(loadPersons);
};
and
handleEditPersonFiles = function(files){
var reader = new FileReader();
var that = this;
reader.onload = function(){
? = reader.result;
};
reader.readAsDataURL(files[0]);
};
I have no problem reading and uploading the pictures in the new-person function, since there I have a single variable, and can just self.new_person_picture = reader.result, but with the edit function, I don't know where to assign the reader result since I don't have access to the person.picture variable through angular. The onchange event correctly submits the file list. But ng-change seems to require a model, and doesn't fire when a file is selected. I also tried ng-file-select, but no event seems to be firing when I select a file to upload. Any help would be greatly appreciated.

Answer 1

It's easier than you think, you just have to pass the person model to the handleEditPersonFiles model too.
html:
<li ng-repeat="person in $ctrl.persons ...
...
<label>Picture: </label><input class="edit-person" type="file" accept="image/*" ng-file-select="handleEditPersonFiles(person, this.files);" />
js:
handleEditPersonFiles = function(person, files){
var reader = new FileReader();
reader.onload = function(){
person.picture = reader.result;
};
reader.readAsDataURL(files[0]);
};