PDA

View Full Version : File Upload response Bug



giovannicandido
4 Sep 2012, 7:44 AM
I try upload an file in a form using ExtJS 4.1.1
The upload is sucess but the response is not bean reader. I get the follow error in firebug:


TypeError: result is undefinedif (result !== true && !result.success) {

The error is on the file src/form/action/Submit.js on line 221

But the server is getting the file and sending the apropriated response:

{"success": true}

If I remove the filefield from the form, I get the correct behavior. I'm returning a simple json {success: true}
The Ext code is:




/**
* Criado por Giovanni Candido <giovanni@atende.info>
* Date: 22/08/12
* Time: 11:51
*/
//define o conteudo de abrir chamado (interface)

var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.define('CH.view.menu.AbrirChamado',{
extend: 'Ext.panel.Panel',
alias: 'widget.abrirChamado',
border:false,
layout: {
type: 'hbox',
pack: 'center',
align: 'middle'
},
items:[{
xtype: 'form',
url: '/chamado/',
title:'Abrir Chamado' ,
width: 500,
height: 350,
layout: 'form',
defaultType: 'textfield',
bodyPadding: 20,
items: [
{
fieldLabel: 'Solicitante',
name: 'solicitante',
afterLabelTextTpl: required,
allowBlank: false
},{
fieldLabel: 'E-mail',
name: 'email' ,
afterLabelTextTpl: required,
allowBlank: false,
vtype: 'email',
maxLength: 120
}, {
xtype:'combo',
fieldLabel:'Departamento',
name: 'departamento',
afterLabelTextTpl: required,
allowBlank:false,
store: 'Departamentos',
displayField: 'nome',
editable: false


},{
fieldLabel:'Prédio',
xtype: 'numberfield',
allowBlank: false,
afterLabelTextTpl: required,
name:'predio',
minLength: 1,
maxLength: 2
},{
fieldLabel:'Sala',
name:'sala',
maxLength: 30,
allowBlank: false,
afterLabelTextTpl: required
},{
fieldLabel:'Ramal',
xtype: 'numberfield',
name:'ramal',
afterLabelTextTpl: required,
allowBlank: false,
minLength: 4,
maxLength: 4
},{
xtype: 'filefield',
name: 'arquivo',
fieldLabel: 'Arquivo'
},{
xtype:'textarea',
fieldLabel:'Descrição',
name:'descricao',
afterLabelTextTpl: required,
allowBlank: false,
maxLength: 255,
enforceMaxLength: true
}],
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
msg('Success', 'Processed file "' + o.result.file + '" on the server');
}
});
}
}
}]
}]
})

The server is Spring Framework and the controller is:




@RequestMapping(value = "/chamado", method = RequestMethod.POST)
public @ResponseBody ExtResponse abrirChamado(@RequestParam String solicitante,
@RequestParam String email,
@RequestParam String departamento,
@RequestParam String predio,
@RequestParam String sala,
@RequestParam String descricao,
@RequestParam String ramal,
@RequestParam MultipartFile arquivo){
String mensagemRetorno = "";
Chamado chamado = new Chamado();
chamado.setNomeSolicitante(solicitante);
chamado.setEmailSolicitante(email);
chamado.setDepartamento(departamento);
chamado.setPredio(predio);
chamado.setSala(sala);
chamado.setDescricao(descricao);
chamado.setRamal(ramal);
if(!arquivo.isEmpty()){
byte[] bytes;
try {
bytes = arquivo.getBytes();
chamado.setArquivo(bytes);
} catch (IOException e) {
mensagemRetorno += " Arquivo não pode ser anexado em chamado";
}

}
dao.salvar(chamado);
return ExtResponse.SUCCESS;
}

giovannicandido
4 Sep 2012, 10:04 AM
The problem is that when using filefield the response needs to be html. My response is with content-type: application/json and is picked up by spring. Even if the response are the same ("{success: true}") extjs throw the error if the response type is not text/html.

For my specific case I'm using spring 3.1 and I change the behavior of the message-converters. For generate the html response I need change the controller method and enable the html message converter:
On spring-servlet.xml I add the bean org.springframework.http.converter.StringHttpMessageConverter (if you don't override the message-converters with the register-defaults="false" you don't need this step)


<mvc:annotation-driven>
<mvc:message-converters register-defaults="false">
<bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property name="objectMapper" ref="jacksonObjectMapper" />
</bean>
<bean class="org.springframework.http.converter.StringHttpMessageConverter" />
</mvc:message-converters>
</mvc:annotation-driven>


On the controller I change the return type to String and return a plain spring:


@RequestMapping(value = "/chamado", method = RequestMethod.POST)
public @ResponseBody String abrirChamado(@RequestParam String solicitante,
@RequestParam String email,
@RequestParam String departamento,
@RequestParam String predio,
@RequestParam String sala,
@RequestParam String descricao,
@RequestParam String ramal,
@RequestParam MultipartFile arquivo){
String mensagemRetorno = "";
Chamado chamado = new Chamado();
chamado.setNomeSolicitante(solicitante);
chamado.setEmailSolicitante(email);
chamado.setDepartamento(departamento);
chamado.setPredio(predio);
chamado.setSala(sala);
chamado.setDescricao(descricao);
chamado.setRamal(ramal);
if(!arquivo.isEmpty()){
byte[] bytes;
try {
bytes = arquivo.getBytes();
chamado.setArquivo(bytes);
} catch (IOException e) {
mensagemRetorno += " Arquivo não pode ser anexado em chamado";
}

}
dao.salvar(chamado);
return "{success: true, message: " + mensagemRetorno + "}";
}

My response in firebug is the same but the content-type is now text/html and I can view the html tab on firebug. Now extjs handles the response correct, and call my callback function onsuccess.

The expected behavior is that extjs handle the response as json like they do in normal ajax submits.

English is not my language, sorry for any writing errors

jambi
10 Oct 2012, 9:52 AM
Thanks for sharing this detail... I ran into this same problem recently in receiving success and failure messages for uploading files, and changing my server response's content type to text/html worked!