CODEWITHSUNDEEP
imagetypescriptuploadangular5
AWGAL
AWGAL

Reputation: 187

Change image for individual users Angular 5

I have a array of users and i wish to be able to change the image associated with each individually

I have been able to do this on the profile users page no problem but can figure out how to do it when i have multiple profiles 

<img [src]="member.person.imagePath"
                     (click)="fileInput.click()"
                     class="profile-image pointer img-fluid img-thumbnail">
                          <div style="text-align:center;"
                               class="cam-icon cam-pos"
                               [hidden]="!editing">
                                    <i class="fa fa-camera pointer" (click)="fileInput.click()" aria-hidden="true"></i>
                          </div>
                          <input style="display: none"
                                 type="file"
                                 (change)="changeListener($event)"
                                 #fileInput>



 onFileChanged(event) {
    const string = event.target.files[0]
    this.currentUserData.familyMembers[0].person.imagePath = event.target.files[0];
}

changeListener($event) : void {
    this.readThis($event.target);
}


readThis(inputValue: any): void {
    var file:File = inputValue.files[0];
    var myReader:FileReader = new FileReader();

    myReader.onloadend = (e) => {
        this.currentUserData.familyMembers[0].person.imagePath = myReader.result;
    }
    myReader.readAsDataURL(file);
}

currently i have it set to target the first member of the array just to check it was working and it does. my problem is targeting other members with a image uploaded from my computer

Upvotes: 0

Views: 881

Answers (1)

user1779362
user1779362

Reputation: 1010

So instead of using [0] as the element, you need to pass the index back with the change function.

So wherever you do your *ngFor loop, add index like so:

<ng-container *ngFor="let member of members; let i = index;">

    <img [src]="member.person.imagePath"
                 (click)="fileInput.click()"
                 class="profile-image pointer img-fluid img-thumbnail">
                      <div style="text-align:center;"
                           class="cam-icon cam-pos"
                           [hidden]="!editing">
                                <i class="fa fa-camera pointer" (click)="fileInput.click()" aria-hidden="true"></i>
                      </div>
                      <input style="display: none"
                             type="file"
                             (change)="changeListener($event, i)"
                             #fileInput>

</ng-container>

changeListener($event, index: number) : void {
    this.readThis($event.target, index);
}


readThis(inputValue: any, index: number): void {
    var file:File = inputValue.files[0];
    var myReader:FileReader = new FileReader();

    myReader.onloadend = (e) => {
        this.currentUserData.familyMembers[index].person.imagePath = myReader.result;
    }
    myReader.readAsDataURL(file);
}

Upvotes: 1

Related Questions