Tutorial: Upload de Arquivo com ExtJS e Spring Framework
Esse tutorial aborda como implementar um form para upload de arquivo usando o form ExtJS no lado cliente e Spring Framework no lado servidor.
O que você precisa antes de começar esse tutorial?
- ExtJS
- Spring Framework (MVC) e dependências (há uma opção com dependência para download)
- commons-io-1.4.jar
- commons-fileupload-1.2.jar
Primeiro precisa implementar o form de upload. você pode usar o que está disponível na página de exemplo do ExtJS (File Upload example) para ver as opções disponíveis (Estou usando o terceiro form).
Abaixo está o código que implementei (ou melhor, copiei da página de exemplo do ExtJS e adaptei de acordo com minha necessidade – Spring):
Ext.onReady(function(){
Ext.QuickTips.init();
var msg = function(title, msg){
Ext.Msg.show({
title: title,
msg: msg,
minWidth: 200,
modal: true,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
};
var fp = new Ext.FormPanel({
renderTo: 'fi-form',
fileUpload: true,
width: 500,
frame: true,
title: 'File Upload Form',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Select a File to import',
fieldLabel: 'File',
name: 'file',
buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
}],
buttons: [{
text: 'Upload',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
url: 'fileUpload/import.action',
waitMsg: 'Uploading your file...',
success: function(fp, o){
msg('Success', 'Processed file on the server');
}
});
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
});
E aqui tem o exemplo de como usar (página HTML):
<html>
<head>
<title>Spring FileUpload Example with ExtJS Form</title>
<!-- Ext JS files -->
<link rel="stylesheet" type="text/css" href="/extjs-file-import-spring/ext-3.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/extjs-file-import-spring/ext-3.1.1/examples/shared/examples.css" />
<link rel="stylesheet" type="text/css" href="/extjs-file-import-spring/ext-3.1.1/examples/ux/fileuploadfield/css/fileuploadfield.css"/>
<style type=text/css>
.upload-icon {
background: url('/extjs-file-import-spring/ext-3.1.1/examples/shared/icons/fam/image_add.png') no-repeat 0 0 !important;
}
</style>
<script src="/extjs-file-import-spring/ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="/extjs-file-import-spring/ext-3.1.1/ext-all.js"></script>
<script src="/extjs-file-import-spring/ext-3.1.1/examples/ux/fileuploadfield/FileUploadField.js"></script>
<!-- file upload form -->
<script src="/extjs-file-import-spring/js/file-upload.js"></script>
</head>
<body>
<h1>Spring File Upload Example Integrated with ExtJS FileUpload Form</h1>
<p>Click on "Browse" button (image) to select a file and click on Upload button</p>
<div id="fi-form"></div>
</body>
</html>
Antes de começar a codificar o Controoler, é necessário ter um FileUploadBean (não é obrigatório, mas para deixar mais organizado):
package com.loiane.beans;
import org.springframework.web.multipart.MultipartFile;
public class FileUploadBean {
private MultipartFile file;
public MultipartFile getFile() {
return file;
}
public void setFile(MultipartFile file) {
this.file = file;
}
}
E aqui está o FileUploadController (apenas estou gravando o arquivo que foi feito upload para o diretório C:). Você pode adicionar alguma validação ou processar o arquivo nesta classe (mas por favor, adicione uma classe de serviço para isso – controller é apenas para redirecionar o request! 
). Você também pode retornar mensagens para o ExtJS dizendo que foi um sucesso ou alguma mensagem de erro.
package com.loiane.web;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.validation.BindException;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.support.ByteArrayMultipartFileEditor;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.SimpleFormController;
import com.loiane.beans.FileUploadBean;
public class FileUploadController extends SimpleFormController {
protected ModelAndView onSubmit(
HttpServletRequest request,
HttpServletResponse response,
Object command,
BindException errors) throws ServletException, IOException {
// cast the bean
FileUploadBean bean = (FileUploadBean) command;
MultipartFile file = bean.getFile();
String fileName = null;
if (file == null) {
System.out.println("User Did not upload file");
}
else {
System.out.println("Uploaded File Name is :" + file.getOriginalFilename());
}
InputStream inputStream = null;
OutputStream outputStream = null;
if (file.getSize() > 0) {
inputStream = file.getInputStream();
String root = "C:\\";
fileName = root + file.getOriginalFilename();
outputStream = new FileOutputStream(fileName);
int readBytes = 0;
byte[] buffer = new byte[10000];
while ((readBytes = inputStream.read(buffer, 0 , 10000))!=-1){
outputStream.write(buffer, 0, readBytes);
}
outputStream.close();
inputStream.close();
}
return null;
}
protected void initBinder(HttpServletRequest request, ServletRequestDataBinder binder)
throws ServletException {
// to actually be able to convert Multipart instance to byte[]
// we have to register a custom editor
binder.registerCustomEditor(byte[].class, new ByteArrayMultipartFileEditor());
// now Spring knows how to handle multipart object and convert them
}
}
Também é preciso adicionar esse bloco de código no arquivo servlet.xml:
<!-- max upload size in bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1000000"/>
</bean>
Bem simples!
Você pode fazer o download do projeto de exemplo do meu github: http://github.com/loiane/extjs-file-import-spring
Bons códigos!
Oi Loiane, gostei do seu post e venho acompanhando os seus posts sobre ExtJS, Parabéns! = )
Tenho algumas perguntas para você.
Como você iria fazer um download ou exibiria uma imagem que está armazenada em um banco de dados (blob) usando ExtJS?
Porque você decidiu usar Extjs e não os componentes JSF (RichFaces, ICeFaces, PrimeFaces….).
Dá para integrar JBoss Seam com o ExtJS?
Obrigado pela atenção!
Olá Josué,
Você consegue integrar ExtJS com qualquer framework que dê suporte a chamadas Ajax.
Nunca tentei exibir imagem carregada do banco de dados, isso está na minha lista de pendências. Provalvelmente devo fazer um post sobre isso no futuro.
ExtJS, assim como o JQuery está muito em alta lá fora, e é a tecnologia do momento. JSF é muito usado aqui no Brasil nem tanto lá fora. Já tive a oportunidade de trabalhar, mas não gostei muito. Hoje meu foco é mais com ExtJS e Spring, que são as tecnologias que uso no trabalho.
Abraços e obrigada pela visita!
Ola …
Muito bom msm
Me adiciona no msn por favor.
Abraço
Help,
Hi Loiane, how are u?
please how could I integrate this with a gallery of photos? That means, after sending photos to the server acess those throgh a gallery… Got it?
Please, send the your opinion by email message, ok?
bye bye
Hi André,
I’m fine, and u?
Thanks for the idea. I’m planning to implement it, but I have a few requests scheduled to publish first, ok?
Going to publish it soon!
Rgds,
Oi Loiane, perfeito seu tutorial e muito bem explicado!
Me ajudou muuuuuito!!!
Obrigada!
Olá Loiane,
Você poderia fazer um exemplo igual a esse, só que usando JSF?
Grato
Olá Lucas,
Desculpe, mas não trabalho com JSF.
[]‘s
Loiane,
Voce tem exemplo em que a funcao java retorne algum valor ?
Eu precisaria que ela retornasse um json que pudesse ser entao interpretado no servidor. Mas se o meu servlet retorna mais que 0 bytes o metodo success nao esta sendo chamado. Nao entendi o que estou fazendo de errado.
Danilo.
Oi. Você não tem um exemplo assim para ao invés de gravar a imagem em C:\ ele salvar em um Banco de Dados. Tipo Enviar e buscar? Preciso fazer algo parecido com isso e nem sei por onde começar (Se bem que essa tentativa aqui já éh um começo). Abraços e obrigado pelo tutorial.
@Leonardo
No banco é só você salvar o arquivo em um campo blob.
Planejo escrever um tutorial sobre isso no futuro.
[]‘s
@Danilo
Você precisa retornar um success pro extjs com alguma mensagem. Para isso, basta colocar esses dados no response no java e adicionar a função de callback no extjs.
[]‘s
Tutorial: Upload de Arquivo com ExtJS e Spring Framework…
Esse tutorial aborda como implementar um form para upload de arquivo usando o form ExtJS no lado cliente e Spring Framework no lado servidor. O que você precisa antes de começar esse tutorial? ExtJS Spring Framework (MVC) e dependências (há uma opção c…
Olá loiane tudo bom??
muito bom o post!! na verdade o melhor que encontrei até agora
mas continuo com alguns problemas
eu quero fazer esse upload sem usar o Spring
somente o Ext Js ( versao 3.x.x)
e Java,
ai estou com os seguintes problemas:
1- no Ext Js eu nao sei muito bem o que eu tenho que colocar no atributo
‘url’ do submit…quando eu faço o processo no java
2- no caminho do arquivo aparece a msg
“C:\fakepath\file.jpg”
3- Olhei uns livros, mas nao consegui utilizar a lib commons.fileupload.jar
e commons.io.jar
vc poderia me mostrar um exemplo sem o spring por favor?
Grato
e parabens pelos trabalhos apresentados aqui!!
Olá Sheiti,
Você precisa usar um servlet pra conseguir fazer o upload.
No extjs, vc vai colocar a url do seu servlet.
A parte de upload de arquivos com servlets e o common.fileupload vc pode conferir aqui: http://www.guj.com.br/java/19478-servlet-e-jsp—-upload-de-arquivos
Olha no código do spring que postei neste post os parâmetros passados no request, aí é só vc fazer o mesmo no seu servlet.
[]‘s
olá vlw
eu consegui fazer aqui
mas infelizmente
tem dois problemas
no field da photo ainda mostra “C:\fakepath\linkin.park.jpg”
quando carrego a imagem, em vez do caminho certo, vc saberia onde eu mudo isso??
e a aplicação faz o upload, mas a janela de wait fica rodando infinto
o extjs deve estar esperando o success: true, eu acho, mas nao sei como faz isso
teria uma ideia??
vlw mesmo pela ajuda
bjos
Olá. Você não teria esse mesmo exemplo para o 4? Tentei migrar, mas, não consigo. Obrigado.
Olá Leo, está planejado para um tutorial futuro.
[...] tutorial é um update do Tutorial: Upload de Arquivo com ExtJS e Spring Framework, implementado com Ext JS 3 e Spring MVC [...]