Skip to content
Advertisement

How do I add files from form to Firebase database? Vue js + Vuetify + Firebase

This is my first time using both Vuetify and Firebase.

Following a tutorial, I was trying to add some data to my db in firebase (not images).

After installing firebase in my project with npm, I’ve set it up in a separate js file like this:

import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "....",
  ...
  ...
};


const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);

In the vue.js file where I have the form for the new object with data that I want to add, I’m trying to do like this:

Template:

<template>
    <v-dialog max-width="600px">
        <v-btn flat slot="activator" class="success">
            Add new project
        </v-btn>
        <v-card>
            <v-card-title>
                <h1 class="display-1">Add a new project</h1>
            </v-card-title>
                <v-form class="px-3" ref="newProjectForm">
                    <v-card-text>
                        <v-text-field label="Title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field>
                        <v-textarea  :rules="inputRules" label="Information" v-model="content" prepend-icon="edit"></v-textarea>

                    <v-menu>
                        <v-text-field :rules="inputRules" slot="activator" :value="formattedDate" label="Due date" prepend-icon="date_range"></v-text-field>
                        <v-date-picker v-model="due"></v-date-picker>
                    </v-menu>

                    <v-spacer></v-spacer>
                    
                    <v-btn flat class="success mx-0 mt-3" @click="submit">Add project</v-btn>
                    </v-card-text>
                </v-form>
        </v-card>
    </v-dialog>
</template>

Script:

import format from 'date-fns/format'

import parseISO from 'date-fns/parseISO'

import db from '@/fb'

export default {
    data(){
        return{
            title : "",
            content : "",
            due : null,
            inputRules: [
                v => v.length >= 4 || "Minimum length is 3 characters ",
            ]
        }
    },
    methods:{
        submit(){
            if(this.$refs.newProjectForm.validate()){
                // console.log(this.title,this.content,this.due);
                const project = {
                    title: this.title,
                    content: this.content,
                    due: format(parseISO(this.due), 'eee do MMMM y'),
                    person :'myself',
                    status: 'ongoing'
                }

                db.collection('Listify').add(project).then(() => console.log('added to db'))
            }
        }
    },
 computed: {
    formattedDate () {
      console.log(this.due)
      return this.due ? format(parseISO(this.due), 'eee do MMMM y') : ''
    }
  }}
</script>

The error logged is “TypeError: Cannot read properties of undefined (reading ‘collection’)”

I know I am probably importing something the wrong way, but I am very new to this and I didn’t get a good grasp at it yet.

I want to upload the object coming from the form to the Firebase db, could you explain me how to and what I am missing with the usage of fire base?

Also my npm version is 8.3.1 (I can’t update it atm) is it a problem?

UPDATE:

The solution offered by Frank van Puffelen worked but I still could not get it to work as long as firebase set up was in an external js file, as long as I pasted out everything in the file where I was calling the submit method, it worked!

Advertisement

Answer

You’re importing Firestore like this:

import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';

This is the syntax for the “new” v9 version of the SDK, which uses a modular syntax. But then you’re trying to call:

db.collection('Listify').add(project).then(() => console.log('added to db'))

This is the namespaced syntax for the older SDKs. You can’t mix and match the syntax like that.

In the modular syntax, the equivalent call would be:

addDoc(collection(db, 'Listify'), project).then(...)

Also see:

Advertisement