How to convert an image(using image path) to base64 string in sencha touch? - sencha-touch

Question

iam new sencha touch.
Iam doing one project , in that project i need to convert the images to base64 string, iam uploading the image, and iam getting fulll path of image, but iam unable to convert image to base64 string.
plz help me in this issue.
make sure that iam asking in sencha touch

Answer 1

How do you access the files? Where the images are coming from? If they are from the camera or the photo gallery then Phonegap is the best way to get them. Base64 encoding is solved by PG in that case. If you are trying to solve it in pure js then you need to do some more work on it. Sencha doesn't provide functions for base64 encoding. So the best bet if you add some function to your project. There are lots of resources on the web how to do base64 encoding in javascript. E.g. see the discussion here Base64 encoding and decoding in client-side Javascript

Answer 2

The following code snippet helps you for uploading image and get base64 data uri
In your view you should have the following filefield component of sencha touch
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'filefield',
id: 'idfilefieldSample',
name: 'filefieldSample',
accept: 'image'
},
]
}
});
and your controller look like this:
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control:{
'filefield[name=filefieldSample]': {
change: 'onChangefilefield',
},
}
},
onChangefilefield: function(filefield, newData, oldData, eOpts)
{
var filesSelected = Ext.getCmp('idfilefieldSample').getComponent().input.dom.files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var srcData = fileLoadedEvent.target.result;
console.log(srcData);
}
fileReader.readAsDataURL(fileToLoad);
}
},
});