I wanted to keep the audio record and upload feature simple. So, along with the existing reply with text, reply with image, and reply with video features, we are going to add another button named Reply with Audio; this button will launch a modal and help us with the record and upload process. Open client/app/view-thread/view-thread.component.html and, next to the Reply with Video button at the bottom of the page, add this code:

// SNIPP SNIPP
<div class="col text-center">
 <button class="btn btn-dark" type="submit" (click)="uploadAudio(thread)"><i class="fa fa-microphone"></i> Reply with Audio</button>
</div>
// SNIPP SNIPP

Next, the required logic for uploadAudio will be placed in client/app/view-thread/view-thread.component.ts and should be this:

// SNIPP SNIPP
uploadAudio(thread: Thread) {
 const modalRef = this.modal.open(UploadAudioModal, {
 size: 'lg'
 });
 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 audio component, which we are going to create in a moment. Using the componentInstance on modalRef, we are sending in the thread ID to that component as input. We will be creating an output named updateThread on the Upload Audio 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 this import to client/app/view-thread/view-thread.component.ts:

// SNIPP SNIPP
import { UploadAudioModal } from './upload-audio-modal/upload-audio-modal';
// SNIPP SNIPP

Now, we will create the upload video audio component.