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>