Work with files on your device using Sencha Touch 2.3 & Cordova

Sencha Touch is rich in APIs which makes it best HTML5 framework for hybrid mobile application development. Along with this important API for accessing device File System with the leverage of Apache Cordova. There are many other standard APIs available for the storage like localstorage, SQLite which supports many browsers but device File System API are yet to evolve in mobile platform.

In this article we will see how we can use Apache Cordova File API abstraction in Sencha Touch to interact with your  mobile device file system.

Problem Statement

In many mobile native application you might have to interact with native device file system for various purposes like file system, reading the file, downloading the file from remote url, open the file to read, directory listing etc.

In this article we will see how you can use Apache Cordova File API abstraction in Sencha Touch to interact with your  mobile device file system to perform standard following operations:

  • Reading File System
  • Downloading the file from remote url and
  • Open the file with inAppBrowser


  • Sencha Touch development environment (Sencha cmd, Touch SDK ( V – 2.3.X ) etc)
  • NodeJS 10.x
  • Cordova 2.x
  • Android development environment setup
  • Working knowledge of Sencha Touch


 Step 1 : Create a Sencha Touch application using Sencha CMD

Run the following command to generate your Sencha Touch app

sencha –sdk <sdk path> generate app <app-namespace> <app-location>

E.g. sencha –sdk /Users/wtc/sdk/touch-2.3.0  generate app WTC  /Applications/XAMPP/htdocs/STFile

Step 2 : Enable support for Cordova

Now change your directory to your app directory and run the following command

To change the directory to app directory

cd /Applications/XAMPP/htdocs/STFile

To enable support for Cordova

sencha cordova init

 Step 3 : Using Cordova File plugin and InAppBrowser plugin

In order to use the Apache Cordova File API in your app you need to add the Cordova plugin.

To add these plugins change to cordova directory in your app directory.

cd /Applications/XAMPP/htdocs/STFile/cordova

Run the file command to add File plugins

cordova plugin add

cordova plugin add

Run the file command to add inAppBrowser plugin

cordova plugin add

Now we are ready to use the native device file system using the Sencha Touch File API which is Cordova file abstractions

Step 4: Accessing the device File System

Ext.device.FileSystem is singleton class which provides an API to navigate file system hierarchies on your device.

Past following piece of code in launch function in app.js file , which will tell you the file system root path for your device.

Now build the app for native device.

Go to application directory and change the cordova.local.propeties file for Android native package by changing the platform value as below:


Now run the following command from application directory.

sencha app build native

Deploy the .apk file in your emulator or real device to test the app.

You will see following output



Step 4: Download file from remote url and open using inAppBrowser of device

In order to download the remote file and to view you need to do following steps:

  • Get the filesystem instance
  • Get file entry instance for file to be downloaded and
  • download file
  • Open the file using inAppBrowser

Remove the launch function in app.js and copy following code and paste in app.js file


Create an native package and install the package on your device, you will able to see following view.


Tap on Download File to download the file and once file downloaded i.e. you will see an alert ( Note : In application you can show loading indicator as this is just to show the functionality using alert feature ).


Observe the downloaded file in your device file system.


Now to open the downloaded file tap on Open File button to view the file in the device inAppBrowser


Note : If fails to open using inAppBrowser in Android then you need to make some changes to Cordova InAppBrowser plugin as below

cordova/platforms/android/src/org/apache/cordova/inappbrowser/, execute method line no 147, comment out replace with


else part will look as below

Also add following method to the file

There are more APIs available in Sencha Touch to perform additional operations on file and interact with native device file system.


In this article you saw how we can leverage the Apache Cordova FIle API in Sencha Touch and perform different file operations and interact with native device file system, which are common in any enterprise mobile application.


Comments (1)

Excellent tutorial! I am developing an app in Sencha Touch and need exactly such tutorial but as applied to getting the Contacts from the smartphone device. My development environment was set up fine and I added one plugin – cordova contacts plugin, it looks like it was added correctly, but I don’t seem to get any results past step 3. Do you have any tutorials specifically for getting the Contacts? I purchased your Sencha Touch Cookbook Second Edition but the Contacts example there does not use Sencha Touch 2.3 & Cordova, it’s more of a strictly cordova build (this tutorial is perfect for my needs, albeit for file system). The reference to the Sencha API being shown in the “next chapter” is in Chapter 10, the last chapter of the book, so I did not find the Sencha APi example. Any help would be appreciated.

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.