File Upload: Server gets no data ...

[gilaras]

Hi there,

I'm developing an application for managing members of a gun club.
My app currently looks like this:
31474
Right under the picture there's a button to upload an image/picture of the member.
I worked through several tutorials, but i can't get the app to really upload anything ...
Here's my code for the upload form:

Ext.define('MR.view.member.ImageUpload', {

extend: 'Ext.window.Window',
title: 'Bild hochladen',
autoShow: true,
width: 410,
alias: 'widget.imageUpload',
layout: 'anchor',
buttonAlign: 'center',
autoHeight: true,
closable: true,
modal: true,

initComponent: function() {
this.items = [

new Ext.form.FormPanel({

title: 'File Uploader',
width: 400,
bodyPadding: 10,
frame: false,
items: [
{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select a file...'
}
],
buttons: [
{
text: 'Upload',
handler: function(){
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: '/app/pics/up',
waitMsg: 'Uploading your file...',
success: function(fp, o){
Ext.Msg.alert('Success', 'Your file has been uploaded!');
}
})
}
}
}
]
})
];

this.callParent(arguments);
}

});


After searching on the web for a bit, I found something about an FileUploadBean, that should be created, so I did that too...:

import org.springframework.web.multipart.commons.CommonsMultipartFile;

public class FileUploadBean {

private CommonsMultipartFile file;


public CommonsMultipartFile getFile() {
return file;
}

public void setFile(final CommonsMultipartFile file) {
this.file = file;
}
}


The signature of my controller looks like this:

@RequestMapping(value = "/pics/up", method = RequestMethod.POST)
public void uploadPicture(HttpServletRequest request, FileUploadBean uploadItem, BindingResult result, HttpServletResponse response);

And the problem is the following: everything related to the file is null...(needless to say, an NPE is thrown...)

I don't know what I may be doing wrong, but maybe someone can spot my mistake and tell me how to solve my problem...would be great :D

Thanks in advance and greetz
gilaras~o)

[tvanzoelen]

First check in firebug what is sent to the server. Do you see binary stuff in the upload.

If so, then you probably have to extract the multipart of the form in the right way with java

[gilaras]

Hi,

thanks for your reply.

Firebug shows nothing about something being sent anywhere.

In the docs it says

IMPORTANT: File uploads are not performed using normal 'Ajax' techniques; see the description for Ext.form.Basic.hasUpload for details.
And the docs for Ext.form.Basic.hasUpload says

[...]File uploads are not performed using normal 'Ajax' techniques, that is they are not performed using XMLHttpRequests.[...]

So i guess that's why I can't find anything in firebug ...

I tried doing the upload using Ext.Ajax.request(), but I didn't manage to get it working ... :-/

[tvanzoelen]

Below should work, try to set a breakpoint in the failure part



form.submit({
url: 'yoururl',
clientValidation: false,
scope: this,
success: function(form, action) {

},
failure: function(form, action) {

var error = action.result.error;

switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('UPLOAD ERROR', 'Message:<br />' + error);
}
}
});



If you have required fields, it could break on clientvalidation then set


clientValidation: false,

[tvanzoelen]

PS. For formsubmits in firebug... they are not visible in the consoletab but you must look under the net tab.

[gilaras]

Thanks for your reply :-)

I didn't know that i can see form submits in the net tab, thanks for the info! :-)

There i definitely some stuff being sent ...

�ä€;v®s¿àÖpêÊý¡cöäÕúF½Ãèì÷gòq8p@ăÄA‡ñLMnßTIy_Më™ޥγÕ$’òòI'Ü_»þ’ï>¯u–õMOxvEBO‹š?þúåg1˄Žњ3ÿÓ·×ú–üìË­;¶ÚXÑ£éTØþÊÌe—äa´Ùí�¼8LÎþ×æ'êNôì½î&[cö2cw»Þ֟új¿L´Ÿ_È1fö¤µÑê[ÜŐlÙëvÆN©êôqÚCCešnxä‘í¬7ù-DµÏmívç6Æ6}@H:{tüÖ©9’EŽ†¸jÑ2dîºÝßM6[\÷
¨<žcݶUH1z§RNj)¹Õ4É®½Ä»Sú'»ví¾õ³‰õ³¬ÓXõrw¹ÐßÒµ¿HûG§æ)sMkÍ֟RÙ/ €C\6×·µÞæ¢Þ=:]’æK©¬µÆÂL>¦Ïw©k½ŠKª$y H÷zJþ½õ+eWáÓak!ŽûÈ×oîµîÜÕýjèùWÙVoM­ï?B}ƒßô¾“7.P[s+0ÖÚÿ�Wwî´{vlºïÞTïuæ†VÒê7~Ѩ|mÛ±‡ßôĤw?÷Hã/_~oÕ;vGM5ûH{`îþ¸y–íÿ�«M]ŸS'sp².k$[�Xׂöìeéô5™v,ý¤¹äm$UY°¸WµÁâÇ ŸµÖ{=é­Ê¨mh£·S«šlsC}'îhÝîÿ�ԈqKÀýry}Mv՜z·QӉµ»žÃeÇaÝù®¤wýKþqÜÒYF8ÒÊÛI÷;ó[W¬Ñ¿wýBÄɲhk7>·n �ÀТæo³ôŸ¤NC
... Das Größenlimit der Post-Antwort wurde erreicht und diese von Firebug entfernt. ...
I don't know if you speak german, so here's how I would translate it: "The size limit of POST response has been reached and removed by Firebug."

Does it mean that it just couldn't get displayed, or that the file I'm trying to send is too big for the server?

[tvanzoelen]

For as far I know I had a limit of 3mb. But that I tested some time ago and has probably nothing to do with extjs. You could first check your code with a small file. Probably the problem lies at the java server part. For java it is more tricky I think to extract files from uploads. But there are implementations around.

[gilaras]

For as far I know I had a limit of 3mb. But that I tested some time ago and has probably nothing to do with extjs. You could first check your code with a small file. Probably the problem lies at the java server part. For java it is more tricky I think to extract files from uploads. But there are implementations around.

I had a look at the filesize; 47.8kb. Should be no problem i hope ... so I don't think the mistake lies in file size ...
I guess I'll do a search on how to extract files from uploads using Java ...

Thanks so far .. :-)