PDA

View Full Version : Using Ext.Ajax.request() with file upload field



tm8747a
15 Apr 2013, 3:25 PM
How can I use the Ext.Ajax.request() method with a file field? I know that I can set isUpload and form in the config option, but I don't have a form element to pass to form. I have a Ext.form.Panel, but when I inspect the DOM with Firebug it doesn't seem like that generates any <form> element on the page. And, for reasons I won't get into, I don't want to use the submit() method of the form Panel if I can avoid it. Any ideas?

tm8747a
16 Apr 2013, 5:44 AM
After doing a bit of digging, and with a little help from the Ext JS source code, I figured out how to do it. I had figured I could dynamically create the form element and add the file fields to it, but I wasn't having any luck doing that. Then I checked out the ExtJS source code and saw I had to use the extractFileInput() method of the file field to get it to insert properly. So in the end, it's something like this, assuming you have an array of file fields named "fileFields" you need submitted:



var time = new Date().getTime();
var formId = 'fileupload-form-' + time;
var formEl = Ext.DomHelper.append(Ext.getBody(), '<form id="'+options.form+'" method="POST" enctype="multipart/form-data" class="x-hide-display"></form>');
Ext.each(fileFields, function(fileField) {
formEl.appendChild(fileField.extractFileInput());
});


Then you just need to run your Ajax request passing it isUpload: true and form: formId and you're good to go.

Leshicus
14 Nov 2013, 5:56 AM
Thanks, your only variant helped me, althought I had seen tons of them.
Here is mine full decision:

filefield button in grid view:

items:[
{
xtype: 'filefield',
name: 'import',
itemId: 'import',
buttonOnly: true,
msgTarget: 'side',
anchor: '100%',
buttonConfig: {
text: '????????',
iconCls: 'icon_import'
}
}
]

controller:


'gridQuestion filefield': {
change: function (field, value, eOpts) {

var time = new Date().getTime();
var formId = 'fileupload-form-' + time;
var formEl = Ext.DomHelper.append(Ext.getBody(), '<form id="' + formId + '" method="POST" enctype="multipart/form-data" class="x-hide-display"></form>');

formEl.appendChild(field.extractFileInput());

Ext.Ajax.request({
url: 'import.php',
isUpload: true,
params: {myParams:myParams},
method: 'POST',
form: formId,
success: function (response, options) {
var resp = Ext.decode(response.responseText),
message = resp.message;
Ext.example.msg('Success', message);
},
failure: function (response, options) {},
scope: this
});
}
}



if ($_FILES) {
$file = $_FILES['import']['tmp_name']; // 'import' - filefield name
$xmlStr = file_get_contents($file);
}