1. #1
    Ext User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    jake2891 is on a distinguished road

      0  

    Default file upload problem

    file upload problem


    Hi guys, I have been looking at example on the net of how to do a file upload form. All the example i have found seem to be the same. However whenever i sumbit the form i keep getting the same error and have no idea why. any help would be greatly appreciated. thanks..

    syntax error
    [IMG]chrome://firebug/content/blank.gif[/IMG]()
    ext-all-debug.js (line 7389)

    The file however does get uploaded. One thing i noticed is that if i take out the fileUpload:true, no errors happen and i receieve the post data except the files data.

    Here is the code from the internet i have been using.

    fileupload.js

    Ext.onReady(function(){



    function creat_file_upload(){

    FileNameField = new Ext.form.TextField({
    id: 'file_name',
    name: 'file_name',
    fieldLabel: 'File name',
    allowBlank: true,
    width:180
    });

    FileField = new Ext.form.FileUploadField({
    id: 'file_content',
    name: 'file_content',
    fieldLabel: 'File',
    width:250
    });



    var fp = new Ext.FormPanel({
    //standardSubmit: true,
    fileUpload: true,
    labelWidth: 75,
    frame:true,
    title: 'Upload File',
    bodyStyle:'padding:5px 5px 0',
    iconCls:'upload-icon',
    width: 350,
    autoHeight:true,
    items:[
    {layout:'form',items:[FileNameField]},
    {layout:'form',items:[FileField]}

    ],
    buttons: [{
    text: 'Save',
    handler: function(){
    if(fp.getForm().isValid()){
    fp.getForm().submit({
    url: 'testupload.php',
    waitMsg: 'Uploading your file...',
    success: function(fp, o){
    Ext.MessageBox.alert('Upload OK','Your file was uploaded successfully..');

    },
    failure: function(fp, o){
    Ext.MessageBox.alert('Error','There was a problem uploading your file...');
    }
    });
    }
    }
    },{
    text: 'Reset',
    handler: function(){
    fp.getForm().reset();
    }
    }]

    });


    win_upload_file = new Ext.Window({
    id:'create',
    layout:'fit',
    draggable:false,
    resizable : false,
    modal:true,
    width:400,
    plain: false,
    closable: true,
    items:[fp]
    });

    win_upload_file.show();


    }


    Ext.get('btn_upload').on('click', function(){
    creat_file_upload()});


    });



    fileuploadfield.js

    Ext.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.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.form.FileUploadField} this
    * @param {String} value The file value returned by the underlying file input field
    */
    'fileselected'
    );
    },

    // private
    onRender : function(ct, position){
    Ext.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.fileInput = this.wrap.createChild({
    id: this.getFileInputId(),
    name: this.name||this.getId(),
    cls: 'x-form-file',
    tag: 'input',
    type: 'file',
    size: 1
    });

    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.fileInput.on('change', function(){
    var v = this.fileInput.dom.value;
    this.setValue(v);
    this.fireEvent('fileselected', this, v);
    }, this);
    },

    // private
    getFileInputId: function(){
    return this.id+'-file';
    },

    // private
    onResize : function(w, h){
    Ext.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
    preFocus : Ext.emptyFn,

    // private
    getResizeEl : function(){
    return this.wrap;
    },

    // private
    getPositionEl : function(){
    return this.wrap;
    },

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

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

  2. #2

Thread Participants: 1