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.

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


Log in to reply