Pavel Benes
4 Dec 2009, 2:10 AM
Ext version tested:
Ext 3.0 rev 3
Adapter used:
ext
css used:
only default ext-all.css
Browser versions tested against:
Opera 10.10
Operating System:
Windows 7
Mac OS X 10.5.8
Description:
It's not possible upload file in Opera
related thread: http://www.extjs.com/forum/showthread.php?t=76229
Test Case:
Ext.onReady(function() {
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
url: 'mockup-target.html',
fileUpload: true,
buttons: [
{
text: 'Submit',
handler: function() {
form.getForm().submit({
waitMsg: 'File is being uploaded...',
success: function(form, action) {
alert('Success: "' + action.result.file + '"');
},
failure: function(form, action) {
alert('Failure: ' + action.response.responseText);
},
scope: this
});
}
}
],
items: [
{
xtype: 'component',
autoEl: {
name: 'file',
tag: 'input',
type: 'file'
}
}
]
});
});
mockup-target.html:
<html><body>{"success":true,file:"albert.jpg"}</body></html>
Steps to reproduce the problem:
open test case in Opera
upload any file
The result that was expected:
File will be uploaded
Message with text: 'Success: "albert.jpg"'
The result that occurs instead:
ulpoad freezes
Possible fix:
Opera throws event load before sending of hidden frame. First event doesn't contain any text, so we can filter it.
Ext.override(Ext.data.Connection, {
// private
doFormUpload : function(o, ps, url){
var id = Ext.id(),
doc = document,
frame = doc.createElement('iframe'),
form = Ext.getDom(o.form),
hiddens = [],
hd,
encoding = 'multipart/form-data',
buf = {
target: form.target,
method: form.method,
encoding: form.encoding,
enctype: form.enctype,
action: form.action
};
Ext.fly(frame).set({
id: id,
name: id,
cls: 'x-hidden',
src: Ext.SSL_SECURE_URL // for IE
});
doc.body.appendChild(frame);
// This is required so that IE doesn't pop the response up in a new window.
if(Ext.isIE){
document.frames[id].name = id;
}
Ext.fly(form).set({
target: id,
method: 'post',
enctype: encoding,
encoding: encoding,
action: url || buf.action
});
// add dynamic params
Ext.iterate(Ext.urlDecode(ps, false), function(k, v){
hd = doc.createElement('input');
Ext.fly(hd).set({
type: 'hidden',
value: v,
name: k
});
form.appendChild(hd);
hiddens.push(hd);
});
function cb(){
var me = this,
// bogus response object
r = {responseText : '',
responseXML : null,
argument : o.argument},
doc,
firstChild;
try{
doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
if(doc){
if(doc.body){
if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ // json response wrapped in textarea
r.responseText = firstChild.value;
}else{
r.responseText = doc.body.innerHTML;
}
}
//in IE the document may still have a body even if returns XML.
r.responseXML = doc.XMLDocument || doc;
}
}
catch(e) {}
if (r.responseText.length === 0) {
return;
}
Ext.EventManager.removeListener(frame, 'load', cb, me);
me.fireEvent("requestcomplete", me, r, o);
function runCallback(fn, scope, args){
if(Ext.isFunction(fn)){
fn.apply(scope, args);
}
}
runCallback(o.success, o.scope, [r, o]);
runCallback(o.callback, o.scope, [o, true, r]);
if(!me.debugUploads){
setTimeout(function(){Ext.removeNode(frame);}, 100);
}
}
Ext.EventManager.on(frame, 'load', cb, this);
form.submit();
Ext.fly(form).set(buf);
Ext.each(hiddens, function(h) {
Ext.removeNode(h);
});
}
});
Ext 3.0 rev 3
Adapter used:
ext
css used:
only default ext-all.css
Browser versions tested against:
Opera 10.10
Operating System:
Windows 7
Mac OS X 10.5.8
Description:
It's not possible upload file in Opera
related thread: http://www.extjs.com/forum/showthread.php?t=76229
Test Case:
Ext.onReady(function() {
var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
url: 'mockup-target.html',
fileUpload: true,
buttons: [
{
text: 'Submit',
handler: function() {
form.getForm().submit({
waitMsg: 'File is being uploaded...',
success: function(form, action) {
alert('Success: "' + action.result.file + '"');
},
failure: function(form, action) {
alert('Failure: ' + action.response.responseText);
},
scope: this
});
}
}
],
items: [
{
xtype: 'component',
autoEl: {
name: 'file',
tag: 'input',
type: 'file'
}
}
]
});
});
mockup-target.html:
<html><body>{"success":true,file:"albert.jpg"}</body></html>
Steps to reproduce the problem:
open test case in Opera
upload any file
The result that was expected:
File will be uploaded
Message with text: 'Success: "albert.jpg"'
The result that occurs instead:
ulpoad freezes
Possible fix:
Opera throws event load before sending of hidden frame. First event doesn't contain any text, so we can filter it.
Ext.override(Ext.data.Connection, {
// private
doFormUpload : function(o, ps, url){
var id = Ext.id(),
doc = document,
frame = doc.createElement('iframe'),
form = Ext.getDom(o.form),
hiddens = [],
hd,
encoding = 'multipart/form-data',
buf = {
target: form.target,
method: form.method,
encoding: form.encoding,
enctype: form.enctype,
action: form.action
};
Ext.fly(frame).set({
id: id,
name: id,
cls: 'x-hidden',
src: Ext.SSL_SECURE_URL // for IE
});
doc.body.appendChild(frame);
// This is required so that IE doesn't pop the response up in a new window.
if(Ext.isIE){
document.frames[id].name = id;
}
Ext.fly(form).set({
target: id,
method: 'post',
enctype: encoding,
encoding: encoding,
action: url || buf.action
});
// add dynamic params
Ext.iterate(Ext.urlDecode(ps, false), function(k, v){
hd = doc.createElement('input');
Ext.fly(hd).set({
type: 'hidden',
value: v,
name: k
});
form.appendChild(hd);
hiddens.push(hd);
});
function cb(){
var me = this,
// bogus response object
r = {responseText : '',
responseXML : null,
argument : o.argument},
doc,
firstChild;
try{
doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
if(doc){
if(doc.body){
if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ // json response wrapped in textarea
r.responseText = firstChild.value;
}else{
r.responseText = doc.body.innerHTML;
}
}
//in IE the document may still have a body even if returns XML.
r.responseXML = doc.XMLDocument || doc;
}
}
catch(e) {}
if (r.responseText.length === 0) {
return;
}
Ext.EventManager.removeListener(frame, 'load', cb, me);
me.fireEvent("requestcomplete", me, r, o);
function runCallback(fn, scope, args){
if(Ext.isFunction(fn)){
fn.apply(scope, args);
}
}
runCallback(o.success, o.scope, [r, o]);
runCallback(o.callback, o.scope, [o, true, r]);
if(!me.debugUploads){
setTimeout(function(){Ext.removeNode(frame);}, 100);
}
}
Ext.EventManager.on(frame, 'load', cb, this);
form.submit();
Ext.fly(form).set(buf);
Ext.each(hiddens, function(h) {
Ext.removeNode(h);
});
}
});