Simple tutorial how to upload file to server

[sniffer]

Hi ti all,
I have an issue to create by my self a script which is uploading a file to server. Does any one know how to upload a file with simple code snippet. So, I need standard way to upload a file over ExtJS using getForm().submit() action.

NOTE: Please, do not post already done solutions as fileupoad2 widget or something like that, I need simple working solution by ExtJS rules.

Best regards,
Sniffer (Aleksandar Cajic)

[Animal]

Just submit the form containing the <input type="file">, that's all you do on the Ext side.

You have to process the mime multipart message properly on the server though. You know how to do that?

[sniffer]

Yes, I know what server needs to get as content type and enctype to be multipart... in general here is a code in ExtJS



this.systemBackupRestore = function() {
var myFormBackupRestoreSettings = new Ext.FormPanel({
monitorValid: true,
enctype:'multipart/form-data',
fileUpload: true,
id: 'backupRestore',
url: backupUpload,
frame: true,
bodyStyle: 'padding:5px 5px 0',
items: [{
xtype:'fieldset',
collapsible:false,
autoHeight:true,
title: translationData.title_backup_system,
items: [{
xtype:'button',
id:'backupSystemButton',
name:'backupSystemButton',
text: translationData.button_backup_system,
handler: function() {
backupAction(winSystemBackupRestore);
}
}]
},{
xtype:'fieldset',
collapsible:false,
autoHeight:true,
title: translationData.title_restore_system,
labelWidth: 190,
items: [{
xtype:'textfield',
id:'uploadFile',
fieldLabel: translationData.label_upload_file,
name:'uploadFile',
//width:100,
allowBlank:false,
disabled:false,
inputType:'file'
},{
xtype:'button',
id:'restoreSystemButton',
name:'restoreSystemButton',
text: translationData.button_restore_system,
handler: function() {
uploadAction(myFormBackupRestoreSettings, winSystemBackupRestore);
}
}]
}
]
});
winSystemBackupRestore = new Ext.Window({
id:'win_systemBackupRestore',
closable: true,
title: translationData.title_system_backup_restore,
width: 450,
resizable: false,
plain: true,
modal: true,
autoScroll: true,
autoHeight: true,
items: [myFormBackupRestoreSettings],
buttons:[{
text: translationData.button_cancel,
handler: function(){
winSystemBackupRestore.close();
}
}]
});
winSystemBackupRestore.show();
}



And here is action



var uploadAction;
uploadAction = function(uploadForm, windowUpload) {
uploadForm.getForm().submit({
method:'POST',
enctype:'multipart/form-data',
success:function() {
windowUpload.close();
},
failure:function() {
// error action
}
});
}


Does this kind of code will do file upload?! I can not test this because Im working on separated code (javascript) and business logic is done in Java.

Best regards,
Sniffer

[Animal]

That'll do it.

Make sure that you explicitly set the Content-Type of the response to "text/html"

[sniffer]

Thanx! ;)

[sniffer]

Again some issue... uploading of file working very fine, but when response is returned to ext I can not get responseText from response object!!!! It seams that a problem is because "multipart/form-data" as content type. Is it there some way to get JSON text from response in this kind of case?

Im using a firebug do debug this and I can see JSON without a problem but ext has issue to get response.

Best regards,
Sniffer

[Animal]

You need to set the Content-Type header of the response to "text/html"