How do I upload a file to an ng-repeated model?

Question

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.

Good Day. Please change the tag to angularJs. Angular is for angular2+. — alexKhymenko, Sep 12 '17 at 21:40
`ng-file-select` is not a core AngularJS Directive. The `` element does not by default work with the [ng-model directive](https://docs.angularjs.org/api/ng/directive/ngModel). It needs a [custom directive](https://docs.angularjs.org/guide/directive). See the [**marked** answer](https://stackoverflow.com/a/45600736/5535245) for details. — georgeawg, Sep 13 '17 at 07:21

score 1 · Answer 1 · answered Sep 12 '17 at 21:58

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]);
};

Unfortunately, ng-file-select doesn't seem to fire at all. – Joshua M. Moore Sep 13 '17 at 00:20 — Joshua M. Moore, Sep 13 '17 at 00:20

How do I upload a file to an ng-repeated model?

1 Answers1