Monaca Onsen UI Discord Chat Github Repo

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>