In this post we will look at working with images in a demo Kii Cloud application. The example shows how to store, retrieve and delete image data using Kii’s Javascript API. Similar approaches can be taken with other Kii APIs, but we’ll use JS for an example.
Image files (binary data) can be represented as an object. In terms of Kii’s API we will need to create a Kii Object, with one of the fields (key-value pairs) containing the binary image data. Please note, that the maximum size allowed for an object is 65534 bytes, which means that if you need to load bigger images, you will need to resize them in advance.
First, let’s read an image from a file into a variable (blob):
HTML: create an input tag to select an image file and img tag to preview the image
<input type='file' id=" inputImage" />
<img id="img" src="" />
Javascript (using JQuery): as soon as an image file is selected, it will be set to preview and stored into the imageData variable.
var imageData;
function readImage(input) {
if (input.files && input.files[0]) {
var FR = new FileReader();
FR.onload = function (e) {
$('#img').attr("src", e.target.result);
imageData = e.target.result;
addToList(imageData, $('#inputImage').val());
};
FR.readAsDataURL(input.files[0]);
}
}
$("#inputImage").change(function () {
readImage(this);
});
After executing the code above, your user will see the image preview as shown below:
Now that we have our image saved in a variable, we can store it in Kii cloud:
var bucket = KiiUser.getCurrentUser().bucketWithName("myObjects");
var object = bucket.createObject();
object.set("myObjectValue", imageData);
object.set("myObjectName", fileUri);
object.save( ....
}
The code snippet above saves image data in the current user’s bucket in Kii cloud. If the save was successful, we can retrieve the image along with the other images already in the bucket:
var bucket = KiiUser.getCurrentUser().bucketWithName("myObjects");
var queryObject = KiiQuery.queryWithClause(null);
queryObject.sortByAsc("_created");
bucket.executeQuery(queryObject, {
success: function (queryPerformed, resultSet) {
},
failure: function (queryPerformed, anErrorString) {
}});
}
The code snippet above loads the whole set of objects in the bucket. However, if you only want to retrieve a particular image, you can do so using its “myObjectName
” key:
var clause = KiiClause.equals("myObjectName", fileName);
var query = KiiQuery.queryWithClause(clause);
var queryCallbacks = {
success: function(queryPerformed, resultSet) {
},
failure: function(queryPerformed, anErrorString) {
}}
bucket.executeQuery(query, queryCallbacks);
Once the image objects are retrieved from Kii Cloud, we just need to display them. The retrieved resultSet
should be assigned to the global results
variable for the future reference. The results will be displayed in the listview
element on the page:
results = resultSet;
$("#listview").empty();
for (var i = 0; i < resultSet.length; i++) {
var obj = resultSet[i];
var row = createListItem(obj, i);
$("#listview").append(row);
}
$("#listview").listview('refresh');
The function below shows how a DOM element is created from Kii image object:
function createListItem(obj, index) {
var row = $("<li></li>").attr("uri", index);
var imgrow = $("<img></img>").attr("src", obj.get("myObjectValue"));
$(row).append(imgrow);
var deleteLink = $("<a></a>").attr("href", "javascript:removeFromList('" + index + "')");
$(deleteLink).append("<p>delete " + obj.get("myObjectName") + "</p>");
$(row).append(deleteLink);
return row;
}
The result will present a list of images from Kii cloud with delete links next to them:
Image deletion works exactly the same as deletion of any other Kii object. Since we already have the list of all objects, we can just remove them using their index in the list:
function removeFromList(index) {
var obj = results[index];
obj.delete({
success: function(theDeletedObject) {
$("[uri='"+index+"']").remove();
},
failure: function(theObject, anErrorString) {
}
});
}
That’s all! Happy coding Full source is available for download here.
Kii Cloud is a full-stack mobile backend to accelerate iOS, Android, HTML5 and Unity app development. Optional ad network integration is available to help you monetize. Get started with a free account at developer.kii.com