When is a form not a form?

[bimargulies]

I'm trying to use isUpload with Ext.Ajax.request to send a file upload from a form into a service via an iframe.

Here's my form setup:



{
xtype:'form',
title:'Test Form (fileupload) for Document View',
width: '100%',
items:[
{
xtype:'fileuploadfield',
name:'filecontent',
anchor: '100%',
fieldLabel:'File to process'
},
{
xtype: 'hiddenfield',
name: 'plainTextInputOptions'
}
]
}


The resulting HTML is a div element with form-like attributes.



<div class="x-panel x-box-item x-panel-default" style="width: 498px; left: 0px; margin: 0px; top: 121px; height: 83px; " id="form-1014" target="ext-gen1058" method="POST" enctype="multipart/form-data" encoding="multipart/form-data" action="/services/docView/documentViewMultipart">


When I try this out, I get an error, as ext tries to run 'submit' on the div! I am puzzled.


Uncaught TypeError: Object #<HTMLDivElement> has no method 'submit' ext-all-debug-w-comments.js:53952 (http://localhost:9009/libs/extjs-4.1.0/ext-all-debug-w-comments.js)

Ext.define.uploadext-all-debug-w-comments.js:53952 (http://localhost:9009/libs/extjs-4.1.0/ext-all-debug-w-comments.js)
Ext.define.requestext-all-debug-w-comments.js:53825 (http://localhost:9009/libs/extjs-4.1.0/ext-all-debug-w-comments.js)
Ext.create.items.buttons.handlerdoc-view-test.js:104 (http://localhost:9009/js/doc-view-test.js)
Ext.define.fireHandlerext-all-debug-w-comments.js:117445 (http://localhost:9009/libs/extjs-4.1.0/ext-all-debug-w-comments.js)
Ext.define.onClickext-all-debug-w-comments.js:117435 (http://localhost:9009/libs/extjs-4.1.0/ext-all-debug-w-comments.js)
(anonymous function)
Ext.apply.createListenerWrap.wrap

[mitchellsimoens]

With an Ext.form.Panel is rendered, it doesn't contain any <form> elements. It's not till you submit the form does it create the needed elements (<form> for form submit, <iframe> for file upload)

[bimargulies]

So, you can't pass anything created as a form panel to Ext.Ajax.request as a result.

Submit assumes some things about the nature of the data coming back.

[friend]

Note that file uploads are not doable via Ajax, since the underlying XMLHttpRequest knows nothing about multipart/form-data encoding...

However, this may be changing with the advent of the new/improved FileReader API (http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/) support which is showing up in browsers...

[bimargulies]

Ext knows an iframe trick that does Ajax (with some quirks) for file upload.

[friend]

Yeah, I just hate the quirky solutions as I always end up running into edge-cases on different browsers...