Ir para o conteúdo

Widget de upload de vários arquivos no Jitterbit App Builder

Descrição

Este widget foi atualizado em janeiro de 2022

O Widget de Upload de Vários Arquivos utiliza a biblioteca FilePond, versão 4.28.2, que pode ser encontrada em https://github.com/pqina/filepond. Este widget permite o upload de vários arquivos de forma síncrona ou assíncrona, armazenando-os temporariamente em uma única coluna e utilizando o evento de salvamento para extrair o binário do arquivo e movê-lo para uma tabela separada, onde pode ser processado posteriormente ou movido para um sistema de arquivos local ou de rede.

  • Criador Original: JP Fortier
  • Atualizado por: Andros Haggins e Shrey Kumar
  • Tipo: Widget de Controle

  • Parâmetros:

    Nome do Parâmetro Padrão Traduzível Descrição
    allowImagePreview 1 No Habilita (1) ou desabilita (0) a pré-visualização para tipos de arquivo de imagem.
    allowMultiple 1 No Habilita (1) ou desabilita (0) a adição de múltiplos arquivos.
    forceReload 1 No Habilita (1) ou desabilita (0) a execução de uma atualização global após o upload de um lote de arquivos.
    maxParallelUploads 1 No Número máximo de arquivos que podem ser enviados em paralelo. O máximo testado é 100.
    runSave 1 No Habilita (1) ou desabilita (0) a execução do evento de salvamento para cada arquivo que está sendo carregado na coluna de arquivo do Objeto de Negócio.

    Mais parâmetros estão disponíveis para configuração com base na documentação do FilePond em https://pqina.nl/filepond/docs/print-version/#toc na seção "Propriedades". Para adicionar parâmetros/propriedades adicionais, você precisará editar o arquivo "binder.js" diretamente no widget. Observe que quaisquer parâmetros/propriedades adicionais adicionados podem não funcionar conforme o esperado e apenas os parâmetros acima foram testados.

Configuração

Para que o Widget de Upload de Vários Arquivos funcione corretamente, precisamos de duas tabelas separadas. Uma para os arquivos a serem salvos (no nosso exemplo, a tabela "Arquivo") e outra que associará os uploads dos seus arquivos a outros dados com base no caso de uso do seu aplicativo (no nosso exemplo, a tabela "Ticket").

Definição de mesa de ingressos

tabeladeingressos.png

Nota

A coluna PK (TicketID) e a coluna Binary (Arquivo) são as únicas colunas obrigatórias

Definição de tabela de arquivos

filetable.png

Nota

Coluna PK (FileID), coluna Binária (File) e coluna FK para outra tabela (TicketID) são as únicas colunas necessárias

Agora que nossas tabelas estão configuradas, podemos passar para a configuração das Regras de Negócios. Precisaremos de no mínimo 3 Regras de Negócios, 2 Objetos de Negócios e 1 regra CRUD para inserir um arquivo na tabela de arquivos.

Bilhete (fonte)

O primeiro objeto de negócio é apenas um objeto de origem para a tabela Ticket. Este é o objeto de negócio que usaremos em nosso primeiro painel, ao qual o painel com o widget se vinculará e nos permitirá associar um arquivo a um registro específico:

ticketsource.png

Bilhete (arquivo)

Nosso segundo objeto de negócios tem como alvo a mesma tabela de Tickets, mas contém apenas o PK (TicketID), o arquivo e o nome do arquivo (opcional). Isso é importante porque precisamos de um objeto de negócios separado para o widget, para que vários arquivos possam ser carregados em paralelo: ticketfile.png

Bilhete (inserir no arquivo)

Nossa última regra de negócios é uma regra CRUD de Inserção que inserirá um novo registro na tabela Arquivo. Visamos a tabela Arquivo e definimos um NewUUID() para a coluna FileID. Essa regra CRUD será adicionada ao evento de salvamento do nosso objeto de negócios anterior na próxima etapa:

ticketinsertcrud.png

Agora, associamos a regra CRUD Ticket (Inserir no Arquivo) ao evento de salvamento do nosso segundo objeto de negócios Ticket (Arquivo) e adicionamos uma vinculação ao TicketID, conforme mostrado abaixo. Isso moverá todos os arquivos para a tabela File após a conclusão do upload. Como nossa tabela de tickets possui apenas uma coluna Binary File, essa configuração permite que um número dinâmico de arquivos seja associado a um único registro de Ticket:

ticketsaveevent.png

ingressoeventoregistro.png

Agora podemos passar para a camada de interface do usuário para configurar o widget em si. Nossa página consistirá em 2 painéis. Um usando Ticket (Fonte) e o outro usando Ticket (Arquivo):

pagedesign.png

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

paneldesign.png

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

ticketfilepaneldesign.png

filecontrol.png

Em Cosméticos > Informações do Widget, você selecionará o widget MultiFileUpload. Se desejar alterar algum dos parâmetros padrão, clique nas 3 caixas abaixo dos parâmetros, como mostrado a seguir:

widgetparameters.png

Aqui você pode ver que alteramos maxParallelUploads para 25. Embora runSave ainda seja 1, estamos exibindo-o aqui para demonstrar 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 ele esteja definido como 1 para funcionar corretamente. Se runSave não estiver definido como 1, não conseguiremos manipular vários arquivos.

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

Nota

Se você estiver carregando arquivos no Amazon S3 Bucket e procurando criar uma estrutura de diretório em camadas para os arquivos, consulte o Sistema de arquivos Amazon S3 artigo.

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