Results 1 to 8 of 8

Thread: FormPanel file upload issue in IE6~8

  1. #1
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666

    Exclamation FormPanel file upload issue in IE6~8

    First, Please accept my apologies for this rather long post...

    I'm trying to trace down my problem in IE... Currently I have a simple test code that I'm testing... While it works perfectly in FF2&3, IE seems to choke. JSlint shows nothing unusual and I have yet to find a definite solution through my googling...




    This is essentially a modification of the file-upload and forms examples... Basically, IE says "Object doesn't support this property or method" ext-all-debug.js, line 5517 character 13...
    Syntax error ext-all-debug.js, line 7172 character 9
    'success' is null or not an object ext-all-debug.js, line 31432 character 9
    'result.success' is null or not an object file-upload.js, line 137 character 9
    'result.file' is null or not an object file-upload.js, line 138 character 9
    'result.error' is null or not an object file-upload.js, line 140 character 10
    Object doesn't support this property or method ext-all-debug.js, line 5517 character 13
    Syntax error ext-all-debug.js, line 7172 character 9
    'success' is null or not an object ext-all-debug.js, line 31432 character 9
    'result.success' is null or not an object file-upload.js, line 137 character 9
    'result.file' is null or not an object file-upload.js, line 138 character 9
    'result.error' is null or not an object file-upload.js, line 140 character 10


    The code it refers to is from the EXTjs-2.2.1 edition:
    Code:
       doFormUpload : function(o, ps, url){
            var id = Ext.id();
            var frame = document.createElement('iframe');
            frame.id = id;
            frame.name = id;
            frame.className = 'x-hidden';
            if(Ext.isIE){
                frame.src = Ext.SSL_SECURE_URL;
            }
            document.body.appendChild(frame);
    
            if(Ext.isIE){
               document.frames[id].name = id;
            }
    
            var form = Ext.getDom(o.form);
            form.target = id;
            form.method = 'POST';
            form.enctype = form.encoding = 'multipart/form-data';
            if(url){
                form.action = url;  // this is where IE CHOKES!!!
            }
    
            var hiddens, hd;
            if(ps){ // add dynamic params
                hiddens = [];
                ps = Ext.urlDecode(ps, false);
                for(var k in ps){
                    if(ps.hasOwnProperty(k)){
                        hd = document.createElement('input');
                        hd.type = 'hidden';
                        hd.name = k;
                        hd.value = ps[k];
                        form.appendChild(hd);
                        hiddens.push(hd);
                    }
                }
            }
    The part I have highlighted in purple is where IE chokes. I've tried this in IE 6, 7, and 8. But of coarse, FF2 and FF3 perform perfectly!
    I traced the stack and I see that both form.action and url are string types. I'm scratching my head as to why this error is popping up... I don't see a scope issue nor is this a callback issue... I must be missing something...




    My PHP code [handles the file upload] is as follows... I'm certain my problem is not the PHP code...
    PHP Code:
    /*
    * sFTP -- fileUpload.php v1.0
    * design & coded by Richie Bartlett
    * code Date: May 2009
    */
    /************************************************************************/
    //error_reporting(E_ERROR | E_PARSE); //limit error output
    error_reporting(E_ALL); //limit error output
    require_once("config.php");

    $phpV=(float) substr(phpversion(),0,strpos(phpversion(), '.',2));

    //if(version_compare(PHP_VERSION, '5.2.0', '>')) {
    if($phpV>=5.2){
        
    mb_internal_encoding("UTF-8");// add support for Asian languages
    }//end if PHP is too old

    ///////////////////////////////////////////////////////////////////
    header("Content-Type: text/html; charset=utf-8");
    $fcDescript htmlspecialchars(addslashes(strip_tags(urldecode($_REQUEST['fcDescript']))),ENT_NOQUOTES"UTF-8");
    $action=htmlspecialchars(addslashes(strip_tags(urldecode($_REQUEST['action']))),ENT_NOQUOTES"UTF-8");

    $requiredFileType="/\.(zip|tar|gz|gzip|exe|doc|docx|xls|mpp|vsd|mpt|jpg)$/";
    $fileTypeErrMsg "Compressed Zip or Microsoft ";
    $maxFileUploadSize=((int) ini_get('upload_max_filesize'))*1048576;//post_max_size
    $uploaded=false;
    $TheFileName $_FILES['file-path']['name'];
    $TempName $_FILES['file-path']['tmp_name'];
    $uploaded=is_uploaded_file($TempName);//2nd security check -- guards against hacks
    $response "";

    if(
    $_FILES['file-path']['size'] > $maxFileUploadSize){ 
        
    $response "{success:false, error:\"The file you tried to upload is larger than ".$maxFileUploadSize."MB, please reduce it's size or try another file.<br />maxFileUploadSize=$maxFileUploadSize<br />".addslashes(json_encode($_POST))."<br>".addslashes(json_encode($_FILES))."\"}";
    //|| !$uploaded
    }elseif(!preg_match($requiredFileTypestrtolower($TheFileName)) ){ //must be valid
        
    if(file_exists($TheFileName)) @unlink($TheFileName); //clean it up!
        
    if(file_exists($TempName)) @unlink($TempName); //clean it up!
        
    $response "{success:false, error:\"The file (".$TheFileName.") you tried to upload wasn't a valid $fileTypeErrMsg file.\"}"
    }else{
    //good file
    //TODO: need to check filename for existing file in target directories! if exist rename to userFileName.sessionID
        
    copy($TempName$site["uploadDir"].$TheFileName);//for later retrieval
        
    if(file_exists($TempName)) @unlink($TempName); //clean it up!
        
    $response"{success:true,file:\"".$TheFileName."\", fsize: ".$_FILES['file-path']['size'].", ftmp: \"".$TempName."\"}";
    }
    //end if !requiredImageFileType


        
    header("Content-Length: ".strlen($response));
        echo 
    $response
    EXTjs file (presentation layer and basic logic)...
    Code:
    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * [email protected]
     * 
     * http://extjs.com/license
     */
    
    var MAX_FILE_SIZE=134217728;
    
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
        
        var msg = function(title, msg){
            Ext.Msg.show({
                title: title, 
                msg: msg,
                minWidth: 200,
                modal: true,
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        };
        
    
        var fp = new Ext.FormPanel({
            renderTo: 'fi-form',
            fileUpload: true,
            frame: true,
            labelAlign: 'top',
            formId: 'MLJexe',
            title: 'Secure UpLoad form',
            bodyStyle: 'padding: 10px 10px 0 10px;',
            width: 600,
            items: [{
                layout:'column',
                border:false,
                items:[
                    new Ext.form.Hidden({id:'op',name: 'op',value: 'createXML'}),
                    new Ext.form.Hidden({id:'MAX_FILE_SIZE',name: 'MAX_FILE_SIZE',value: MAX_FILE_SIZE}) //limit the file upload size...
                ,{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        allowBlank:false,
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        allowBlank:false,
                        anchor:'95%'
                    }]
                }]
            },{
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'Select a File',
                fieldLabel: 'File to Upload',
                name: 'file-path',
                   labelWidth: 150,
                   width: 400,
                allowBlank:false,
                buttonCfg: {
                    text: '',
                    iconCls: 'upload-icon'
                }
            },{
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                height:235,
                defaults:{bodyStyle:'padding:10px'},
                items:[{
                    title:'MLJ Contact Details',
                    layout:'form',
                    defaults: {width: 400},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: ' '
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: ''
                    },{
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    cls:'x-plain',
                    title:'File Contents Description',
                    layout:'fit',
                    items: {
                        xtype:'htmleditor',
                        id:'fcDescript',
                        fieldLabel:'File_Description'
                    }
                }]
            }],
    
            buttons: [{
                text: 'Upload',
                handler: function(){
                    try{
                    if(fp.getForm().isValid()){
                        fp.getForm().submit({
                            url: 'fileUpload.php',
                            waitMsg: 'Uploading your file...',
                            success: function(fp, o){
                                    if(o.result.success==true){
                                    msg('Success', 'Processed file "'+o.result.file+'" ('+o.result.fsize+' bytes) on the server'); 
                                    }else{
                                        msg('Error', o.result.error);
                                    }
                            },
                            failure: function(fp, o){
                                try{ msg('Error', o.result.error); }catch(e){}
                            }
                        });
                    }//end if
                    }catch(e){}
                }
            },{
                text: 'Reset',
                handler: function(){
                    fp.getForm().reset();
                }
            }]
        });//end fp = new Panel
    
    
    
    
    });//end EXT.onReady()
    Here is the base page that calls all the code...
    PHP Code:
    <?PHP
    //load global vars...
    require_once("config.php");

    $action=htmlspecialchars(addslashes(strip_tags(urldecode($_REQUEST['op']))),ENT_NOQUOTES"UTF-8");

    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <HEAD>
    <TITLE><?PHP
     
    echo "$site[title] - [$site[type]]"
    ?></TITLE>
    <HEAD>
    <!-- META http-equiv="Content-Type" content="text/html; charset="ISO-8859-1" / -->
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <META http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <META http-equiv="PRAGMA" content="NO-CACHE">
    <META http-equiv="EXPIRES" content="Mon, 22 Jul 2002 11:12:01 GMT">
    <META http-equiv="imagetoolbar" content="no">
    <LINK rel="shortcut icon" href="http://www.jackslocum.com/favicon.ico" />
    <LINK rel="icon" href="http://www.jackslocum.com/favicon.ico" />
    <META name="GOOGLEBOT" content="NOARCHIVE"> 
    <META name="ROBOTS" content="NONE">

    <SCRIPT language="javascript" type="text/javascript"><!--

    var MAX_FILE_SIZE=1;

    function browserCheck(){
        document.getElementById("noScript").style.visibility="hidden";
        document.getElementById("noScript").style.position="absolute";
        document.getElementById("htmlBody").style.visibility="visible";

        try{
            MAX_FILE_SIZE=<?PHP echo $site['max_file_size']; ?>;
            EXT.getCmp("MAX_FILE_SIZE").value=MAX_FILE_SIZE;
        }catch(e){}
    }//end function browserCheck
    //-->
    </SCRIPT>

        <LINK rel="stylesheet" type="text/css" href="EXTjs/resources/css/ext-all.css" />
        <SCRIPT type="text/javascript" src="EXTjs/adapter/ext/ext-base.js"> </SCRIPT>
        <SCRIPT type="text/javascript" src="EXTjs/ext-all-debug.js"> </SCRIPT>

        <LINK rel="stylesheet" type="text/css" href="file-upload.css"/>
        <SCRIPT type="text/javascript" src="JavaScripts/FileUploadField.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="JavaScripts/file-upload.js"></SCRIPT>

        <STYLE>
            .upload-icon {
                background: url('EXTjs/examples/shared/icons/fam/image_add.png') no-repeat 0 0 !important;
            }
        </STYLE>

    </HEAD>
    <BODY SCROLL="no" onLoad="javascript: browserCheck();">

    <DIV id="noScript" style="border:none; z-index:1; visibility: visible;">
    <H2>This site requires Javascript to function properly.<BR>Please check your settings and enable javascript.</H2></DIV>
    <DIV id="htmlBody" style="border:none; z-index:2; visibility: hidden;">
    <!-- Javascript test passed...<br -->
    <?php
    //echo "<br><BR>Current PHP version: " . phpversion();
    echo "\n<BR><BR> Your maximum file upload size : $site[max_file_size] bytes\n";
    //echo "\n<BR> Your uploadDir : $site[uploadDir] \n";
    ?>
        <DIV id="fi-form"></DIV>
    </DIV>

    </BODY></HTML>
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...

    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.

    ================================================
    Simple. Enjoy.

  2. #2
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666

    Default

    I'll see if I can get this loaded later tonight on my public server... At the moment, this is hosted on a private lan...
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...

    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.

    ================================================
    Simple. Enjoy.

  3. #3
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666

    Default

    Here is my public testing site for the above code:

    http://lorezyra.com/sFTP/secureUpload.php
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...

    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.

    ================================================
    Simple. Enjoy.

  4. #4
    Ext User
    Join Date
    Mar 2009
    Location
    Ljubljana, Slovenia
    Posts
    3

    Post

    Hey. I have the same problem for some time and I haven't come up with the solution yet.

    I have just opened your script on the url you have provided and I get no error in IE. Maybe you already fixed the problem? Can you post the solution here?

    thnx

  5. #5
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666

    Default

    First, I reloaded the entire EXTjs lib from source to the server and I changed the form input name/id to follow the javascript naming convention for vars (no "-" in name). That seemed to fix my issue.

    Another thing I changed: made sure the encoding that I used to save the files to the server was UTF8.
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...

    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.

    ================================================
    Simple. Enjoy.

  6. #6
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 千葉
    Posts
    666

    Default

    BTW, I would call this SOLVED.
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...

    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.

    ================================================
    Simple. Enjoy.

  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    54

    Default

    i'm having the same problem but only when i test the code on a server. in localhost everything works fine. when i check the uploads folder in server the file is there but it doesn't show the message box that file has been uploaded correctly and the whole site is inactive because of uploading progress bar not stopping. anyone having any idea on how to solve it?

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    5

    Default

    I have been having this same problem, and I think I found the real issue. I had a field with the name action in it. When ExtJS is trying to submit the form, it makes the form.action = url call. The problem is, the syntax form.action in IE mean get me the field in form form with the name action. If that doesn't work, get me the attribute action on form. This is where I was getting hung up. In the previous code, although I don't see an "action" as a field, I see it being requested in the PHP file which to me means that it was a field on the form. I hope this helps.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •