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>