Store and retrieve attachment in Pouch DB using Angular/Ionic
Recently, I am exploring pouch db and how to cache a server document in PouchDB in ionic. The topic was addressed in bits and pieces across posts and forums. Below is the code sample which brings everything together.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$scope.storeFile = function () { | |
//Use Sqllite | |
var db = new PouchDB('mydb.db', { | |
adapter: 'cordova-sqlite' | |
}); | |
//Create index - pouchdb-find plugin | |
db.createIndex({ | |
index: { | |
fields: ['name'], | |
name: 'nameidx' | |
} | |
}).then(function (result) { | |
console.log(result); | |
}).catch(function (err) { | |
console.log(err); | |
}); | |
//Insert mittens | |
var doc = { | |
"_id": "mittens", | |
"name": "Mittens", | |
"occupation": "kitten", | |
"age": 3, | |
"hobbies": [ | |
"playing with balls of yarn", | |
"chasing laser pointers", | |
"lookin' hella cute" | |
] | |
}; | |
db.put(doc); | |
//insert mittens1 | |
var doc = { | |
"_id": "mittens1", | |
"name": "Mittens", | |
"occupation": "kitten", | |
"age": 3, | |
"hobbies": [ | |
"playing with balls of yarn", | |
"chasing laser pointers", | |
"lookin' hella cute" | |
] | |
}; | |
db.put(doc); | |
//sample get operation | |
db.get('mittens').then(function (doc) { | |
//console.log(doc); | |
}); | |
var config = { | |
headers: { | |
'Referer': 'https://xxx.xxx.com' | |
}, | |
//this is really important | |
responseType: 'blob' | |
}; | |
var myUrl; | |
//get image blob from server | |
$http.get("https://xxx.xxx.com/xxxx.xxx.com/xxxxxx/BSC/CC.jpg", config).success(function (res) { | |
console.log('blob'); | |
//console.log(res); | |
//insert blob as mydoc1. attachemnt object will not be indexed by pouchdb-find | |
db.put({ | |
_id: 'mydoc1', | |
name: 'Mittens', | |
_attachments: { | |
'CC.jpg': { | |
content_type: 'image/jpeg', | |
data: res | |
} | |
} | |
}); | |
//insert mydoc2 | |
var doc = { | |
"_id": "mydoc2", | |
"name": "Mittens", | |
"occupation": "kitten", | |
"age": 3, | |
"hobbies": [ | |
"playing with balls of yarn", | |
"chasing laser pointers", | |
"lookin' hella cute" | |
] | |
}; | |
db.put(doc); | |
//insert mydoc3 | |
var doc = { | |
"_id": "mydoc3", | |
"name": "Mittens" | |
}; | |
db.put(doc); | |
db.getAttachment('mydoc1', 'CC.jpg').then(function (blob) { | |
//console.log(blob); | |
myUrl = URL.createObjectURL(blob); | |
$scope.myUrl = myUrl; | |
}); | |
//issue search | |
db.find({ | |
selector: { | |
name: 'Mittens' | |
}, | |
fields: ['_id', 'name'], | |
sort: ['name'] | |
}).then(function (result) { | |
console.log('idx'); | |
//returns all objects with Mittens except attachments | |
console.log(result); | |
}).catch(function (err) { | |
console.log(err); | |
}); | |
}).error(function (err) { | |
console.log(err); | |
}); |
Comments
Post a Comment
Feedback - positive or negative is welcome.