[Beta 1] Saki's FileTree for Ext 2.0

[zombeerose]

I see the confusion - I was basing my changes off the ux code from the Ext 3.0.2 build. Here is the full file including those changes.

/*!
 * Ext JS Library 3.0.2
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.FileUploadField
 * @extends Ext.form.TextField
 * Creates a file upload field.
 * @xtype fileuploadfield
 */
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
    /**
     * @cfg {String} buttonText The button text to display on the upload button (defaults to
     * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
     * value will be used instead if available.
     */
    buttonText: 'Browse...',
    /**
     * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
     * text field (defaults to false).  If true, all inherited TextField members will still be available.
     */
    buttonOnly: false,
    /**
     * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
     * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
     */
    buttonOffset: 3,
    /**
     * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
     */

    // private
    readOnly: true,

    /**
     * @hide
     * @method autoSize
     */
    autoSize: Ext.emptyFn,

    // private
    initComponent: function(){
        Ext.ux.form.FileUploadField.superclass.initComponent.call(this);

        this.addEvents(
            /**
             * @event fileselected
             * Fires when the underlying file input field's value has changed from the user
             * selecting a new file from the system file selection dialog.
             * @param {Ext.ux.form.FileUploadField} this
             * @param {String} value The file value returned by the underlying file input field
             */
            'fileselected'
        );
    },

    // private
    onRender : function(ct, position){
        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);

        this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
        this.el.addClass('x-form-file-text');
        this.el.dom.removeAttribute('name');
        this.createFileInput();

        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
            text: this.buttonText
        });
        this.button = new Ext.Button(Ext.apply(btnCfg, {
            renderTo: this.wrap,
            cls: 'x-form-file-btn' //+ (btnCfg.iconCls ? ' x-btn-icon' : '')
        }));

        if(this.buttonOnly){
            this.el.hide();
            this.wrap.setWidth(this.button.getEl().getWidth());
        }

        this.bindListeners();
        this.resizeEl = this.positionEl = this.wrap;
    },
    
    bindListeners: function(){
        this.fileInput.on({
            scope: this,
            mouseenter: function() {
                this.button.addClass(['x-btn-over','x-btn-focus'])
            },
            mouseleave: function(){
                this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
            },
            mousedown: function(){
                this.button.addClass('x-btn-click')
            },
            mouseup: function(){
                this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
            },
            change: function(){
                var v = this.fileInput.dom.value;
                this.setValue(v);
                this.fireEvent('fileselected', this, v);    
            }
        }); 
    },
    
    createFileInput : function() {
        this.fileInput = this.wrap.createChild({
            id: this.getFileInputId(),
            name: this.name||this.getId(),
            cls: 'x-form-file',
            tag: 'input',
            type: 'file',
            size: 1
        });
    },
    
    reset : function(){
        this.fileInput.remove();
        this.createFileInput();
        this.bindListeners();
        Ext.ux.form.FileUploadField.superclass.reset.call(this);
    },

    /**
     * Detaches the input file without clearing the value so that it can be used for 
     * other purposes (e.g. uploading).
     * 
     * The returned input file has all listeners applied to it by this class removed.
     * @return {Ext.Element} the detached input file element.
     */    
    detachFileInput : function(){
        var result = this.fileInput;
        
        this.fileInput.removeAllListeners();
        this.fileInput = null;        
        this.id = Ext.id(); //avoid dom conflicts
        this.createFileInput();
        this.bindListeners();
        
        return result;
    },
    
    /**
     * @return {Ext.Element} the input file element
     */
    getFileInput: function(){
        return this.fileInput;
    },  
    
    // private
    getFileInputId: function(){
        return this.id + '-file';
    },

    // private
    onResize : function(w, h){
        Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);

        this.wrap.setWidth(w);

        if(!this.buttonOnly){
            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
            this.el.setWidth(w);
        }
    },

    // private
    onDestroy: function(){
        Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
        Ext.destroy(this.fileInput, this.button, this.wrap);
    },
    
    onDisable: function(){
        Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
        this.doDisable(true);
    },
    
    onEnable: function(){
        Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
        this.doDisable(false);

    },
    
    // private
    doDisable: function(disabled){
        this.fileInput.dom.disabled = disabled;
        this.button.setDisabled(disabled);
    },


    // private
    preFocus : Ext.emptyFn,

    // private
    alignErrorIcon : function(){
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    }

});

Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;

I don't know if the CSS also changed so let me know and I could post that if necessary.

[Stephan Schrade]

Thanks very much, that was a quick answer
I did update my whole project to 3.0.2 now.
(and experienced some issues with statusbar because the location of files did change, but thats another story )

Now it looks like the upload panel works.

But I should know how the server has to react.
As I'm using the upload panel by its own (rather than within the filetree) I can't find any documentation about this.
Perhaps you know an example somewhere (I'm running php on the server).

Many Thanks,
Stephan

[Stephan Schrade]

I managed to get the whole panelupload running (without filetree) with ExtJs3.0
with all your help here, thanks very much.

@Saki:
May I suggest one extension:
Is it possible to have an event raised at the end of all uploads ?
So that I can make a refresh of the underlying element (in my case a grid).
Otherwise the user may be wondering where alle the files are.

CU Stephan

[fermo111]

Excellent. The menu.render() actually goes in FileTreePanel.js - after the line (1467)

menu.getItemByCmd('sep-collapse').setVisible(this.enableNewDir || this.enableDelete || this.enableRename);

Now the menu renders - however, the upload panel within the menu is missing. The upload panel shows - but theres no buttons, or anything inside, as if it were blank.

I'll see if I can do some more investigating myself.

I have added the line in red in the UploadPanel.js and it seems to fix it.

	,onRender:function() {
		// call parent
		Ext.ux.UploadPanel.superclass.onRender.apply(this, arguments);
		this.getTopToolbar().doLayout(false, true);

		// save useful references
		var tb = 'tbar' === this.buttonsAt ? this.getTopToolbar() : this.getBottomToolbar();
		this.addBtn = Ext.getCmp(tb.items.first().id);
		this.uploadBtn = Ext.getCmp(tb.items.itemAt(1).id);
		this.removeAllBtn = Ext.getCmp(tb.items.last().id);
	} // eo function onRender
	// }}}

[calavera]

Does this work with ExtJS 3 ?

[--maty]

My issue is not really related to Saki's upload panel but anyways... i'm trying to create my own much more simple but a bit specific fileupload panel based on jsakalos code, using Ext.ux.form.FileUploadField instead of Ext.ux.BrowseButton by loeppky. The filebutton has been created before going to a panel's toolbar, something like that:

var fbutton = {
  buttonCfg: {
    hideLabel: true
    ,iconCls:'save'
  }
  ,buttonText:'Add file...'
  ,buttonOnly: true //no textfield
  ,listeners: {
                fileselected: {fn:this.onAddFile, scope:this}
  }
  ,style: { display: 'none' } //IE hack - can't use visibility b/c IE buffers the space
  ,xtype:'fileuploadfield'
};

...

tbar:[fbutton,,'->',yetAnotherClearAllButton]

So the button text and icon appears in the toolbar but looks like it's not the button. Just a label. It has no borders and cursor remain the same instead of being pointer. But it works when you click on it...
Looks like the fileupload css has missing a class for toolbar buttons or maybe it's me who missing how to properly put the fileupload button into the toolbar. Any ideas?
P.S. Ext 2.1

[slacker775]

I see the confusion - I was basing my changes off the ux code from the Ext 3.0.2 build. Here is the full file including those changes.

I don't know if the CSS also changed so let me know and I could post that if necessary.

Incorporating all of these bits to make this work with Ext 3.0 is almost working for me. If I do not incorporate the FileUploadField, it sort-of works but when I add a file, the window doesn't expand to display the file and it's transfer status. I can upload however. If I try to use FileUploadField, The window ends at the 'Upload file' button. Nothing appears underneath.

I suspect that it's either my FileTreeMenu or my UploadPanel that is missing something. Any suggestions?

[gnomie]

Stephan,

would you mind sharing the FileUploadField.js and the UploadPanel.js you ended up with? In my case, on Extjs 3.0.0. I do not seem to get that <input type="file"> hidden. I.e. it is still showing up, while the upload panel technically works (i.e. it's all fine but that stupid input field). Is there anything in the style sheets I am missing?

Thanks,
henning

[gnomie]

Got it fixed: Didn't have fileuploadfield.css. Btw. I believe there is a bug in FileUploader. In FileUploader.uploadCallback, line 581, it says:

// process command failure
else {
this.processFailure(options, response, o);
}

As o is the decoded response, potentially having the properties error and success, it should actually be

// process command failure
else {
this.processFailure(options, response, o.error);
}

as processFailure expects the actual error message as its third parameter.

Thanks,
Henning

[slacker775]

Ok, using Ext 3.0.3 and FileUploadField from 3.0.3 with the two added methods, the successful upload JSON response is not being handled properly. The file is uploaded, and the backend is returning '{"success":true}' but uploadCallback just isn't handling it properly. I've thrown some console.log() calls in uploadCallback and I've found that the "If(true === o.success)" winds up false, so it winds up calling processFailure as a command failure.

Any ideas as to what is borked?