Widget de Upload de Vários Arquivos¶

Descrição¶

Este widget foi atualizado em janeiro de 2022

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

• 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	Ative (1) ou desative (0) a visualização para tipos de arquivo de imagem.
  allowMultiple	1	No	Habilite (1) ou desabilite (0) a adição de vários arquivos.
  forceReload	1	No	Habilite (1) ou desabilite (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 carregados em paralelo. O máximo testado é 100.
  runSave	1	No	Habilite (1) ou desabilite (0) a execução do evento save para cada arquivo que está sendo carregado na coluna de arquivo do Business Object.

  Mais parâmetros estão disponíveis para serem configurados 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¶

Todas as configurações/capturas de tela abaixo são baseadas no Vinyl versão 3.1.27791

Para que o widget Multi File Upload funcione corretamente, precisamos de 2 tabelas separadas. Uma para os arquivos serem salvos, em nosso exemplo esta é a tabela "Arquivo", e outra que associará seus uploads de arquivos a outros dados com base no caso de uso do seu aplicativo, em nosso exemplo esta é a tabela "Ticket".

Definição da Tabela de Tickets¶

Definição de Tabela de Arquivos¶

Agora que nossas tabelas estão configuradas, podemos passar para a configuração da regra 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ócios é apenas um objeto de origem para a tabela Ticket. Este é o objeto de negócio que usaremos em nosso primeiro painel ao qual nosso painel com o widget será vinculado e nos permitirá associar um arquivo a um registro específico:

Bilhete (arquivo)¶

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

Ticket (inserir no Arquivo)¶

Nossa última regra de negócio é uma regra Insert CRUD que irá inserir um novo registro na tabela File. Visamos a tabela de arquivos e fornecemos um NewUUID() para a coluna FileID. Esta regra CRUD será adicionada ao evento save do nosso business object anterior na próxima etapa:

Agora associamos a regra CRUD Ticket (Insert to File) ao evento save de nosso segundo objeto de negócios Ticket (File) e adicionamos uma ligação em TicketID conforme mostrado abaixo. Isso moverá todos os arquivos para a tabela Arquivo assim que o upload for concluído. Como nossa tabela de tickets possui apenas uma coluna de arquivo binário, esta configuração permite que um número dinâmico de arquivos seja associado a um único registro de ticket:

Agora podemos passar para a camada da UI para configurar o widget em si. Nossa página será composta por 2 painéis. Um usando Ticket (Fonte) e outro usando Ticket (Arquivo):

O painel que utiliza Ticket (Fonte) tem menos restrições no que diz respeito à configuração desde que nosso próximo painel esteja vinculado a ele. Esta é a aparência do nosso:

Nosso próximo painel utilizando Ticket (Arquivo) possui um único controle Arquivo onde iremos configurar o widget:

Em Cosmético > Informações do widget você selecionará o widget MultiFileUpload. Se desejar alterar qualquer um dos parâmetros padrão, você pode fazê-lo clicando nas 3 caixas abaixo dos parâmetros, como esta:

Aqui você pode ver que alteramos maxParallelUploads para 25. Embora runSave ainda seja 1, estamos mostrando aqui para mostrar sua importância para a funcionalidade de como este widget funciona. Como nossa regra CRUD que move nosso arquivo para a tabela Arquivo está configurada no evento Salvar de Ticket (Arquivo), precisamos ter certeza de que está definido como 1 para funcionar corretamente. Se runSave não estiver definido como 1, não seremos capazes de lidar com vários arquivos.

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

Exemplo de Vídeo de Implementação de Widget¶