Upload Upload the audio file to Firebase Storage and link it to a Firestore document This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. *Enrollment provides full access to this course (and updates) for life. Or Signup for Unlimited PRO Access 📼 Login to Watch 👈 Capture Audio Wrap up 👉 Chat Room Component Add file uploads. ChatRoom.vue <script> import { db, storage } from '../firebase'; export default { data() { return { newMessageText: '', loading: false, messages: [], newAudio: null, recorder: null, } }, computed: { messagesCollection() { return db.doc(`chats/${this.chatId}`).collection('messages'); }, newAudioURL() { return URL.createObjectURL(this.newAudio); } }, methods: { // omitted ... async addMessage(uid) { this.loading = true; let audioURL = null; const { id: messageId } = this.messagesCollection.doc(); if (this.newAudio) { const storageRef = storage .ref('chats') .child(this.chatId) .child(`${messageId}.wav`); await storageRef.put(this.newAudio); audioURL = await storageRef.getDownloadURL(); } await this.messagesCollection.doc(messageId).set({ text: this.newMessageText, sender: uid, createdAt: Date.now(), audioURL }); this.loading = false; this.newMessageText = ''; this.newAudio = null; } }; </script> Chapters Get Started 📜 1 Resources Project source code and Vue Firebase resources 1:44 ⚡ 2 Vue Setup Get started with the Vue CLI free 3:43 🔥 3 Firebase Setup Install Firebase and the Vuefire package 3:25 🚆 4 Your First Component Build a basic home page component with routing free 2:13 User Authentication 👤 5 Anonymous Auth Basic user authentication with Firebase 2:02 👥 6 Realtime Auth State React to changes to the Firebase User Auth State free 4:02 👋 7 User Profile Create a user profile where the user can sign out 1:51 📧 8 Email Password Authentication Bind to forms in Vue to sign up with email & password 6:02 Firestore Chat 💬 9 Create Chat Rooms Create a chat room in Firestore linked to the current user 2:50 🔍 10 Query Chat Rooms Query all chat rooms owned by the current user 1:48 🚉 11 Dynamic Routing Load a chat room based on its document ID with the Vue Router 2:14 📩 12 Query Messages Query most recent messages in a subcollection of the chat room 3:48 🎀 13 Message UI Build a UI component for showing the message text 2:32 Voice Messages 🎙️ 14 Capture Audio Record a stream from the user's microphone using the MediaRecorder API 3:19 📤 15 Upload Upload the audio file to Firebase Storage and link it to a Firestore document 3:33 🍰 16 Wrap up Final thoughts and ideas to improve the quality of the app. 1:51