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
👈 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>

Q&A Chat