Blazor - Upload de arquivos (InteractiveServer)

Blazor - Upload de arquivos (InteractiveServer) - I

Neste artigo veremos como realizar o upload de arquivos no Blazor usando o modo de renderização InteractiveServer.

A partir do .NET 8 cada componente em um projeto Blazor Web App adota um modo de renderização para determinar o modelo de hospedagem que ele usa, onde é renderizado e se é interativo ou não

Assim, os modos de renderização Blazor no .NET 8 permitem que você controle como e onde seus componentes são renderizados. Atualmente os modos de renderização são:

-Static Server (Static Server Rendering )
-Interactive Server (Server Side Rendering)
-Interactive WebAssembly (Client Side Rendering)
-Interactive Auto (Interactive Server Side Rendering e a seguir Client Side Rendering)

A tabela a seguir descreve e define o local de renderização e a interatividade em cada modo :

Destacando que o modo de renderização Static Server Rendering é o modo de renderização padrão para aplicações Blazor no .NET 8 (sem interatividade)

Para aplicar um modo de renderização a um componente, usamos a diretiva @rendermode na instância do componente ou na definição do componente.

@rendermode InteractiveServer
@rendermode InteractiveWebAssembly
@rendermode InteractiveServerAuto

Para isso basta definir no arquivo _Imports.razor o uso do seguinte namespace:

@using static Microsoft.AspNetCore.Components.Web.RenderMode

O objetivo deste artigo é mostrar a implementação do envio de arquivos em uma aplicação Blazor usando o modo de renderização InteractiveServer.

Para fazer isso vamos precisar usar alguns recursos e a seguir vou vou destacar os principais recursos que iremos usar para implementar o upload de arquivos no Blazor.

InputFile

Para realizar o upload de arquivos no Blazor usamos o componente InputFile para ler os dados do arquivo do navegador.

Este componente renderiza um elemento HTML <input> do tipo file: (onde por padrão, o usuário seleciona apenas um arquivo por vez)

<InputFile OnChange="@CarregaArquivos" />

Para permitir que o usuário carregue mais de um arquivos usamos o atributo multiple :

<InputFile OnChange="@CarregaArquivos" multiple />

Além disso usamos a interface IBrowserFile que representa os dados de um arquivo selecionado de um InputFile e que permite acessar as propriedades ContentType, LastModified, Name e Size.

EditForm

O EditForm é um componente Blazor que permite coletar dados do usuário sendo renderizado como um formulário HTML com campos de entrada para cada campo de dados que você deseja coletar.

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">

    

   <DataAnnotationsValidator />

   <ValidationSummary />

<button type="submit">Enviar</button>

</EditForm>

Este componente possui os seguintes recursos:

Model: Uma propriedade de referência que especifica o modelo de dados que representa os dados do formulário.
OnValidSubmit: Um evento que é acionado quando o formulário é submetido com sucesso.
OnInvalidSubmit: Um evento que é acionado quando o formulário é submetido com erros de validação.
FormName: especifica o nome do formulário.
Method: especifica o método HTTP usado para enviar o formulário
Enctype: especifica o tipo de codificação usado para enviar o formulário.

Este componente fornece suporte integrado para a validação de dados e você pode usar os atributos de validação do Razor para especificar os requisitos de validação para cada campo de entrada.

O componente DataAnnotationsValidator é um componente Blazor que fornece suporte para a validação de dados usando as anotações de dados

O componente ValidationSummary é um componente do Blazor que exibe uma lista de mensagens de erro de validação.

OpenReadStream

Para ler dados de um arquivo selecionado pelo usuário, usamos o método OpenReadStream de IBrowserFile no arquivo e lendo o fluxo retornado.

O método OpenReadStream impõe um tamanho máximo de 500 KB para evitar a leitura de arquivos grandes na memória. A leitura de um arquivo ou de vários arquivos maiores que 500 KB resulta em uma exceção.

Podemos usar o parâmetro maxAllowedSize de OpenReadStream para definir um tamanho maior.

Devmos evitar as seguintes abordagens ao ler o arquivo selecionado como:

Evitar ler o stream de arquivos recebidos diretamente na memória de uma só vez.
Copiar todos os bytes do arquivo em um MemoryStream
Ler todo o stream em um array de bytes de uma vez

Essas abordagens podem resultar em problemas de desempenho e segurança, especialmente para componentes do lado do servidor.

A abordagem recomendada indica usar o seguinte código:

await using FileStream fs = new(path, FileMode.Create);

await browserFile.OpenReadStream().CopyToAsync(fs);

Aqui, estamos criando um objeto FileStream chamado fs para o caminho de arquivo especificado (path) com o modo de criação FileMode.Create e usamos a declaração await using para garantir que o FileStream será fechado corretamente após a conclusão do bloco.

A seguir lemos o stream de leitura (OpenReadStream()) do objeto browserFile e copiamos de forma assíncrona (CopyToAsync) para o FileStream fs.

Isso é usado para salvar o conteúdo do arquivo (browserFile) no arquivo no disco representado pelo FileStream (fs).

Regras de segurança

A seguir temos algumas regras de segurança que você deve verificar quando for implementar o upload de arquivos em produção :

Fazer o upload de arquivos para uma área dedicada de upload de arquivos, de preferência para uma unidade que não seja do sistema.
Não persistir os arquivos carregados na mesma árvore de diretórios do aplicativo
Usar um nome de arquivo seguro determinado pelo aplicativo e não um nome de arquivo fornecido pelo usuário ou o nome de arquivo não confiável para o arquivo enviado
Permitir apenas extensões de arquivo aprovadas para as especificações de design do aplicativo
Verificar o tamanho do arquivo carregado e definir um limite máximo de tamanho para evitar uploads grandes
Executar um verificador de vírus/malware no conteúdo carregado antes de o arquivo ser armazenado.

Do lado do servidor ou do cliente, não há limite de tamanho de leitura ou upload de arquivo especificamente para o componente InputFile.

No entanto, o Blazor do lado do cliente lê os bytes do arquivo em um único array de buffer JavaScript ao empacotar os dados de JavaScript para C#, que é limitado a 2 GB ou à memória disponível do dispositivo.

Assim neste cenário Uploads de arquivos grandes (> 250 MB) podem falhar em uploads do lado do cliente usando o componente InputFile.

Na próxima parte do artigo vamos aplicar todos esses conceitos para implementar o Upload de arquivos no Blazor...

"Porque do céu se manifesta a ira de Deus sobre toda a impiedade e injustiça dos homens, que detêm a verdade em injustiça."
Romanos 1:18

Referências:

José Carlos Macoratti