2

I have a discussion forum webapp. Where user POSTS a question. I am using ng2-file-upload. As my Discussion Forum lists down using *ngFor loop, each discussion have a "comment" input box in which they can upload the image ad well. As image is selected from the respective device, I am showing a little preview Image.

When I select the image, it's preview been shown to each and every object. What I basically want to achieve that image upload and preview should be respective of the object. Below is the code I tried :

dashboard.html

<div class="replyInput">
  <textarea placeholder="Write a reply"></textarea>
  <div class="postimg" *ngFor="let item of commentImgUploader.queue">
       <img src="" imgPreview [image]="item?._file">
       <a (click)="removeFileFromQueue(item)" class="btnRemove">Remove</a>
  </div>
  <div class="uploadFile">
       <label for="uploadImgForComment">File</label>
       <input id="uploadImgForComment" name="uploadImg" type="file" ng2FileSelect [uploader]="commentImgUploader"
                             (change)="uploadFileChange()">
  </div>
  <input class="btn" value="submit" name="submit" type="submit">
</div>

dashboard.component.ts

export class DashboardComponent implements OnInit {

 /**Variables for Posting a new Discussion**/
  uploader: FileUploader = new FileUploader({}); //This is for question
  commentImgUploader: FileUploader = new FileUploader({});
   constructor(){}
   uploadFileChange() {}
}

enter image description here

I want to show the image below the input tag which I have selected.

Community
  • 1
  • 1
shahakshay94
  • 145
  • 1
  • 2
  • 13

0 Answers0