How to save and retrieve file using pouchdb and vue js on onsen ui

jayGorio

Can someone help me on how to upload a file on pouchdb and display those uploaded files on page. I want to upload a file including name info of that file. When I check the fetch files using the console I can see [object object]. Am I doing the right thing? Any advice is well appreciated. Here is my code.

//Notes.vue
// By the way Im using onsen ui for this

<template>
<v-ons-page>
    <v-ons-list>

        <v-ons-list-header>Auditing</v-ons-list-header>
        <v-ons-list-item  v-for="note in notes">
            <div class="left">
                <img src="" alt="">
            </div>

            <div class="center">
                <span>{{ note._attachment['files'].data }} File here</span>
            </div>
        </v-ons-list-item>
    </v-ons-list>
    
    
    // Customize form for uploading file and info

    <v-ons-alert-dialog 
        modifier="rowfooter"
        :visible.sync="dialogVisible"
    >
        <span slot="title">Create a Note</span>
        
                //File name of the file
                <v-ons-input float
                placeholder="Name of note"
                v-model="name"
                >
                </v-ons-input>
        
                // File 
                <v-ons-input type="file" @change="onFileChange"></v-ons-input>
            
                <v-ons-button @click="addNotes(name)">Submit</v-ons-button>
        

    </v-ons-alert-dialog>
  </v-ons-page>
</template>

//Here the methods for uploading and reading file uploaded

<script>

import PouchDB from 'pouchdb'

var db = new PouchDB('reviewerdb')

export default {

    data() {
        return {
            dialogVisible: false,
            notes: [],
            file: '',
            name: '', 
            path
        }
    },

    mounted() {
        this.getNotes();

        print('notes: ' + this.notes);
    },

    methods: {

        onFileChange(event) {

            this.file = event.target.files[0];

        },
        addNotes() {
            db.put({
                _id: 'notes',
                _attachments: {
                    "file": {
                        type: this.file.type,
                        data: this.file
                    }
                }
            })

        },
        getNotes() {
            db.get('notes', {attachments:true}).then(function (note) {

                this.notes = note;
                
            });
        }
    }
}

</script>

How to save and retrieve file using pouchdb and vue js on onsen ui browsing