Cargas de archivos de ASP.NET Core Blazor

En este artículo se explica cómo cargar archivos en Blazor con el componente InputFile.

Cargas de archivos

Advertencia

Sigue siempre los procedimientos recomendados de seguridad al permitir que los usuarios carguen archivos. Para obtener más información, consulta Cargar archivos en ASP.NET Core.

Usa el componente InputFile para leer los datos del archivo de explorador en código .NET. El componente InputFile representa un elemento HTML <input> de tipo file para cargas de archivo únicas. Agrega el atributo multiple para que sea posible cargar varios archivos a la vez.

La selección de archivos no es acumulativa cuando se usa un componente InputFile o su HTML <input type="file">subyacente, por lo que no se pueden agregar archivos a una selección de archivos existente. El componente siempre reemplaza la selección inicial del archivo del usuario, por lo que las referencias de archivo de las selecciones anteriores no están disponibles.

El componente InputFile siguiente ejecuta el método LoadFiles cuando se produce el evento OnChange (change). Un elemento InputFileChangeEventArgs proporciona acceso a la lista de archivos seleccionados y detalles de cada archivo:

<InputFile OnChange="LoadFiles" multiple />

@code {
    private void LoadFiles(InputFileChangeEventArgs e)
    {
        ...
    }
}

Código HTML representado:

<input multiple="" type="file" _bl_2="">

Nota

En el ejemplo anterior, el atributo _bl_2 del elemento <input> se usa para el procesamiento interno de Blazor.

Para leer datos de un archivo seleccionado por el usuario, llama a IBrowserFile.OpenReadStream en el archivo y lea del flujo devuelto. Para obtener más información, consulta la sección Flujos de archivos.

OpenReadStream impone un tamaño máximo en bytes de su Stream. La lectura de uno o varios archivos de más de 500 KB genera una excepción. Este límite evita que los desarrolladores lean accidentalmente archivos de gran tamaño en la memoria. El parámetro maxAllowedSize de OpenReadStream se puede utilizar para especificar un tamaño mayor si es necesario.

Si necesitas acceso a un objeto Stream que representa los bytes del archivo, use IBrowserFile.OpenReadStream. Evita leer la secuencia de archivos entrantes directamente en la memoria de una sola vez. Por ejemplo, no copies todos los bytes del archivo en MemoryStream ni leas toda la secuencia en una matriz de bytes de una sola la vez. Estos enfoques pueden dar lugar a un posible riesgo de denegación de servicio (DoS) y rendimiento degradado de las aplicaciones, especialmente para los componentes del lado servidor. Considera mejor adoptar uno de los siguientes enfoques:

• Copia la secuencia directamente en un archivo del disco sin leerla en la memoria. Ten en cuenta que Blazor las aplicaciones que ejecutan código en el servidor no pueden acceder directamente al sistema de archivos del cliente.
• Carga archivos desde el cliente directamente a un servicio externo. Para obtener más información, consulta la sección Carga de archivos en un servicio externo.

En los ejemplos siguientes, browserFile representa el archivo cargado e implementa IBrowserFile. Las implementaciones de trabajo de IBrowserFile se muestran en los componentes de carga de archivos más adelante en este artículo.

✔️Compatible: El siguiente enfoque se recomienda porque la clase Stream del archivo se proporciona directamente al consumidor, una clase FileStream que crea el archivo en la ruta de acceso proporcionada:

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

✔️Compatible: El siguiente enfoque se recomienda para Microsoft Azure Blob Storage porque la clase Stream del archivo se proporciona directamente a UploadBlobAsync:

await blobContainerClient.UploadBlobAsync(
    trustedFileName, browserFile.OpenReadStream());

❌No se recomienda: el siguiente enfoque NO se recomienda porque el contenido de Stream del archivo se lee en String en la memoria (reader):

var reader = 
    await new StreamReader(browserFile.OpenReadStream()).ReadToEndAsync();

❌No se recomienda: el siguiente enfoque NO se recomienda para Microsoft Azure Blob Storage porque el contenido de Stream del archivo se copia en MemoryStream en la memoria (memoryStream) antes de llamar a UploadBlobAsync:

var memoryStream = new MemoryStream();
await browserFile.OpenReadStream().CopyToAsync(memoryStream);
await blobContainerClient.UploadBlobAsync(
    trustedFileName, memoryStream));

Un componente que recibe un archivo de imagen puede llamar al método de conveniencia BrowserFileExtensions.RequestImageFileAsync en el archivo para cambiar el tamaño de los datos de imagen en el runtime de JavaScript del explorador antes de que la imagen se transmita a la aplicación. Los casos de uso para llamar al método RequestImageFileAsync son más adecuados para las aplicaciones Blazor WebAssembly.

Límites de lectura y carga del tamaño del archivo

En el lado servidor o en el lado cliente, no hay ningún límite de tamaño de lectura o carga de archivos específicamente para el componente de InputFile. Sin embargo, Blazor del lado cliente lee los bytes del archivo en un único búfer de matriz de JavaScript al serializar los datos de JavaScript a C#, que está limitado a 2 GB o a la memoria disponible del dispositivo. Las cargas de archivos grandes (> 250 MB) pueden producir errores en las cargas del lado cliente mediante el componente de InputFile. Para obtener más información, consulta las siguientes discusiones:

• El componente InputFile de Blazor debe controlar la fragmentación cuando se carga el archivo (dotnet/runtime #84685)
• Carga de streaming de solicitudes a través del controlador http (dotnet/runtime #36634)

En el caso de cargas de archivos grandes del lado cliente que producen un error al intentar usar el componente de InputFile, se recomienda fragmentar archivos grandes con un componente personalizado mediante varias solicitudes de intervalo HTTP en lugar de usar el componente de InputFile.

El trabajo está programado actualmente para .NET 9 (finales de 2024) para abordar la limitación de carga de tamaño de archivo del lado cliente.

Ejemplos

En los ejemplos siguientes se muestra la carga de varios archivos en un componente. InputFileChangeEventArgs.GetMultipleFiles permite leer varios archivos. Especifica el número máximo de archivos para evitar que un usuario malintencionado cargue más de los que la aplicación espera. InputFileChangeEventArgs.File permite leer el primer y único archivo si la carga de archivos no admite varios de ellos.

InputFileChangeEventArgs está en el espacio de nombres Microsoft.AspNetCore.Components.Forms, que suele ser uno de los espacios de nombres del archivo _Imports.razor de la aplicación. Cuando el espacio de nombres está presente en el archivo de _Imports.razor, proporciona acceso de miembro de API a los componentes de la aplicación.

Los espacios de nombres en el archivo _Imports.razor no se aplican a los archivos de C# (.cs). Los archivos de C# requieren una directiva de using explícita en la parte superior del archivo de clase:

using Microsoft.AspNetCore.Components.Forms;

Para probar los componentes de carga de archivos, puedes crear archivos de prueba de cualquier tamaño con PowerShell:

$out = new-object byte[] {SIZE}; (new-object Random).NextBytes($out); [IO.File]::WriteAllBytes('{PATH}', $out)

En el comando anterior:

• El marcador de posición {SIZE} es el tamaño del archivo en bytes (por ejemplo, 2097152 para un archivo de 2 MB).
• El marcador de posición {PATH} es la ruta de acceso y el archivo con la extensión de archivo (por ejemplo, D:/test_files/testfile2MB.txt).

Ejemplo de carga de archivos del lado servidor

Para usar el código siguiente, crea una carpeta Development/unsafe_uploads en la raíz de la aplicación que se ejecuta en el entorno Development.

Dado que en el ejemplo se usa el entorno de la aplicación como parte de la ruta de acceso donde se guardan los archivos, se requieren carpetas adicionales si se usan otros entornos en pruebas y producción. Por ejemplo, crea una carpeta Staging/unsafe_uploads para el entorno Staging. Crea una carpeta Production/unsafe_uploads para el entorno Production.

Advertencia

En el ejemplo se guardan archivos sin examinar su contenido, y las instrucciones de este artículo no tienen en cuenta los procedimientos recomendados de seguridad adicionales para los archivos cargados. En los sistemas de ensayo y producción, deshabilita el permiso de ejecución en la carpeta de carga y examina los archivos con una API de escáner antivirus/antimalware inmediatamente después de la carga. Para obtener más información, consulta Cargar archivos en ASP.NET Core.

FileUpload1.razor:

@page "/file-upload-1"
@using System 
@using System.IO
@using Microsoft.AspNetCore.Hosting
@inject ILogger<FileUpload1> Logger
@inject IWebHostEnvironment Environment

<PageTitle>File Upload 1</PageTitle>

<h1>File Upload Example 1</h1>

<p>
    <label>
        Max file size:
        <input type="number" @bind="maxFileSize" />
    </label>
</p>

<p>
    <label>
        Max allowed files:
        <input type="number" @bind="maxAllowedFiles" />
    </label>
</p>

<p>
    <label>
        Upload up to @maxAllowedFiles of up to @maxFileSize bytes:
        <InputFile OnChange="LoadFiles" multiple />
    </label>
</p>

@if (isLoading)
{
    <p>Uploading...</p>
}
else
{
    <ul>
        @foreach (var file in loadedFiles)
        {
            <li>
                <ul>
                    <li>Name: @file.Name</li>
                    <li>Last modified: @file.LastModified.ToString()</li>
                    <li>Size (bytes): @file.Size</li>
                    <li>Content type: @file.ContentType</li>
                </ul>
            </li>
        }
    </ul>
}

@code {
    private List<IBrowserFile> loadedFiles = new();
    private long maxFileSize = 1024 * 15;
    private int maxAllowedFiles = 3;
    private bool isLoading;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        isLoading = true;
        loadedFiles.Clear();

        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            try
            {
                var trustedFileName = Path.GetRandomFileName();
                var path = Path.Combine(Environment.ContentRootPath,
                    Environment.EnvironmentName, "unsafe_uploads",
                    trustedFileName);

                await using FileStream fs = new(path, FileMode.Create);
                await file.OpenReadStream(maxFileSize).CopyToAsync(fs);

                loadedFiles.Add(file);

                Logger.LogInformation(
                    "Unsafe Filename: {UnsafeFilename} File saved: {Filename}",
                    file.Name, trustedFileName);
            }
            catch (Exception ex)
            {
                Logger.LogError("File: {Filename} Error: {Error}", 
                    file.Name, ex.Message);
            }
        }

        isLoading = false;
    }
}

Ejemplo de carga de archivos del lado cliente

En el ejemplo siguiente se procesan bytes de archivo y no se envían archivos a un destino fuera de la aplicación. Si quieres ver un ejemplo de un componente Razor que envía un archivo a un servidor o servicio, consulta las secciones siguientes:

• Carga de archivos en un servidor con representación del lado cliente (CRS)
• Carga de archivos en un servicio externo

El componente supone que el modo de representación de WebAssembly interactivo (InteractiveWebAssembly) se hereda de un componente primario o se aplica globalmente a la aplicación.

@page "/file-upload-1"
@inject ILogger<FileUpload1> Logger

<PageTitle>File Upload 1</PageTitle>

<h1>File Upload Example 1</h1>

<p>
    <label>
        Max file size:
        <input type="number" @bind="maxFileSize" />
    </label>
</p>

<p>
    <label>
        Max allowed files:
        <input type="number" @bind="maxAllowedFiles" />
    </label>
</p>

<p>
    <label>
        Upload up to @maxAllowedFiles of up to @maxFileSize bytes:
        <InputFile OnChange="LoadFiles" multiple />
    </label>
</p>

@if (isLoading)
{
    <p>Uploading...</p>
}
else
{
    <ul>
        @foreach (var file in loadedFiles)
        {
            <li>
                <ul>
                    <li>Name: @file.Name</li>
                    <li>Last modified: @file.LastModified.ToString()</li>
                    <li>Size (bytes): @file.Size</li>
                    <li>Content type: @file.ContentType</li>
                </ul>
            </li>
        }
    </ul>
}

@code {
    private List<IBrowserFile> loadedFiles = new();
    private long maxFileSize = 1024 * 15;
    private int maxAllowedFiles = 3;
    private bool isLoading;

    private void LoadFiles(InputFileChangeEventArgs e)
    {
        isLoading = true;
        loadedFiles.Clear();

        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            try
            {
                loadedFiles.Add(file);
            }
            catch (Exception ex)
            {
                Logger.LogError("File: {FileName} Error: {Error}", 
                    file.Name, ex.Message);
            }
        }

        isLoading = false;
    }
}

IBrowserFile devuelve metadatos que expone el explorador como propiedades. Usa estos metadatos para la validación preliminar.

• Name
• Size
• LastModified
• ContentType

Nunca confíes en los valores de las propiedades anteriores, especialmente la propiedad Name para mostrarse en la interfaz de usuario. Trata todos los datos proporcionados por el usuario como un riesgo de seguridad significativo para la aplicación, el servidor y la red. Para obtener más información, consulta Cargar archivos en ASP.NET Core.

Carga de archivos en un servidor con representación del lado servidor

Esta sección se aplica a los componentes del servidor interactivo en Blazor Web App o aplicaciones Blazor Server.

En el ejemplo siguiente se muestra cómo cargar archivos desde una aplicación del lado servidor a un controlador de API web back-end en una aplicación independiente, posiblemente en un servidor independiente.

En el archivo Program de la aplicación del lado servidor, agrega IHttpClientFactory y servicios relacionados que permitan a la aplicación crear instancias de HttpClient:

builder.Services.AddHttpClient();

Para obtener más información, consulta Realización de solicitudes HTTP con IHttpClientFactory en ASP.NET Core.

Para los ejemplos en esta sección:

• La API web se ejecuta en la dirección URL: https://localhost:5001
• La aplicación del lado servidor se ejecuta en la dirección URL: https://localhost:5003

Para pruebas, las direcciones URL anteriores se configuran en los archivos Properties/launchSettings.json de los proyectos.

La siguiente clase UploadResult mantiene el resultado de un archivo cargado. Si no se puede cargar un archivo en el servidor, se devuelve un código de error en ErrorCode para mostrarlo al usuario. Se genera un nombre de archivo seguro en el servidor para cada archivo y se devuelve al cliente en StoredFileName para mostrarlo. Los archivos se codifican entre el cliente y el servidor mediante el nombre de archivo no seguro o no confiable en FileName.

UploadResult.cs:

public class UploadResult
{
    public bool Uploaded { get; set; }
    public string? FileName { get; set; }
    public string? StoredFileName { get; set; }
    public int ErrorCode { get; set; }
}

Un procedimiento recomendado de seguridad para las aplicaciones de producción es evitar el envío de mensajes de error a los clientes que podrían revelar información confidencial sobre una aplicación, un servidor o una red. Proporcionar mensajes de error detallados puede ayudar a un usuario malintencionado a idear ataques a una aplicación, servidor o red. El código de ejemplo de esta sección solo devuelve un número de código de error (int) para que lo muestre en el lado cliente del componente si se produce un error del lado servidor. Si un usuario necesita ayuda con la carga de un archivo, proporciona el código de error al personal de soporte técnico para la resolución de la incidencia de soporte técnico sin conocer la causa exacta del error.

La siguiente clase LazyBrowserFileStream define un tipo de flujo personalizado que llama de forma diferida a OpenReadStream justo antes de que se soliciten los primeros bytes de la secuencia. La secuencia no se transmite desde el explorador al servidor hasta que comienza la lectura de la secuencia en .NET.

LazyBrowserFileStream.cs:

using Microsoft.AspNetCore.Components.Forms;
using System.Diagnostics.CodeAnalysis;

namespace BlazorSample;

internal sealed class LazyBrowserFileStream(IBrowserFile file, int maxAllowedSize) 
    : Stream
{
    private readonly IBrowserFile file = file;
    private readonly int maxAllowedSize = maxAllowedSize;
    private Stream? underlyingStream;
    private bool isDisposed;

    public override bool CanRead => true;

    public override bool CanSeek => false;

    public override bool CanWrite => false;

    public override long Length => file.Size;

    public override long Position
    {
        get => underlyingStream?.Position ?? 0;
        set => throw new NotSupportedException();
    }

    public override void Flush() => underlyingStream?.Flush();

    public override Task<int> ReadAsync(byte[] buffer, int offset, int count, 
        CancellationToken cancellationToken)
    {
        EnsureStreamIsOpen();

        return underlyingStream.ReadAsync(buffer, offset, count, cancellationToken);
    }

    public override ValueTask<int> ReadAsync(Memory<byte> buffer, 
        CancellationToken cancellationToken = default)
    {
        EnsureStreamIsOpen();
        return underlyingStream.ReadAsync(buffer, cancellationToken);
    }

    [MemberNotNull(nameof(underlyingStream))]
    private void EnsureStreamIsOpen() => 
        underlyingStream ??= file.OpenReadStream(maxAllowedSize);

    protected override void Dispose(bool disposing)
    {
        if (isDisposed)
        {
            return;
        }

        underlyingStream?.Dispose();
        isDisposed = true;

        base.Dispose(disposing);
    }

    public override int Read(byte[] buffer, int offset, int count)
        => throw new NotSupportedException();

    public override long Seek(long offset, SeekOrigin origin)
        => throw new NotSupportedException();

    public override void SetLength(long value)
        => throw new NotSupportedException();

    public override void Write(byte[] buffer, int offset, int count)
        => throw new NotSupportedException();
}

El componente FileUpload2 siguiente:

• Permite a los usuarios cargar archivos desde el cliente.
• Muestra el nombre de archivo no seguro o no confiable proporcionado por el cliente en la interfaz de usuario. Razor codifica automáticamente en HTML el nombre de archivo no seguro o no confiable para mostrarse de forma segura en la interfaz de usuario.

Advertencia

No confíes en los nombres de archivo proporcionados por los clientes para:

• Guardar el archivo en un sistema de archivos o servicio.
• Mostrarlos en las interfaces de usuario que no codifican nombres de archivo automáticamente o mediante código para desarrolladores.

Para obtener más información sobre las consideraciones de seguridad al cargar archivos en un servidor, consulta Cargar archivos en ASP.NET Core.

FileUpload2.razor:

@page "/file-upload-2"
@using System.Net.Http.Headers
@using System.Text.Json
@inject IHttpClientFactory ClientFactory
@inject ILogger<FileUpload2> Logger

<PageTitle>File Upload 2</PageTitle>

<h1>File Upload Example 2</h1>

<p>
    This example requires a backend server API to function. For more information, 
    see the <em>Upload files to a server</em> section 
    of the <em>ASP.NET Core Blazor file uploads</em> article.
</p>

<p>
    <label>
        Upload up to @maxAllowedFiles files:
        <InputFile OnChange="OnInputFileChange" multiple />
    </label>
</p>

@if (files.Any())
{
    <div class="card">
        <div class="card-body">
            <ul>
                @foreach (var file in files)
                {
                    <li>
                        File: @file.Name
                        <br>
                        @if (FileUpload(uploadResults, file.Name, Logger,
                           out var result))
                        {
                            <span>
                                Stored File Name: @result.StoredFileName
                            </span>
                        }
                        else
                        {
                            <span>
                                There was an error uploading the file
                                (Error: @result.ErrorCode).
                            </span>
                        }
                    </li>
                }
            </ul>
        </div>
    </div>
}

@code {
    private List<File> files = new();
    private List<UploadResult> uploadResults = new();
    private int maxAllowedFiles = 3;
    private bool shouldRender;

    protected override bool ShouldRender() => shouldRender;

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        shouldRender = false;
        int maxFileSize = 1024 * 15;
        var upload = false;

        using var content = new MultipartFormDataContent();

        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            if (uploadResults.SingleOrDefault(
                f => f.FileName == file.Name) is null)
            {
                try
                {
                    files.Add(new() { Name = file.Name });

                    var stream = new LazyBrowserFileStream(file, maxFileSize);
                    var fileContent = new StreamContent(stream);

                    fileContent.Headers.ContentType = 
                        new MediaTypeHeaderValue(file.ContentType);

                    content.Add(
                        content: fileContent,
                        name: "\"files\"",
                        fileName: file.Name);

                    upload = true;
                }
                catch (Exception ex)
                {
                    Logger.LogInformation(
                        "{FileName} not uploaded (Err: 6): {Message}", 
                        file.Name, ex.Message);

                    uploadResults.Add(
                        new()
                        {
                            FileName = file.Name, 
                            ErrorCode = 6, 
                            Uploaded = false
                        });
                }
            }
        }

        if (upload)
        {
            var client = ClientFactory.CreateClient();

            var response = 
                await client.PostAsync("https://localhost:5001/Filesave", 
                content);

            if (response.IsSuccessStatusCode)
            {
                var options = new JsonSerializerOptions
                {
                    PropertyNameCaseInsensitive = true,
                };

                using var responseStream =
                    await response.Content.ReadAsStreamAsync();

                var newUploadResults = await JsonSerializer
                    .DeserializeAsync<IList<UploadResult>>(responseStream, options);

                if (newUploadResults is not null)
                {
                    uploadResults = uploadResults.Concat(newUploadResults).ToList();
                }
            }
        }

        shouldRender = true;
    }

    private static bool FileUpload(IList<UploadResult> uploadResults,
        string? fileName, ILogger<FileUpload2> logger, out UploadResult result)
    {
        result = uploadResults.SingleOrDefault(f => f.FileName == fileName) ?? new();

        if (!result.Uploaded)
        {
            logger.LogInformation("{FileName} not uploaded (Err: 5)", fileName);
            result.ErrorCode = 5;
        }

        return result.Uploaded;
    }

    private class File
    {
        public string? Name { get; set; }
    }
}

Si el componente limita las cargas de archivos a un solo archivo a la vez o si el componente solo adopta la representación interactiva del lado cliente (CSR, InteractiveWebAssembly), el componente puede evitar el uso de LazyBrowserFileStream y un Stream. A continuación, se muestran los cambios del componente FileUpload2:

- var stream = new LazyBrowserFileStream(file, maxFileSize);
- var fileContent = new StreamContent(stream);
+ var fileContent = new StreamContent(file.OpenReadStream(maxFileSize));

Quita la clase LazyBrowserFileStream (LazyBrowserFileStream.cs), ya que no se usa.

El siguiente controlador del proyecto API web guarda los archivos cargados desde el cliente.

Importante

El controlador de esta sección está diseñado para su uso en un proyecto de API web independiente desde la aplicación Blazor. La API web debe mitigar los ataques de falsificación de solicitudes entre sitios (XSRF/CSRF) si se autentican los usuarios de carga de archivos.

Para usar el código siguiente, crea una carpeta Development/unsafe_uploads en la raíz del proyecto API web para la aplicación que se ejecuta en el entornoDevelopment.

Dado que en el ejemplo se usa el entorno de la aplicación como parte de la ruta de acceso donde se guardan los archivos, se requieren carpetas adicionales si se usan otros entornos en pruebas y producción. Por ejemplo, crea una carpeta Staging/unsafe_uploads para el entorno Staging. Crea una carpeta Production/unsafe_uploads para el entorno Production.

Advertencia

En el ejemplo se guardan archivos sin examinar su contenido, y las instrucciones de este artículo no tienen en cuenta los procedimientos recomendados de seguridad adicionales para los archivos cargados. En los sistemas de ensayo y producción, deshabilita el permiso de ejecución en la carpeta de carga y examina los archivos con una API de escáner antivirus/antimalware inmediatamente después de la carga. Para obtener más información, consulta Cargar archivos en ASP.NET Core.

Controllers/FilesaveController.cs:

using System.Net;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("[controller]")]
public class FilesaveController(
    IHostEnvironment env, ILogger<FilesaveController> logger) 
    : ControllerBase
{
    [HttpPost]
    public async Task<ActionResult<IList<UploadResult>>> PostFile(
        [FromForm] IEnumerable<IFormFile> files)
    {
        var maxAllowedFiles = 3;
        long maxFileSize = 1024 * 15;
        var filesProcessed = 0;
        var resourcePath = new Uri($"{Request.Scheme}://{Request.Host}/");
        List<UploadResult> uploadResults = [];

        foreach (var file in files)
        {
            var uploadResult = new UploadResult();
            string trustedFileNameForFileStorage;
            var untrustedFileName = file.FileName;
            uploadResult.FileName = untrustedFileName;
            var trustedFileNameForDisplay =
                WebUtility.HtmlEncode(untrustedFileName);

            if (filesProcessed < maxAllowedFiles)
            {
                if (file.Length == 0)
                {
                    logger.LogInformation("{FileName} length is 0 (Err: 1)",
                        trustedFileNameForDisplay);
                    uploadResult.ErrorCode = 1;
                }
                else if (file.Length > maxFileSize)
                {
                    logger.LogInformation("{FileName} of {Length} bytes is " +
                        "larger than the limit of {Limit} bytes (Err: 2)",
                        trustedFileNameForDisplay, file.Length, maxFileSize);
                    uploadResult.ErrorCode = 2;
                }
                else
                {
                    try
                    {
                        trustedFileNameForFileStorage = Path.GetRandomFileName();
                        var path = Path.Combine(env.ContentRootPath,
                            env.EnvironmentName, "unsafe_uploads",
                            trustedFileNameForFileStorage);

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

                        logger.LogInformation("{FileName} saved at {Path}",
                            trustedFileNameForDisplay, path);
                        uploadResult.Uploaded = true;
                        uploadResult.StoredFileName = trustedFileNameForFileStorage;
                    }
                    catch (IOException ex)
                    {
                        logger.LogError("{FileName} error on upload (Err: 3): {Message}",
                            trustedFileNameForDisplay, ex.Message);
                        uploadResult.ErrorCode = 3;
                    }
                }

                filesProcessed++;
            }
            else
            {
                logger.LogInformation("{FileName} not uploaded because the " +
                    "request exceeded the allowed {Count} of files (Err: 4)",
                    trustedFileNameForDisplay, maxAllowedFiles);
                uploadResult.ErrorCode = 4;
            }

            uploadResults.Add(uploadResult);
        }

        return new CreatedResult(resourcePath, uploadResults);
    }
}

En el código anterior, se llama a GetRandomFileName para generar un nombre de archivo seguro. No confíe nunca en el nombre de archivo proporcionado por el explorador, ya que un ciberdelincuente puede elegir un nombre de archivo existente que sobrescriba un archivo existente o enviar una ruta de acceso que intente escribir fuera de la aplicación.

La aplicación de servidor debe registrar los servicios de controlador y los puntos de conexión del controlador de asignación. Para obtener más información, consulta Enrutamiento a acciones de controlador en ASP.NET Core.

Carga de archivos en un servidor con representación del lado cliente (CRS)

Esta sección se aplica a los componentes representados del lado cliente (CSR) en Blazor Web App o aplicaciones de Blazor WebAssembly.

En el ejemplo siguiente se muestra el procedimiento para cargar archivos a un controlador de API web de back-end, posiblemente en un servidor independiente, desde un componente en Blazor Web App que adopta CSR o un componente en una aplicación Blazor WebAssembly.

La siguiente clase UploadResult mantiene el resultado de un archivo cargado. Si no se puede cargar un archivo en el servidor, se devuelve un código de error en ErrorCode para mostrarlo al usuario. Se genera un nombre de archivo seguro en el servidor para cada archivo y se devuelve al cliente en StoredFileName para mostrarlo. Los archivos se codifican entre el cliente y el servidor mediante el nombre de archivo no seguro o no confiable en FileName.

UploadResult.cs:

public class UploadResult
{
    public bool Uploaded { get; set; }
    public string? FileName { get; set; }
    public string? StoredFileName { get; set; }
    public int ErrorCode { get; set; }
}

Nota:

La clase UploadResult anterior se puede compartir entre proyectos basados en cliente y servidor. Cuando los proyectos del lado cliente y servidor comparten la clase, agregue una importación al archivo _Imports.razor de cada proyecto para el proyecto compartido. Por ejemplo:

@using BlazorSample.Shared

El componente FileUpload2 siguiente:

• Permite a los usuarios cargar archivos desde el cliente.
• Muestra el nombre de archivo no seguro o no confiable proporcionado por el cliente en la interfaz de usuario. Razor codifica automáticamente en HTML el nombre de archivo no seguro o no confiable para mostrarse de forma segura en la interfaz de usuario.

Un procedimiento recomendado de seguridad para las aplicaciones de producción es evitar el envío de mensajes de error a los clientes que podrían revelar información confidencial sobre una aplicación, un servidor o una red. Proporcionar mensajes de error detallados puede ayudar a un usuario malintencionado a idear ataques a una aplicación, servidor o red. El código de ejemplo de esta sección solo devuelve un número de código de error (int) para que lo muestre en el lado cliente del componente si se produce un error del lado servidor. Si un usuario necesita ayuda con la carga de un archivo, proporciona el código de error al personal de soporte técnico para la resolución de la incidencia de soporte técnico sin conocer la causa exacta del error.

Advertencia

No confíes en los nombres de archivo proporcionados por los clientes para:

• Guardar el archivo en un sistema de archivos o servicio.
• Mostrarlos en las interfaces de usuario que no codifican nombres de archivo automáticamente o mediante código para desarrolladores.

Para obtener más información sobre las consideraciones de seguridad al cargar archivos en un servidor, consulta Cargar archivos en ASP.NET Core.

En el proyecto principal de Blazor Web App, agrega IHttpClientFactory y servicios relacionados en el archivo Program del proyecto:

builder.Services.AddHttpClient();

Los servicios HttpClient se deben agregar al proyecto principal, porque el componente del lado cliente se representa previamente en el servidor. Si deshabilitas la representación previa para el siguiente componente, no es necesario proporcionar los servicios HttpClient en la aplicación principal y no es necesario agregar la línea anterior al proyecto principal.

Para obtener más información sobre cómo agregar servicios HttpClient a una aplicación de ASP.NET Core, consulta Realización de solicitudes HTTP con IHttpClientFactory en ASP.NET Core.

El proyecto de cliente (.Client) de un objeto Blazor Web App también debe registrar un objeto HttpClient para las solicitudes HTTP POST a un controlador de API web de back-end. Confirma o agrega lo siguiente al archivo Program del proyecto cliente:

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

En el ejemplo anterior se establece la dirección base con builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), que obtiene la dirección base de la aplicación y se deriva normalmente del valor href de la etiqueta <base> en la página host. Si llamas a una API web externa, establece el URI en la dirección base de la API web.

Especifica el atributo del modo de representación WebAssembly interactivo en la parte superior del componente siguiente en una Blazor Web App:

@rendermode InteractiveWebAssembly

FileUpload2.razor:

@page "/file-upload-2"
@using System.Linq
@using System.Net.Http.Headers
@inject HttpClient Http
@inject ILogger<FileUpload2> Logger

<PageTitle>File Upload 2</PageTitle>

<h1>File Upload Example 2</h1>

<p>
    <label>
        Upload up to @maxAllowedFiles files:
        <InputFile OnChange="OnInputFileChange" multiple />
    </label>
</p>

@if (files.Count > 0)
{
    <div class="card">
        <div class="card-body">
            <ul>
                @foreach (var file in files)
                {
                    <li>
                        File: @file.Name
                        <br>
                        @if (FileUpload(uploadResults, file.Name, Logger,
                           out var result))
                        {
                            <span>
                                Stored File Name: @result.StoredFileName
                            </span>
                        }
                        else
                        {
                            <span>
                                There was an error uploading the file
                                (Error: @result.ErrorCode).
                            </span>
                        }
                    </li>
                }
            </ul>
        </div>
    </div>
}

@code {
    private List<File> files = new();
    private List<UploadResult> uploadResults = new();
    private int maxAllowedFiles = 3;
    private bool shouldRender;

    protected override bool ShouldRender() => shouldRender;

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        shouldRender = false;
        long maxFileSize = 1024 * 15;
        var upload = false;

        using var content = new MultipartFormDataContent();

        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            if (uploadResults.SingleOrDefault(
                f => f.FileName == file.Name) is null)
            {
                try
                {
                    files.Add(new() { Name = file.Name });

                    var fileContent = new StreamContent(file.OpenReadStream(maxFileSize));

                    fileContent.Headers.ContentType = 
                        new MediaTypeHeaderValue(file.ContentType);

                    content.Add(
                        content: fileContent,
                        name: "\"files\"",
                        fileName: file.Name);

                    upload = true;
                }
                catch (Exception ex)
                {
                    Logger.LogInformation(
                        "{FileName} not uploaded (Err: 6): {Message}", 
                        file.Name, ex.Message);

                    uploadResults.Add(
                        new()
                        {
                            FileName = file.Name, 
                            ErrorCode = 6, 
                            Uploaded = false
                        });
                }
            }
        }

        if (upload)
        {
            var response = await Http.PostAsync("/Filesave", content);

            var newUploadResults = await response.Content
                .ReadFromJsonAsync<IList<UploadResult>>();

            if (newUploadResults is not null)
            {
                uploadResults = uploadResults.Concat(newUploadResults).ToList();
            }
        }

        shouldRender = true;
    }

    private static bool FileUpload(IList<UploadResult> uploadResults,
        string? fileName, ILogger<FileUpload2> logger, out UploadResult result)
    {
        result = uploadResults.SingleOrDefault(f => f.FileName == fileName) ?? new();

        if (!result.Uploaded)
        {
            logger.LogInformation("{FileName} not uploaded (Err: 5)", fileName);
            result.ErrorCode = 5;
        }

        return result.Uploaded;
    }

    private class File
    {
        public string? Name { get; set; }
    }
}

El controlador siguiente del proyecto del lado servidor guarda los archivos cargados del cliente.

Para usar el código siguiente, crea una carpeta Development/unsafe_uploads en la raíz del proyecto del lado servidor para la aplicación que se ejecuta en el entorno de Development.

Dado que en el ejemplo se usa el entorno de la aplicación como parte de la ruta de acceso donde se guardan los archivos, se requieren carpetas adicionales si se usan otros entornos en pruebas y producción. Por ejemplo, crea una carpeta Staging/unsafe_uploads para el entorno Staging. Crea una carpeta Production/unsafe_uploads para el entorno Production.

Advertencia

En el ejemplo se guardan archivos sin examinar su contenido, y las instrucciones de este artículo no tienen en cuenta los procedimientos recomendados de seguridad adicionales para los archivos cargados. En los sistemas de ensayo y producción, deshabilita el permiso de ejecución en la carpeta de carga y examina los archivos con una API de escáner antivirus/antimalware inmediatamente después de la carga. Para obtener más información, consulta Cargar archivos en ASP.NET Core.

En el ejemplo siguiente, actualiza el espacio de nombres del proyecto compartido para que coincida con el proyecto compartido si un proyecto compartido proporciona la clase UploadResult.

Controllers/FilesaveController.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Net;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using BlazorSample.Shared;

[ApiController]
[Route("[controller]")]
public class FilesaveController(
    IHostEnvironment env, ILogger<FilesaveController> logger) 
    : ControllerBase
{
    [HttpPost]
    public async Task<ActionResult<IList<UploadResult>>> PostFile(
        [FromForm] IEnumerable<IFormFile> files)
    {
        var maxAllowedFiles = 3;
        long maxFileSize = 1024 * 15;
        var filesProcessed = 0;
        var resourcePath = new Uri($"{Request.Scheme}://{Request.Host}/");
        List<UploadResult> uploadResults = [];

        foreach (var file in files)
        {
            var uploadResult = new UploadResult();
            string trustedFileNameForFileStorage;
            var untrustedFileName = file.FileName;
            uploadResult.FileName = untrustedFileName;
            var trustedFileNameForDisplay =
                WebUtility.HtmlEncode(untrustedFileName);

            if (filesProcessed < maxAllowedFiles)
            {
                if (file.Length == 0)
                {
                    logger.LogInformation("{FileName} length is 0 (Err: 1)",
                        trustedFileNameForDisplay);
                    uploadResult.ErrorCode = 1;
                }
                else if (file.Length > maxFileSize)
                {
                    logger.LogInformation("{FileName} of {Length} bytes is " +
                        "larger than the limit of {Limit} bytes (Err: 2)",
                        trustedFileNameForDisplay, file.Length, maxFileSize);
                    uploadResult.ErrorCode = 2;
                }
                else
                {
                    try
                    {
                        trustedFileNameForFileStorage = Path.GetRandomFileName();
                        var path = Path.Combine(env.ContentRootPath,
                            env.EnvironmentName, "unsafe_uploads",
                            trustedFileNameForFileStorage);

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

                        logger.LogInformation("{FileName} saved at {Path}",
                            trustedFileNameForDisplay, path);
                        uploadResult.Uploaded = true;
                        uploadResult.StoredFileName = trustedFileNameForFileStorage;
                    }
                    catch (IOException ex)
                    {
                        logger.LogError("{FileName} error on upload (Err: 3): {Message}",
                            trustedFileNameForDisplay, ex.Message);
                        uploadResult.ErrorCode = 3;
                    }
                }

                filesProcessed++;
            }
            else
            {
                logger.LogInformation("{FileName} not uploaded because the " +
                    "request exceeded the allowed {Count} of files (Err: 4)",
                    trustedFileNameForDisplay, maxAllowedFiles);
                uploadResult.ErrorCode = 4;
            }

            uploadResults.Add(uploadResult);
        }

        return new CreatedResult(resourcePath, uploadResults);
    }
}

En el código anterior, se llama a GetRandomFileName para generar un nombre de archivo seguro. No confíe nunca en el nombre de archivo proporcionado por el explorador, ya que un ciberdelincuente puede elegir un nombre de archivo existente que sobrescriba un archivo existente o enviar una ruta de acceso que intente escribir fuera de la aplicación.

La aplicación de servidor debe registrar los servicios de controlador y los puntos de conexión del controlador de asignación. Para obtener más información, consulta Enrutamiento a acciones de controlador en ASP.NET Core.

Cancelación de una carga de archivos

Un componente de carga de archivos puede detectar cuándo un usuario ha cancelado una carga mediante CancellationToken al llamar a IBrowserFile.OpenReadStream o StreamReader.ReadAsync.

Crea un elemento CancellationTokenSource para el componente InputFile. Al principio del método OnInputFileChange, comprueba si hay una carga anterior en curso.

Si hay una carga de archivos en curso:

• Llama a Cancel en la carga anterior.
• Crea un nuevo CancellationTokenSource para la siguiente carga y pase CancellationTokenSource.Token a OpenReadStream o ReadAsync.

Carga de archivos en el lado servidor con progreso

En el ejemplo siguiente se muestra cómo cargar archivos en una aplicación del lado servidor con el progreso de carga mostrado al usuario.

Para usar el siguiente ejemplo en una aplicación de prueba:

• Crea una carpeta para guardar los archivos cargados para el entorno Development: Development/unsafe_uploads.
• Configura el tamaño de archivo máximo (maxFileSize, 15 MB en el siguiente ejemplo) y el número máximo de archivos permitidos (maxAllowedFiles, 3 en el siguiente ejemplo).
• Establece el búfer en un valor diferente (10 KB en el siguiente ejemplo), si lo deseas, para aumentar la granularidad en los informes en curso. No se recomienda usar un búfer de más de 30 KB debido a problemas de rendimiento y seguridad.

Advertencia

En el ejemplo se guardan archivos sin examinar su contenido, y las instrucciones de este artículo no tienen en cuenta los procedimientos recomendados de seguridad adicionales para los archivos cargados. En los sistemas de ensayo y producción, deshabilita el permiso de ejecución en la carpeta de carga y examina los archivos con una API de escáner antivirus/antimalware inmediatamente después de la carga. Para obtener más información, consulta Cargar archivos en ASP.NET Core.

FileUpload3.razor:

@page "/file-upload-3"
@inject ILogger<FileUpload3> Logger
@inject IWebHostEnvironment Environment

<PageTitle>File Upload 3</PageTitle>

<h1>File Upload Example 3</h1>

<p>
    <label>
        Max file size:
        <input type="number" @bind="maxFileSize" />
    </label>
</p>

<p>
    <label>
        Max allowed files:
        <input type="number" @bind="maxAllowedFiles" />
    </label>
</p>

<p>
    <label>
        Upload up to @maxAllowedFiles of up to @maxFileSize bytes:
        <InputFile OnChange="LoadFiles" multiple />
    </label>
</p>

@if (isLoading)
{
    <p>Progress: @string.Format("{0:P0}", progressPercent)</p>
}
else
{
    <ul>
        @foreach (var file in loadedFiles)
        {
            <li>
                <ul>
                    <li>Name: @file.Name</li>
                    <li>Last modified: @file.LastModified.ToString()</li>
                    <li>Size (bytes): @file.Size</li>
                    <li>Content type: @file.ContentType</li>
                </ul>
            </li>
        }
    </ul>
}

@code {
    private List<IBrowserFile> loadedFiles = new();
    private long maxFileSize = 1024 * 15;
    private int maxAllowedFiles = 3;
    private bool isLoading;
    private decimal progressPercent;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        isLoading = true;
        loadedFiles.Clear();
        progressPercent = 0;

        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            try
            {
                var trustedFileName = Path.GetRandomFileName();
                var path = Path.Combine(Environment.ContentRootPath,
                    Environment.EnvironmentName, "unsafe_uploads", trustedFileName);

                await using FileStream writeStream = new(path, FileMode.Create);
                using var readStream = file.OpenReadStream(maxFileSize);
                var bytesRead = 0;
                var totalRead = 0;
                var buffer = new byte[1024 * 10];

                while ((bytesRead = await readStream.ReadAsync(buffer)) != 0)
                {
                    totalRead += bytesRead;
                    await writeStream.WriteAsync(buffer, 0, bytesRead);
                    progressPercent = Decimal.Divide(totalRead, file.Size);
                    StateHasChanged();
                }

                loadedFiles.Add(file);

                Logger.LogInformation(
                    "Unsafe Filename: {UnsafeFilename} File saved: {Filename}",
                    file.Name, trustedFileName);
            }
            catch (Exception ex)
            {
                Logger.LogError("File: {FileName} Error: {Error}", 
                    file.Name, ex.Message);
            }
        }

        isLoading = false;
    }
}

Para obtener más información, consulta los siguientes recursos de API:

• FileStream: proporciona Stream para un archivo, lo que permite operaciones de lectura y escritura sincrónica y asincrónica.
• FileStream.ReadAsync: el componente FileUpload3 anterior lee la secuencia de forma asincrónica con ReadAsync. No se admite la lectura sincrónica de una secuencia con Read en los componentes Razor.

Flujos de archivos

Con la interactividad del servidor, los datos de archivo se transmiten a través de la conexión de SignalR a código .NET en el servidor a medida que se lee el archivo.

En el caso de un componente representado por WebAssembly, los datos de archivo se transmiten directamente al código de .NET dentro del explorador.

Vista previa de carga de imágenes

Para obtener una vista previa de las imágenes que se cargan, empieza por agregar un componente InputFile con una referencia de componente y un controlador OnChange:

<InputFile @ref="inputFile" OnChange="ShowPreview" />

Agrega un elemento de imagen con una referencia de elemento, que actúa como marcador de posición para la vista previa de la imagen:

<img @ref="previewImageElem" />

Agrega las referencias asociadas:

@code {
    private InputFile? inputFile;
    private ElementReference previewImageElem;
}

En JavaScript, agrega una función a la que se llame con un elemento input HTML y un elemento img que haga lo siguiente:

• Extrae el archivo seleccionado.
• Crea una dirección URL de objeto con createObjectURL.
• Establece un agente de escucha de eventos para revocar la dirección URL del objeto con revokeObjectURL después de cargar la imagen, para que no se produzcan fugas de memoria.
• Establece el origen del elemento img para mostrar la imagen.

window.previewImage = (inputElem, imgElem) => {
  const url = URL.createObjectURL(inputElem.files[0]);
  imgElem.addEventListener('load', () => URL.revokeObjectURL(url), { once: true });
  imgElem.src = url;
}

Por último, use un elemento IJSRuntime insertado para agregar el controlador OnChange que llama a la función de JavaScript:

@inject IJSRuntime JS

...

@code {
    ...

    private async Task ShowPreview() => await JS.InvokeVoidAsync(
        "previewImage", inputFile!.Element, previewImageElem);
}

El ejemplo anterior es para cargar una sola imagen. El enfoque se puede ampliar para admitir imágenes multiple.

En el siguiente componente FileUpload4 se muestra el ejemplo completo.

FileUpload4.razor:

@page "/file-upload-4"
@inject IJSRuntime JS

<h1>File Upload Example</h1>

<InputFile @ref="inputFile" OnChange="ShowPreview" />

<img style="max-width:200px;max-height:200px" @ref="previewImageElem" />

@code {
    private InputFile? inputFile;
    private ElementReference previewImageElem;

    private async Task ShowPreview() => await JS.InvokeVoidAsync(
        "previewImage", inputFile!.Element, previewImageElem);
}

Carga de archivos en un servicio externo

En lugar de que una aplicación controle los bytes de carga de archivos y que el servidor de la aplicación reciba archivos cargados, los clientes pueden cargar archivos directamente en un servicio externo. La aplicación puede procesar de forma segura los archivos desde el servicio externo a petición. Este enfoque mejora la aplicación y su servidor frente a ataques malintencionados y posibles problemas de rendimiento.

Considera un enfoque que use Azure Files, Azure Blob Storage o un servicio de terceros con las siguientes ventajas potenciales:

• Carga archivos desde el cliente directamente en un servicio externo con una biblioteca cliente de JavaScript o una API REST. Por ejemplo, Azure ofrece las siguientes de bibliotecas cliente y API:
  • Biblioteca cliente de recursos compartidos de archivos de Azure Storage
  • API REST de Azure Files
  • Biblioteca cliente de Azure Storage Blob para JavaScript
  • API REST de Blob service
• Autoriza las cargas de usuario con un token de firma de acceso compartido (SAS) delegado por el usuario generado por la aplicación (lado servidor) para cada carga de archivos cliente. Por ejemplo, Azure ofrece las siguientes características de SAS:
  • Biblioteca cliente de recursos compartidos de archivos de Azure Storage para JavaScript: con token de SAS
  • Biblioteca cliente de Azure Storage Blob para JavaScript: con token de SAS
• Proporciona redundancia automática y copia de seguridad de recursos compartido de archivos.
• Limita las cargas con cuotas. Ten en cuenta que las cuotas de Azure Blob Storage se establecen en el nivel de cuenta, no en el nivel de contenedor. Sin embargo, las cuotas de Azure Files se encuentran en el nivel de recurso compartido de archivos y pueden proporcionar un mejor control sobre los límites de carga. Para obtener más información, consulta los documentos de Azure vinculados anteriormente en esta lista.
• Protege los archivos con cifrado del lado servidor (SSE).

Para obtener más información sobre Azure Blob Storage y Azure Files, consulta la documentación de Azure Storage.

Límite de tamaño de mensaje de SignalR del lado servidor

Es posible que se produzca un error en las cargas de archivos incluso antes de que se inicien, cuando Blazor recupera datos sobre los archivos que superan el tamaño máximo de los mensajes de SignalR.

SignalR define un límite de tamaño de mensajes que se aplica a cada mensaje que Blazor recibe, y el componente InputFile transmite archivos al servidor en mensajes que respetan el límite configurado. Sin embargo, el primer mensaje, que indica el conjunto de archivos que se van a cargar, se envía como un único mensaje. El tamaño del primer mensaje puede superar el límite de tamaño del mensaje de SignalR. El problema no está relacionado con el tamaño de los archivos, sino con el número de archivos.

El error registrado es similar al siguiente:

Error: Conexión desconectada con el error "Error: El servidor ha devuelto un error al cerrarse: Conexión cerrada con un error.". e.log @ blazor.server.js:1

Al cargar archivos, alcanzar el límite de tamaño del mensaje en el primer mensaje es poco frecuente. Si se alcanza el límite, la aplicación puede configurar HubOptions.MaximumReceiveMessageSize con un valor mayor.

Para obtener más información sobre la configuración de SignalR y cómo establecer MaximumReceiveMessageSize, consulta la guía de SignalR en ASP.NET Core Blazor.

Número máximo de invocaciones paralelas por configuración del centro de cliente

Blazor se basa en MaximumParallelInvocationsPerClient establecido en 1, que es el valor predeterminado.

Aumentar el valor conduce a una alta probabilidad de que las operaciones de CopyTo inicien System.InvalidOperationException: 'Reading is not allowed after reader was completed.'. Para obtener más información, consulta MaximumParallelInvocationsPerClient > 1 interrumpe la carga de archivos en el Blazor Server modo (dotnet/aspnetcore #53951).

Solución de problemas

La línea que llama IBrowserFile.OpenReadStream produce un System.TimeoutException:

System.TimeoutException: Did not receive any data in the allotted time.

Causas posibles:

• Uso del contenedor de inversión de control (IoC) de Autofac en lugar del contenedor integrado de inserción de dependencias de ASP.NET Core. Para resolver el problema, establece DisableImplicitFromServicesParameters en true en las opciones del centro de conectividad de controladores del circuito del lado servidor. Para obtener más información, consulta FileUpload: No recibió ningún dato en el tiempo asignado (dotnet/aspnetcore #38842).

• No se lee la secuencia hasta su finalización. Esto no es un problema de marco. Intercepta la excepción e investiga aún más en tu entorno o red local.

• Usar la representación del lado servidor y llamar a OpenReadStream en varios archivos antes de leerlos hasta su finalización. Para resolver el problema, usa la clase LazyBrowserFileStream y el enfoque descritos en la sección Carga de archivos en un servidor con representación del lado servidor de este artículo.

Recursos adicionales

• Descargas de archivos de Blazor en ASP.NET Core
• Carga de archivos en ASP.NET Core
• Información general de formularios de ASP.NET Core Blazor
• Repositorio de GitHub con ejemplos de Blazor (dotnet/blazor-samples) (cómo descargar)