Results 1 to 6 of 6

Thread: [INFOREQ][3.0.0] Form fileUpload:true and htmlEditor

  1. #1

    Exclamation [INFOREQ][3.0.0] Form fileUpload:true and htmlEditor

    If you put in RTE bold string with " (sdfsdf"sdfsdfsdf) you have error in javascript with return data. There is small workaround.

    There is code of test.html

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/examples/form/file-upload.css" />
    
    
    <script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all-debug.js"></script>
    
    <script type="text/javascript" src="http://extjs.com/deploy/dev/examples/ux/FileUploadField.js"></script>
    <script type="text/javascript">
    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,
            width: 800,
            frame: true,
            title: 'File Upload Form',
            autoHeight: true,
            bodyStyle: 'padding: 10px 10px 0 10px;',
            labelWidth: 160,
            defaults: {
                anchor: '95%',
                allowBlank: false,
                msgTarget: 'side'
            },
            items: [{
                xtype: 'hidden',
                name: 'id'
            },{
                xtype: 'htmleditor',
                fieldLabel: 'RichTextExitor'
            },{
                xtype: 'textfield',
                fieldLabel: 'Name'
            },{
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'Select an image',
                fieldLabel: 'Photo',
                name: 'photo-path',
                buttonText: '',
                buttonCfg: {
                    iconCls: 'upload-icon'
                }
            }],
            buttons: [{
                text: 'Save',
                handler: function(){
                    if(fp.getForm().isValid()){
                      fp.getForm().submit({
                          url: 'save.php',
                          waitMsg: 'Uploading your photo...',
                          success: function(fp, o){
                    	        fp.loadRecord(o.result.data);
                              msg('Success', 'Processed file "'+o.result.file+'" on the server');
                          }
                      });
                    }
                }
            },{
                text: 'Reset',
                handler: function(){
                    fp.getForm().reset();
                }
            }]
        });
    
    });
    </script>
    </head>
    <body>
            <div id="fi-form"></div>
    </body>
    
    </html>

    and save.php

    PHP Code:
    <?php
    $out 
    = array();
    $out['success'] = true;
    $out['data'] = $_POST;
    $out['data']['id'] = 1;

    echo 
    json_encode($out);

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Please post more information, see: http://extjs.com/forum/showthread.php?t=71015
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    Quote Originally Posted by evant View Post
    Please post more information, see: http://extjs.com/forum/showthread.php?t=71015
    What information do you need?
    All css and javascript files loaded from extjs.com.

    Critical error in Ext.decode after parse response from server if "fileUpload: true" (used iframe). If xmlhttp transport using - there is no bug.


    To reproduce this bug
    1. create test.html file from html code.
    2. create save.php file from php code.
    3. upload it to server with php
    4. put in HtmlEditor text simple"text (any bold text with ")
    5. select any file to upload
    6. press save button.

    Browser versions tested against:
    • IE7
    • FF3 (firebug 1.4.0 installed)


    Operating System:
    • WinXP Pro


    The result that was expected:
    • form is not dirty
    • saved data loaded in form as field values


    The result that occurs instead:
    • critical javascript error

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    What are you returning exactly? Show use the exact JSON that you return.

    Do you set the Content-Type header to "text/html"?

  5. #5

    Default

    Problem located in document.iframe and javascript. When you read data from body.innerHtml
    and put it to eval('('+document.innerHtml+')'); and all &quot; converted to " and we have string like {data:{name:"test"word"}}.
    You may see it to do some changes for Ext.decode add console.log(json) to see data before eval and look at the Firebug to see clear response from script.

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The API docs are clear on the fact that you need to HTML encode the JSON data, because it is returned as text/html, e.g.
    Code:
    {data:{name:"test&amp;quot;word";}}
    There is an alternative in Ext 3 if you don't want to HTML encode your response:
    You can return your JSON data as the content of a textarea, e.g.
    Code:
    <html><body><textarea>{data:{name:"test&quot;word"}}</textarea></body></html>

Posting Permissions

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