Ir para o conteúdo

Widget de Upload de Múltiplos Arquivos no Jitterbit App Builder

Descrição

O widget Upload de Múltiplos Arquivos utiliza a biblioteca FilePond. Este widget permite que múltiplos arquivos sejam enviados de forma síncrona ou assíncrona, armazenando temporariamente os arquivos em uma única coluna. Ele usa o evento Save para puxar o binário do arquivo e movê-lo para uma tabela separada. A partir daí, pode ser processado ainda mais ou movido para um sistema de arquivos local ou de rede.

Para baixar o widget de Upload de Múltiplos Arquivos, veja Upload de Múltiplos Arquivos em Downloads de Widgets.

  • Criador Original: JP Fortier

  • Atualizado Por: Andros Haggins & Shrey Kumar

  • Tipo: Widget de Controle

  • Parâmetros:

    Nome do Parâmetro Padrão Traduzível Descrição
    allowImagePreview 1 Não Habilitar (1) ou desabilitar (0) a pré-visualização para tipos de arquivos de imagem.
    allowMultiple 1 Não Habilitar (1) ou desabilitar (0) a adição de múltiplos arquivos.
    forceReload 1 Não Habilitar (1) ou desabilitar (0) a execução de uma atualização global após um lote de arquivos ter sido enviado.
    runSave 1 Não Habilitar (1) ou desabilitar (0) a execução do evento de salvar para cada arquivo sendo enviado para a coluna de arquivos do Objeto de Negócio.
    allowFileSizeValidation 1 Não Habilitar (1) ou desabilitar (0) para permitir o uso da configuração do parâmetro maxFileSize.
    maxFileSize 5000KB Não Valor para o maior tamanho de arquivo que o widget permitirá. Deve ser expresso em kilobytes e é um valor de string.

Mais parâmetros estão disponíveis para serem configurados com base na documentação do FilePond na seção Propriedades. Para adicionar parâmetros/propriedades adicionais, será necessário editar o arquivo binder.js no widget diretamente.

Nota

Quaisquer parâmetros/propriedades adicionais adicionados podem não funcionar como esperado e apenas os parâmetros acima foram testados.

Configuração

Um exemplo de como configurar e usar o widget de Upload de Múltiplos Arquivos é dado abaixo. O guia é dividido em duas etapas:

Etapa 1: Configurar tabelas, objetos de negócios e regras

Para que o widget de Upload de Múltiplos Arquivos funcione corretamente, primeiro precisaremos de duas tabelas. Uma para os arquivos a serem salvos, que chamaremos de tabela Arquivo, e outra que associará seus uploads de arquivos com outros dados com base no caso de uso do seu aplicativo, que chamaremos de tabela Ticket.

Definições de tabela

A tabela Ticket pode ser definida conforme mostrado na captura de tela abaixo. Embora outras colunas sejam mostradas, as únicas que são obrigatórias são a Chave Privada (PK) (TicketID) e as colunas Binária (Arquivo).

tickettable.png

A captura de tela a seguir mostra a definição da tabela Arquivo. Embora outras colunas sejam mostradas, as únicas que são obrigatórias são a Chave Privada (PK) (FileID), a Binária (Arquivo) e a Chave Estrangeira (FK) (TicketID).

filetable.png

Agora que as tabelas estão configuradas, podemos configurar as três regras (dois objetos de negócios e uma regra CRUD) que precisaremos.

Definições de regra

Primeiro, precisaremos de um objeto de negócios, chamado Ticket (Fonte), para atuar como um objeto fonte para a tabela Ticket. Este é o objeto de negócios ao qual nosso painel com o widget será vinculado, permitindo-nos associar um arquivo a um registro específico:

ticketsource.png

Nosso segundo objeto de negócios, chamado Ticket (Arquivo), tem como alvo a mesma tabela Ticket, mas contém apenas as colunas TicketID (que é a Chave Primária), File e filename (opcionalmente). Isso é importante porque precisamos de um objeto de negócios separado para que o widget possa permitir o upload de múltiplos arquivos em paralelo:

ticketfile.png

Nossa última regra de negócios é uma regra CRUD de Inserção, chamada Ticket (Inserir para Arquivo), que irá inserir um novo registro na tabela File. Nós direcionamos a tabela File e adicionamos um NewUUID() à coluna FileID. Esta regra CRUD será adicionada ao evento de Salvar do nosso objeto de negócios anterior na próxima etapa:

ticketinsertcrud.png

Agora associamos a regra CRUD Ticket (Inserir para Arquivo) com o evento de Salvar do nosso segundo objeto de negócios, Ticket (Arquivo), e adicionamos um vínculo em TicketID, conforme mostrado abaixo. Isso moverá cada arquivo para a tabela File assim que o upload for concluído. Como nossa tabela Ticket possui apenas uma coluna de arquivo binário, essa configuração permite que um número dinâmico de arquivos seja associado a um único registro em Ticket:

ticketsaveevent.png

ticketeventregistration.png

Etapa 2: Configurar o widget de Upload de Múltiplos Arquivos

Agora podemos passar para a camada de UI para configurar o próprio widget. Nossa página consistirá em dois painéis. Um usando Ticket (Fonte) e o outro usando Ticket (Arquivo):

pagedesign.png

O painel usando Ticket (Fonte) tem menos restrições em termos de configuração, desde que nosso próximo painel esteja vinculado a ele. Assim é como o nosso se parece:

paneldesign.png

Nosso próximo painel usando Ticket (Arquivo) tem um único controle File onde configuraremos o widget:

ticketfilepaneldesign.png

filecontrol.png

Nas configurações do controle File, clique na aba Edge Case e, sob o grupo de campos Edge Case, você encontrará o campo Widget. Selecione o widget Multi File Upload. Se você quiser alterar algum dos parâmetros padrão, pode fazê-lo agora:

widgetparameters.png

Observe que mudamos o valor de maxParallelUploads para 25. Embora o valor de runSave ainda seja 1, estamos mostrando-o aqui para destacar sua importância para a funcionalidade deste widget. Como nossa regra CRUD que move nosso arquivo para a tabela File está configurada no evento Save de Ticket (File), precisamos garantir que isso esteja definido como 1 para funcionar corretamente. Se runSave não estiver definido como 1, não conseguiremos lidar com vários arquivos.

Se você tiver algum processamento/ação adicional que precise ser feito em um arquivo, isso deve ser feito no evento Insert para a tabela File. Isso incluiria mover o arquivo para um sistema de arquivos local ou de rede.

Nota

Se você estiver enviando arquivos para o Amazon S3 Bucket e quiser criar uma estrutura de diretório em camadas para os arquivos, consulte o artigo sobre o sistema de arquivos Amazon S3.

Exemplo em vídeo de implementação do widget