Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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>