How to offer files for download?

Question

I have a problem. In my sencha touch application I have list items like .pdf, .png, ... If user taps on one of them file should be download on his mobile device. How can I do this? I have no idea :-)

Thanks for help.

Answer 1

You can use phonegap file api to download files, If you are using sencha touch 2.3 or above just follow the bellow steps.

1. Install phonegap in sencha project by executing following command at the project root and this command creates phonegap folder inside project root.

   sencha phonegap init

2. You need to install two phonegap plugins to work with file api by executing two following commands inside phonegap folder.

   $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

   $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

Now you can start working file api in sencha touch and you can follow below code i used for one of my project.

If you want to download file, first you need to read device file system and then using file system you can download files.

getFileSystem : function(){
    var me =this;
    Ext.Viewport.mask({ 
        xtype: 'loadmask', 
        message: 'Downloading files..' 
    });
    var extfs = Ext.create("Ext.device.filesystem.Cordova");
    extfs.requestFileSystem({
         type: window.PERSISTENT,
         size: 1024 * 1024,
         success: function(fSys) {
             window.fileSys = fSys;
             Ext.Viewport.unmask();
             me.fileDownload("myfolder/filename.png","http://someurl");
         },
         failure: function(error){
            alert(error);
            Ext.Viewport.unmask();
        }      
    });
}

I am passing fileLocation(location you want to store file inside phone) & url in above function.

fileDownload: function(fileLocation,Url){
    Ext.Viewport.mask({ 
        xtype: 'loadmask', 
        message: 'Downloading files..' 
    });
    var me = this;
    var fSys = window.fileSys
    if(fSys){
        var file = Ext.create('Ext.device.filesystem.FileEntry', 
                    fSys.fs.root.toURL() + fileLocation, fSys);
                    
        file.download({
            source: Url,
            success: function(entry){
                Ext.Msg.alert('SUCCESS', 'Image successfully downloaded');
                Ext.Viewport.unmask();
            },
            failure: function(error){
                Ext.Msg.alert('ERROR', 'Download failed');
                Ext.Viewport.unmask();
            }      
        });
    }
}

Now can see image at internalMemorycard/myfolder/filename.png

Sencha docs

Ext.device.filesystem.Cordova

Ext.device.filesystem.FileEntry

---

If you are using sencha touch 2.2 or below only change is instead of using sencha class you need to directly use phonegap api.

For reading file system & File download follow phonegap documentation.