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

  • 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.

    // By the way Im using onsen ui for this
            <v-ons-list-item  v-for="note in notes">
                <div class="left">
                    <img src="" alt="">
                <div class="center">
                    <span>{{ note._attachment['files'].data }} File here</span>
        // Customize form for uploading file and info
            <span slot="title">Create a Note</span>
                    //File name of the file
                    <v-ons-input float
                    placeholder="Name of note"
                    // File 
                    <v-ons-input type="file" @change="onFileChange"></v-ons-input>
                    <v-ons-button @click="addNotes(name)">Submit</v-ons-button>

    //Here the methods for uploading and reading file uploaded

    import PouchDB from 'pouchdb'
    var db = new PouchDB('reviewerdb')
    export default {
        data() {
            return {
                dialogVisible: false,
                notes: [],
                file: '',
                name: '', 
        mounted() {
            print('notes: ' + this.notes);
        methods: {
            onFileChange(event) {
                this.file =[0];
            addNotes() {
                    _id: 'notes',
                    _attachments: {
                        "file": {
                            type: this.file.type,
                            data: this.file
            getNotes() {
                db.get('notes', {attachments:true}).then(function (note) {
                    this.notes = note;


Log in to reply