Using kostysh/File-uploading-component-for-Sencha-Touch in Architect

[lucapale]

Hi Everybody,
I have tried to use the component kostysh/File-uploading-component-for-Sencha-Touch (you can download it from github) inside an Architect app.
The first trial has been to import the resource Fileup.js and hack the code to insert the related item into a form:

{
        id: 'fileBtn',
        xtype: 'fileupload',
        iconCls: 'download',
        iconMask: true,
        text: 'File dialog',
        padding: 20,
        actionUrl: 'resources/php/getfile.php',// Url of getfile.php
        returnBase64Data: true,
		returnUrl: true,
		autoUpload: false
}

This works and I can get the file uploaded, but it's not really the best solution, since I must every time manually change the code before running it, since I cannot insert such component directly in Architect.

The second trial has been to create a component inside Architect and place it in the toolbox. Enclosed the related file. The problem here is that I don't find a way to set the template of the element, which breaks of course all the code:

template: [
        
        // Default button elements (do not change!)
        {
            tag: 'span',
            reference: 'badgeElement',
            hidden: true
        },
        {
            tag: 'span',
            className: Ext.baseCSSPrefix + 'button-icon',
            reference: 'iconElement',
            hidden: true
        },
        {
            tag: 'span',
            reference: 'textElement',
            hidden: true
        },
        
        // Custom inline elements
        {
            tag: 'iframe',
            reference: 'iframeElement',
            height: 0,
            width: 0,
            frameborder: 0,
            name: 'fileUploadIframe',
            loading: 0
        },
        {
            tag: 'form',
            reference: 'formElement',
            target: 'fileUploadIframe',
            method: 'post',
            enctype: 'multipart/form-data',
            action: null,
            hidden: false,            
            
            children: [
                {
                    tag: 'input',
                    reference: 'base64CommandElement',
                    type: 'hidden',
                    name: 'base64',
                    value: false,
                    tabindex: -1
                },
                {
                    tag: 'input',
                    reference: 'urlCommandElement',
                    type: 'hidden',
                    name: 'url',
                    value: false,
                    tabindex: -1
                },
                {
                    tag: 'input',
                    reference: 'fileElement',
                    type: 'file',
                    name: 'userfile',
                    tabindex: -1,
                    hidden: false,
                    style: 'opacity:0;position:absolute;height:100%;width:100%;left:0px;top:0px;'
                }
            ]
        }
    ],

Any suggestion?
Thanks
Luca

[lucapale]

For those of you interested the solution for me has been to include the Fileup.js in the resources and add programmatically the xtype: 'fileupload' when initialising the form:

onAddMediaFormInitialize: function(component, options) {
        var mediaFile = component.child('#mediaFileData');
        mediaFile.add({
            xtype: 'fileupload',
            actionUrl: 'getfile.php',
            returnBase64Data: false,
            returnUrl: false,
            autoUpload: false,
            hidden: true,
            id: 'fileBtn',
            ui: 'action',
            iconCls: 'download',
            iconMask: true,
            text: 'File dialog'
        });
    }

Bye,
Luca