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

andrey.korolyov

27 Jul 2009, 1:01 AM

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

<!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
$out = array();
$out['success'] = true;
$out['data'] = $_POST;
$out['data']['id'] = 1;

echo json_encode($out);

evant

27 Jul 2009, 1:48 AM

Please post more information, see: http://extjs.com/forum/showthread.php?t=71015

andrey.korolyov

27 Jul 2009, 4:15 AM

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

Animal

27 Jul 2009, 5:01 AM

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

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

andrey.korolyov

27 Jul 2009, 5:31 AM

Problem located in document.iframe and javascript. When you read data from body.innerHtml
and put it to eval('('+document.innerHtml+')'); and all " 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.

Condor

27 Jul 2009, 5:44 AM

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.

{data:{name:"test&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.

<html><body><textarea>{data:{name:"test"word"}}</textarea></body></html>