Primefaces - Componente FileUpload

FileUpload vai além do type="file" funcionalidade de entrada do navegador "file" no HTML5.

Informações

Tag fileUpload
Component Class org.primefaces.component.fileupload.FileUpload
Component Type org.primefaces.component.FileUpload
Component Family org.primefaces.component
Renderer Type org.primefaces.component.FileUploadRenderer
Renderer Class org.primefaces.component.fileupload.FileUploadRenderer

Atributos

Nome Default Tipo Descrição
id null String Identificador único do componente
rendered true boolean Valor booleano para especificar a 'exibição' do componente, quando definido como falso componente não será exibido.
binding null Object Uma expressão 'el' que mapeia para um lado do servidor Instância 'UIComponent' em um 'bean' de apoio.
value null Object Valor do componente pode ser de uma expressão 'el' de um texto literal.
converter null Converter /String Uma expressão el ou um texto literal que define um conversor para o componente. Quando é um EL expressão, está resolvido para uma instância do conversor. em caso é um texto estático, ele deve se referir a um ID de conversor.
immediate false Boolean Quando definido 'true', validações de processo lógica é executado em fase de aplicação 'apply request' do JSF
required false Boolean Marca componente tornando-o 'obrigatório'
validator null SeuMétodo Um método de expressão que se refere a um método validation de entrada.
valueChangeListener null SeuMétodo Um método de expressão que se refere a um método para manipulação de um 'value change event'
requiredMessage null String Mensagem a ser exibida quando o campo necessário validação falhar.
converterMessage null String Mensagem a ser exibida quando a conversão falhar
validatorMessage null String Mensagem a ser exibida quando a validação falhar
widgetVar null String Nome do widget do lado do cliente
update null String Componente (s) para atualizar após fileupload concluída
process null String Componente (s) para processar nas requisições fileupload
fileUploadListener null SeuMétodo Método para invocar quando um arquivo é enviado.
multiple false Boolean Permite a escolha de uploads de arquivos a partir de vários nativa diálogo de procura de arquivos
auto false Boolean Quando definido como 'true', a seleção de um arquivo inicia o carregamento processar implicitamente.
label Choose String Rótulo do botão de navegação
allowTypes null String A expressão regular para os tipos de arquivos aceitos, por exemplo /(\.|\/)(gif|jpe?g|png)$/
sizeLimit null Integer Limite de tamanho de arquivo individual em bytes.
fileLimit null Integer Número máximo de arquivos permitidos para upload
style null String Estilo alinhado do componente.
styleClass null String Classe de estilo do componente
mode advanced String Modo da fileupload, pode ser 'simple' ou 'advanced'
uploadLabel Upload String Rótulo do botão de upload
cancelLabel Cancel String Rótulo do botão de cancelamento
invalidSizeMessage null String Mensagem a ser exibida quando o limite de tamanho excede
invalidFileMessage null String Mensagem a ser exibida quando o arquivo não é aceito
fileLimitMessage null String Mensagem a ser exibida quando o limite de arquivo ultrapassar
dragDropSupport true Boolean Especifica dragdrop base de seleção de arquivos a partir de sistema de arquivos, o padrão é verdadeiro e funciona somente em navegadores suportados
onstart null String Callback do lado do cliente para executar quando o upload começa
onerror null String Callback para executar se o pedido fileupload falhar
oncomplete null String Callback do lado do cliente para executar quando upload completar
disabled false Boolean Desabilita componente quando definido 'true'
messageTemplate {name} {size} String Modelo de mensagem para usar ao exibir arquivos erros de validação
previewWidth 80 Integer Largura para visualização de imagens em pixels

1 - Configurações Iniciais 
1.1 - Parâmetro de configuração opcional

<context-param>
          <param-name>primefaces.UPLOADER</param-name>
          <param-value>auto|native|commons</param-value>
 </context-param>

auto: Este é o modo padrão e PrimeFaces tenta detectar o melhor método, verificando o
ambiente de tempo de execução, se JSF tempo de execução é de pelo menos 2,2 Uploader 'native' é selecionada, caso contrário 'commons'.

native: Modo nativo usa servlet 3.x API ara fazer o upload dos arquivos e se JSF tempo de execução, se usar JSF inferior a 2,2 uma exceção será lançada.

commons: Esta opção escolhe 'commons fileupload', independentemente do ambiente, a vantagem desta opção é que ela funciona mesmo em um ambiente Servlet 2.5.

Importante: se você decidiu escolher commons fileupload, requer o seguinte filtro de configuração
em implantações web.

<filter>
             <filter-name>PrimeFaces FileUpload Filter</filter-name>
             <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
<filter-mapping>
              <filter-name>PrimeFaces FileUpload Filter</filter-name>
              <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

Note que o nome do servlet deve corresponder ao nome configurado do servlet JSF que é Faces
Servlet neste caso. Alternativamente, você pode fazer uma configuração baseada na url-pattern também.

1.2 - 'Simple' File Upload
Modo de upload de arquivos simples funciona em modo de legado com um arquivo de entrada, cujo valor deve ser uma Instância UploadedFile. Imagens Ajax não são suportados no carregamento...
.xhtml
<h:form enctype="multipart/form-data">
             <p:fileUpload value="#{fileBean.file}" mode="simple" />
             <p:commandButton value="Submit" ajax="false"/>
</h:form>
.java
import org.primefaces.model.UploadedFile;

public class FileBean {
         private UploadedFile file;
//getter-setter

}

1.3 - 'Advanced' File Upload
FileUploadListener é a maneira de acessar os arquivos enviados neste modo, quando um arquivo é carregado fileUploadListener definido é processado com um FileUploadEvent como o parâmetro.

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" />

public class FileBean {
        public void handleFileUpload(FileUploadEvent event) {
        UploadedFile file = event.getFile();
//application code
        }
}

1.4 - Multiplos Uploads
Imagens Múltiplas pode ser ativado usando o atributo 'multiple' para que vários arquivos possam ser selecionados no browser. Imagens Múltiplas não são suportadas em navegadores mais antigos. Note-se que o modo multiplo é para seleção somente, ele não envia todos os arquivos em um pedido. Componente FileUpload sempre  usa um novo pedido para cada arquivo.

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" multiple="true" />

1.5 Auto Upload
Comportamento padrão exige que os usuários desencadear o processo de upload, você pode alterar essa forma, configurando auto de 'true' para 'false'. Auto = true, os envios são acionados assim que os arquivos são selecionados a partir do diálogo.

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" auto="true" />

1.6 - Atualização/update parcial de página
Após o processo de fileUpload completa você pode usar o PrimeFaces PPR para atualizar qualquer componente na página. FileUpload está equipado com o atributo de atualização para esta finalidade. Seguindo o exemplo exibe uma mensagem "arquivo enviado" utilizando o componente 'growl' após o upload de arquivos.

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" update="msg" />
 <p:growl id="msg" />

public class FileBean {
              public void handleFileUpload(FileUploadEvent event) {
              //add facesmessage to display with growl
             //application code
             }
}

1.7 - Filtros de Arquivo
Os usuários podem ser restrito a apenas selecionar os tipos de arquivo que você configurou, o exemplo abaixo demonstra como aceitar apenas imagens.

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>

1.8 - Limite de tamanho
Na maioria das vezes pode ser necessário restringir o tamanho de upload de arquivos para um arquivo, isso é tão simples como exemplo a configuração sizeLimit, após fileUpload limita o tamanho de 1000 bytes para cada arquivo.

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" sizeLimit="1000" />

1.9 - Limite de arquivo
FileLimit restringe o número de arquivos máximas que podem ser carregados.

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" fileLimit="3" />

2.0 - Validation Messages
opções invalidFileMessage, invalidSizeMessage e fileLimitMessage são fornecidos para exibir 
mensagens de validação para os usuários. Similar à API mensagem FacesMessage, essas mensagens definir a parte resumo, a parte detalhe é recuperada a partir da opção messageTemplate onde o valor padrão é "{name} {size}".

2.1 - Skinning
FileUpload reside em um elemento de estilo e opções styleClass, como classes de estilo são globais. Seguindo a lista de classes de estilo estruturais.

Class aplica
.ui-fileupload Elemento container principal
.fileupload-buttonbar Botões de Barra
.fileinput-button Botão Procurar
.ui-fileupload start Botão de upload
.ui-fileupload cancel Botão cancelar
fileupload-content recipiente/corpo de conteúdo

2.2 - Configuração do filtro
Configuração do filtro é necessário se você estiver usando commons carregou a imagem só. Duas opções de configuração existir, o tamanho limite de upload de arquivo e localização temporária.
Nome do parâmetro Descrição
thresholdSize O tamanho máximo do arquivo em bytes para manter os arquivos carregados na memória. Se um ficheiro exceder esse limite, ele vai ser temporariamente gravados no disco.
uploadDirectory Caminho do repositório de disco para manter arquivos temporários que excede o tamanho limite. Por padrão, ele é System.getProperty ("java.io.tmpdir")

Um exemplo de configuração abaixo thresholdSize definida para ser 50kb e uploads para  pasta de usuários temporários.

<filter>
             <filter-name>PrimeFaces FileUpload Filter</filter-name>
             <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
             <init-param>
                      <param-name>thresholdSize</param-name>
                      <param-value>51200</param-value>
               </init-param>
               <init-param>
                       <param-name>uploadDirectory</param-name>
                       <param-value>/Users/primefaces/temp</param-value>
               </init-param>
</filter>

Note-se que uploadDirectory é usado internamente, você sempre precisa para implementar a lógica para salvar o arquivo conteúdos si mesmo em seu bean de apoio.

SHARE ON:

Hello guys, I'm Tien Tran, a freelance web designer and Wordpress nerd. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.

    Blogger Comment

0 comentários :

Postar um comentário

Observação: somente um membro deste blog pode postar um comentário.