Cordova / Sencha Touch Application Import and Show Image form Native Phone Gallery

Hello,

Recently in one of my cordova application we have requirement to select images from Phone gallery and display it in list view.  For that we have to allow use to select multiple images from gallery. Here in this blog I am going to explain how to do this.

First of all we will need following plugin installed.

Cordova Image Picture.

https://github.com/wymsee/cordova-imagePicker

If you install this plugin with following command, some how it does not work.

cordova plugin add cordova-plugin-image-picker

So instead of installing it from the command install it with direct git URL.

cordova plugin add "https://github.com/wymsee/cordova-imagePicker"

Along with above plugins, we will also need Cordova File Plugin and Cordova File Transfer Plugin.

Install it with following commands.

cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer

Now first of all we have to open image gallery with this image picker plugin to choose images.

Add following code.

window.imagePicker.getPictures(
    function(results) {
        for (var i = 0; i < results.length; i++) {
            console.log('Image URI: ' + results[i]);
        }
    }, function (error) {
        console.log('Error: ' + error);
    }
);

Please note that this plugin copy the images it's location temporary location to app directory and returns it's path which is a temporary path so we have to get absolute path to display images. For this modify above code as follow.

window.imagePicker.getPictures(
function(results) {
for (var i = 0; i < results.length; i++) {
console.log(results[i]);

var location= results[i];

window.resolveLocalFileSystemURL(location, function(oFile) {
oFile.file(function(readyFile) {
var reader= new FileReader();
reader.onloadend= function(evt) {
Ext.getStore('ImageGallery').add({
fileURI: evt.target.result
});
Ext.getStore('ImageGallery').sync();
};
reader.readAsDataURL(readyFile);
});
}, function(err){
console.log('### ERR: filesystem.directoryUp() - ' + (JSON.stringify(err)));
});
}

}, function (error) {
console.log('Error: ' + error);
}
);

As you can see in above code, using the temporary location we are getting absolute path of images and adding it to Sencha Touch stores so we use it to display in Sencha Touch data view.

Following is the Store and Model definition.

Ext.define('MyApp.model.ImageGallery',  {
    extend: 'Ext.data.Model',
    config:
    {
        idProperty: 'id',
        fields:
            [

                { name: "id", type: 'int' },
                { name: 'fileURI', type: 'string'}
            ]
    }
});

Ext.define('MyApp.store.ImageGallery', {
    extend: 'Ext.data.Store',
    config:
    {
        autoLoad: true,
        model: 'MyApp.model.ImageGallery',


        proxy:
        {
            type: 'localstorage',
            id: 'image-gallery'
        }
    }
});

And following is the dataview.

 {
xtype: 'dataview',
height: '100%',
width: '100%',
layout: {
type: 'fit'
},
inline: {
wrap: true
},
style: 'background-color:#fefefe',
margin: '6% 6% 6% 6%',
itemTpl: [
 '<div style="width: 140px;height:140px;overflow: hidden">'+
 '<img id="gallery_{id}" style="position: relative;left: 15px;top: -115px;z-index: 1" src="{fileURI}" width="100" height="100"/>'+
 '</div>'

],
store: 'ImageGallery',
itemId: 'imageGalleryDataView',
id: 'imageGalleryDataView',
mode: 'MULTI',
selectedCls: ''
}

Ultimate output will look like this.