Clear Up
SharpKit Reference

File Class

A file upload field which has custom styling and allows control over the button text and other features of text fields like empty text. It uses a hidden file input element behind the scenes to allow user selection of a file and to perform the actual upload during form submit.

Because there is no secure cross-browser way to programmatically set the value of a file input, the standard Field setValue method is not implemented. The getValue method will return a value that is browser-dependent; some have just the file name, some have a full path, some use a fake path.

IMPORTANT: File uploads are not performed using normal 'Ajax' techniques; see the description for Ext.form.Basic.hasUpload for details.

Example Usage

  
    Ext.create('Ext.form.Panel', {
            title: 'Upload a Photo',
            width: 400,
            bodyPadding: 10,
            frame: true,
            renderTo: Ext.getBody(),
            items: [{
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: 'Photo',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select Photo...'
            }],
            buttons: [{
            text: 'Upload',
            handler: function() {
            var form = this.up('form').getForm();
            if(form.isValid()){
            form.submit({
            url: 'photo-upload.php',
            waitMsg: 'Uploading your photo...',
            success: function(fp, o) {
            Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
            }
            });
            }
            }
            }]
            });
            

Namespace: Ext.form.field

Constructors

Properties

Name Description
button A reference to the trigger Button component created for this upload field. Only populated after this component is rendered.
fileInputEl A reference to the invisible file input element created for this upload field. Only populated after this component is rendered.

Fields

Name Description
buttonConfig A standard Ext.button.Button config object.
buttonMargin The number of pixels of space reserved between the button and the text field. Note that this only applies if buttonOnly = false. Defaults to: 3
buttonOnly True to display the file upload field as a button with no visible text field. If true, all inherited Text members will still be available. Defaults to: false
buttonText The button text to display on the upload button. Note that if you supply a value for buttonConfig, the buttonConfig.text value will be used instead if available. Defaults to: "Browse..."

Methods

Name Description
getTriggerMarkup() Gets the markup to be inserted into the subTplMarkup.
setValue() Overridden to do nothing Overrides: Ext.form.field.Text.setValue
© Copyright 2005-2011 SharpKit. All rights reserved.