Widget de Upload de Vários Arquivos

Descrição

Este widget foi atualizado em janeiro de 2022

O Multi File Upload Widget 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 puxar 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: Control Widget

• Parâmetros:

  Nome do parâmetro	Padrão	Traduzível	Descrição
  allowImagePreview	1	No	Habilita (1) ou desabilita (0) a 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 carregados 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 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 como esperado e apenas os parâmetros acima foram testados.

Configuração

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

Definição de Mesa de Bilhetes

Definição de Tabela de Arquivo

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ócio é apenas um objeto de origem para a tabela Ticket. Este é o objeto de negócio que usaremos em nosso primeiro painel, 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), File e filename (opcional). Isso é importante porque precisamos de um objeto de negócios separado para o widget estar ligado para que vários arquivos possam ser carregados em paralelo:

Bilhete (inserir no Arquivo)

Nossa última regra de negócios é uma regra CRUD Insert que irá inserir um novo registro na tabela File. Nós direcionamos a tabela file e damos um NewUUID() para a coluna FileID. Esta regra CRUD será adicionada ao evento save para nosso objeto de negócios anterior na próxima etapa:

Agora associamos a regra CRUD Ticket (Insert to File) ao evento de salvamento do nosso segundo objeto de negócios Ticket (File) e adicionamos uma vinculação em TicketID, conforme mostrado abaixo. Isso moverá todos os arquivos para a tabela File assim que o upload for concluído. Como nossa tabela de tickets tem apenas uma única coluna Binary File, essa 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 UI para configurar o widget em si. Nossa página consistirá em 2 painéis. Um usando Ticket (Source) e o outro usando Ticket (File):

O painel usando Ticket (Source) tem menos restrições quando se trata de configuração, desde que nosso próximo painel esteja vinculado a ele. É assim que o nosso se parece:

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

Em Cosmetic > Widget Information você selecionará o MultiFileUpload Widget. Se você quiser alterar qualquer um dos parâmetros padrão, você pode fazer isso clicando nas 3 caixas sob parâmetros como:

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 File é configurada no evento Save de Ticket (File), precisamos ter certeza de que está definido como 1 para funcionar corretamente. Se runSave não estiver definido como 1, não poderemos manipular 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.

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