Tutorial ExtJS 4 + VRaptor: Upload de Arquivos
No post de hoje vamos ver uma dica rápida de como fazer upload de arquivos com ExtJS e VRaptor corretamente.
Pesquisando pelos fóruns na net, vi que muita gente usa VRaptor com ExtJS, mas infelizmente o pessoal trata o upload de arquivos de maneira errada por não saberem como fazer direito. O VRaptor possui um plugin para trabalhar com ExtJS, mas esse serve apenas para você trabalhar com data grids. O que muita gente também não sabe, é que upload de arquivo com ExtJS (não importa a versão que vc esteja trabalhando) funciona de uma forma diferente do submit de um form comum.
A pegadinha é: no response que o ExtJS espera, você precisa enviar uma mensagem no formato JSON, mas o cabeçalho do content-type NÃO pode ser json! Tem que ser text/html! E pronto, tudo se resolve!
O code snippet abaixo faz parte do projeto de exemplo que apresentei na JavaCE Conference 2012. Vou deixar o link do projeto completo do github no final do post.
Código ExtJS para upload de arquivo
[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
{
xtype: 'filefield',
id: 'file',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'file',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
}
[/code]
Código VRaptor que trata o upload de arquivo e retorna um response para o ExtJS
[code lang="java" firstline="1" toolbar="true" collapse="false" wraplines="false"]
@Post
public void upload(UploadedFile file) throws FileNotFoundException, IOException{
File picture = new File("/Users/loiane/development/javace/extjs4-vraptor-crud/WebContent/resources/images/headshots/"+file.getFileName());
IOUtils.copyLarge(file.getFile(), new FileOutputStream(picture));
//ERRADO! não pode retornar um content-type JSON!!!
//result.use(Results.json()).withoutRoot().from(new ExtJSSuccess(true)).serialize();
//CORRETO!!!
result.use(HttpResult.class).addHeader("Content-Type", "text/html").body("{'success':true}");
}
[/code]
Download do Projeto completo
https://github.com/loiane/javace-conference-2012
Até a próxima! :)