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() {}
}
I want to show the image below the input tag which I have selected.