1

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.

3
  • Good Day. Please change the tag to angularJs. Angular is for angular2+. Commented Sep 12, 2017 at 21:40
  • ng-file-select is not a core AngularJS Directive. The <input type=file> element does not by default work with the ng-model directive. It needs a custom directive. See the marked answer for details. Commented Sep 13, 2017 at 7:21
  • What about ng-change? Commented Sep 13, 2017 at 16:08

1 Answer 1

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]);
};
Sign up to request clarification or add additional context in comments.

1 Comment

Unfortunately, ng-file-select doesn't seem to fire at all.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.