Inside the clientappview-thread folder, create another folder named upload-image-modal and inside that, create two files named upload-image-modal.html and upload-image-modal.ts. Update clientappview-threadupload-image-modalupload-image-modal.html as follows:

// SNIPP SNIPP
<div class="modal-header">
    <h4 class="modal-title">Reply with Image</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('x')">
         <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="form-group">
        <input type="file" id="file" (change)="handleFileInput($event.target.files)">
        <p class="text-center mt-5 mb-0">
             <img [src]="filePreviewPath" width="200" *ngIf="filePreviewPath" />
        </p>
        <p>
            <br>
            <ngb-alert [dismissible]="false" *ngIf="invalidImage">
                <strong>Warning!</strong> Please upload a valid image file. Supported file types are {{AllowedImageExt.join(',')}}
            </ngb-alert>
            <br>
            <ngb-alert [dismissible]="false" *ngIf="largeFile">
                <strong>Warning!</strong> Max file size: 2MB. Uploaded file size {{getFileSize()}}
            </ngb-alert>
        </p>
    </div>
    <ngb-alert type="danger" [dismissible]="false" *ngIf="error">
        <strong>Error!</strong> {{error.message || error}}
    </ngb-alert>
</div>
<div class="modal-footer">
    <i *ngIf="isProcessing" class="fa fa-circle-o-notch fa-spin fa-3x"></i>
    <button type="button" class="btn btn-success" [disabled]="isProcessing || !fileToUpload || invalidImage || largeFile" (click)="reply()">Reply</button>
</div>
// SNIPP SNIPP

Here, we have a file uploader and an image tag for an image preview. Apart from that, we have the required error messages and loading indicators. For the required logic, we will get started by adding the imports to clientapp/view-threadupload-image-modalupload-image-modal.ts:

// SNIPP SNIPP
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { VisionAPIService } from '../../services/vision.api.service';

import { GLOBAL } from '../../services/global.constants';
import { HELPER } from '../../services/helpers.global';
// SNIPP SNIPP

We are going to create the missing dependencies in a moment. Next, we are going to define the UploadImageModal component as follows:

// SNIPP SNIPP
@Component({
        selector: 'sm-create-asset-modal',
        templateUrl: './upload-image-modal.html'
})
export class UploadImageModal {
        fileToUpload: File = null;
        invalidImage: boolean = false;
        largeFile: boolean = false;
        isProcessing: boolean = false;
        AllowedImageExt: Array < string > = GLOBAL.allowedImageExt;
        @Input() threadId; // fetch from view-thread page
        @Output() updateThread = new EventEmitter < any > (); // Update main thread with new message
        error: string = '';
        filePreviewPath: SafeUrl;
}
// SNIPP SNIPP

The constructor will be as follows:

// SNIPP SNIPP
constructor(
        public activeModal: NgbActiveModal,
        public visionAPIService: VisionAPIService,
        private route: ActivatedRoute,
        private sanitizer: DomSanitizer
) {}
// SNIPP SNIPP

We have handleFileInput(), which gets triggered when a new file is selected:

// SNIPP SNIPP
handleFileInput(files: FileList) {
        this.fileToUpload = files.item(0);
        if (!this.fileToUpload) return; // when user escapes the file picker
        if (this.fileToUpload.size > 2000000) { // 2MB max file size
                this.largeFile = true;
        } else {
                this.largeFile = false;
        }
        if (!this.isValidFileType(this.fileToUpload.name)) {
                this.invalidImage = true;
        } else {
                this.invalidImage = false;
        }
        if (!this.invalidImage && !this.largeFile) {
                this.filePreviewPath =this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(this.fileToUpload)));
        }
}
// SNIPP SNIPP

As we can see from this, we are going to validate that the uploaded file is an image, as well as ensure the image size does not exceed 2 MB. Then, using sanitizer.bypassSecurityTrustUrl, we create a temp URL for the image file to be shown in the preview. Next is the reply method that posts data to our server and updates the view thread component with the newly created message:

// SNIPP SNIPP
reply() {
        this.isProcessing = true;
        this.visionAPIService.postFile(this.threadId, this.fileToUpload).subscribe(data => {
        console.log(data);
        this.updateThread.emit(data);
        this.isProcessing = false;
        this.activeModal.close();
 }, error => {
        console.log(error);
        this.error = error;
        this.isProcessing = false;
    });
}
// SNIPP SNIPP

Finally, we have a couple of helpers, as follows:

// SNIPP SNIPP
getFileSize(): string {
 return HELPER.getFileSize(this.fileToUpload.size, 0);
}

private isValidFileType(fName) {
 return this.AllowedImageExt.indexOf(fName.split('.').pop()) > -1;
}
// SNIPP SNIPP

This concludes our upload image modal component. Before we proceed, we need to add this component to clientappapp.module.ts. First, let's import UploadImageModal into clientappapp.module.ts:

// SNIPP SNIPP
import { UploadImageModal } from './view-thread/upload-image-modal/upload-image-modal';
// SNIPP SNIPP

Next, we will add this modal to declarations as well as entryComponents, as follows:

// SNIPP SNIPP
declarations: [
        AppComponent,
        AboutComponent,
        RegisterComponent,
        LoginComponent,
        LogoutComponent,
        AccountComponent,
        AdminComponent,
        NotFoundComponent,
        HomeComponent,
        CreateThreadComponent,
        ViewThreadComponent,
        FilterThreadPipe,
        EditThreadComponent,
        UploadImageModal
    ],
    entryComponents: [
        UploadImageModal
    ],
// SNIPP SNIPP

Save all the files and we are good to move on. Now, we will fill in the missing dependencies.