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

{
    xtype: 'filefield',
    id: 'file',
    emptyText: 'Select an image',
    fieldLabel: 'Photo',
    name: 'file',
    buttonText: '',
    buttonConfig: {
        iconCls: 'upload-icon'
    }
}

Código VRaptor que trata o upload de arquivo e retorna um response para o ExtJS

@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}");
}

Download do Projeto completo

https://github.com/loiane/javace-conference-2012 

Até a próxima!

Filed in: Ext JS 4 | Tags: ExtJS, ExtJS 4, file upload, upload arquivo, VRaptor