mikrobi / file-uploading-component-for-sencha-touch

Ext.Button based component for uploading files in Sencha Touch apps without page refresh

File uploading component for Sencha Touch

Ext.Button based component for uploading files in Sencha Touch apps

Author: Constantine V. Smirnov, kostysh(at)gmail.com, http://mindsaur.com
License: GNU GPL v3.0
Current version: 2.0
ST2 version: 2.1.1
Sencha Cmd: v3.0.2.288

Versions:

• 2.0
• 1.0.2 Fixed issue with multiple Fileup components on one page
• 1.0.1 Bugs fixes
• 1.0 Initial release

Features:

• Select file from local source
• Load selected file as dataUrl
• Upload selected file to server
• Loading spinner on button
• Uploading progress displayed on badge
• Uploading error handling
• Custom styles for component using SASS

Notes:

This component can works in two modes (switched by loadAsDataUrl config):

1. Load local files as dataUrl. Will be useful if you want to load a local file. For example you can load image and display it inside dom or store it into localStorage.
2. Upload files to server (you should also setup a server part) Current PHP version of server part located in src/php folder (getfile.php)

Server response format (JSON): { success: true,// or false message: ''// error message if success === false }

Component has three states:

1. Browse: Initial state, you can browse and select file
2. Ready: File selected and ready for load or upload
3. Uploading: File loading or uploading in process

You can configure these states (add custom text and styles). Looking for SASS file in src/ux/sass folder.

Installing:

• Place src/php to your server (you can write your own version of this script)
• Place src to your app folder;
• Configure custom path for custom components:

    Ext.Loader.setPath({
        'Ext.ux': '[..path..]src/ux'
    });

• Require Fileup in app.js or inside current view:

    requires: ['Ext.ux.Fileup']

• Insert component into view:

    items: [

        //Fileup configuration for "Load local file" mode
        {
            xtype: 'fileupload',
            autoUpload: true,
            loadAsDataUrl: true,
            states: {
                browse: {
                    text: 'Browse and load'
                },
                ready: {
                    text: 'Load'
                },

                uploading: {
                    text: 'Loading',
                    loading: true// Enable loading spinner on button
                }
            }
        },

        //Fileup configuration for "Upload file" mode
        {
            itemId: 'fileBtn',
            xtype: 'fileupload',
            autoUpload: false,
            url: 'src/php/getfile.php'
        }
    ]

• Enable or disable auto upload of file via component config:

    autoUpload: true,

• Listen for success/failure or loadsuccess/loadfailure events:

    fileBtn.on({
        success: 'yourFileUploadSuccessHandler',
        failure: 'yourFileUploadFailureHandler'
    });

Live demo:

http://mindsaur.com/demo/fileupload