I wanted to keep the image upload feature simple. So, along with the existing reply with text features, we are going to add another button named Reply with Image. This button will launch a modal and help us with the upload process. Open clientappview-threadview-thread.component.html and next to the Reply button at the bottom of the page, add the following code:

// SNIPP SNIPP
<div class="col text-center">
            <button class="btn btn-info" type="submit" (click)="uploadImage(thread)"><i class="fa fa-user-plus"></i> Reply with Image</button>
        </div>
// SNIPP SNIPP

Next, the required logic for uploadImage will be placed in clientappview-threadview-thread.component.ts and should be as follows:

// SNIPP SNIPP
uploadImage(thread: Thread) {
        const modalRef = this.modal.open(UploadImageModal);
        modalRef.componentInstance.threadId = this.thread._id;
        modalRef.componentInstance.updateThread.subscribe((message) => {
                 if (!message) return;
                 thread.messages.push(message);
         });
}
// SNIPP SNIPP

Here, we are using the NgbModal instance to open the upload image component, which we are going to create in a moment. Using the componentInstance on modalRef, we are sending the thread ID to that component. We will be creating an output named updateThread on the upload image component and subscribing to that event. updateThread sends back the newly created message to be added to the existing list of messages in the thread. Add the following two imports to clientappview-threadview-thread.component.ts:

// SNIPP SNIPP
import { UploadImageModal } from './upload-image-modal/upload-image-modal';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
// SNIPP SNIPP

And update the view thread component constructor as follows:

// SNIPP SNIPP
constructor(
 public auth: AuthService,
 public toast: ToastComponent,
 private router: Router,
 private route: ActivatedRoute,
 private formBuilder: FormBuilder,
 private threadService: ThreadService,
 private messageService: MessageService,
 private modal: NgbModal
) {}
// SNIPP SNIPP

Now, we will create the upload image modal component.