0

Actualmente me encuentro en el desarrollo de un sistema para practicar Blazor webassembly y a su vez utilizar APIs desarrolladas como Minimal desde otro proyecto. El hecho es que me encuentro con un obstáculo el cual he realizado re-search y no logro encontrar una solución y el mismo es enviar archivos (en mi caso imagenes) hacia la minimal api. La Minimal API como tal, funciona de forma excelente desde el Postman, pero no encuentro una manera para desde Blazor enviar ese archivo y sea recibido por mi Minimal API de forma correcta.

En Blazor tengo el siguiente código:

<h1>Blazor Server File Upload</h1>

<InputFile OnChange="@UploadFile" />

@if (ImgUrl != null)
{
    <div>
        <img src="@ImgUrl" style="width:100px" />
    </div>
}

@code {
    private IWebHostBuilder _env;

    private string ImgUrl;

    private async Task UploadFile(InputFileChangeEventArgs e)
    {
        try
        {
            var pathToSave = Path.Combine(e.File.Name);
            await using FileStream fs = new(pathToSave, FileMode.Create);
            await e.File.OpenReadStream().CopyToAsync(fs);
            ImgUrl = Path.Combine(e.File.Name);
            //Http.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json")); ;
            //var response = await Http.PostAsJsonAsync("http://localhost:7220/uploadphoto/", fs.Name);
            var response = await Http.Post<SaveFile>("http://localhost:7220/uploadphoto2/", pathToSave);

            Snackbar.Add(response.ToString(), Severity.Error);
        }
        catch (Exception ex)
        {

            Snackbar.Add(ex.Message, Severity.Warning);
        }


    }

}

Y el código de la Minimal API por si a alguien le sirve es el siguiente (este código funciona correctamente):


app.MapPost("/uploadphoto", async (DbContextMaster db, HttpResponse response, HttpRequest request) =>
{

    if (!request.Form.Files.Any())
    {
        await response.WriteAsJsonAsync(new { data = new { message = $"Status Code 500, Internal server error" }, File = "", Size = "", Fullpath = "" });
        return;
    }
    else
    {
        try
        {

            var folderName = Path.Combine("upload");
            var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);

            foreach (var file in request.Form.Files)
            {
                var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                var fullPath = Path.Combine(pathToSave, fileName);

                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    file.CopyTo(stream);
                    await response.WriteAsJsonAsync(new { data = new { message = $"File is uploaded Successfully" }, File = file.FileName, Size = file.Length, Fullpath = fullPath });

                    return;
                }
            }

        }
        catch (Exception ex)
        {
            await response.WriteAsJsonAsync(new { data = new { message = $"Status Code 500, Internal server error" }, File = "", Size = "", Fullpath = "" });
            return;

        }

    }

})
    .WithName("UploadPhoto").WithTags("Uploads");

Si alguien ha podido solucionar el inconveniente, por favor que me dé luces para solventar este obstáculo.

1 respuesta 1

1

Logre resolver el inconveniente comunidad, compartiré la solución al problema.

Primero que todo debemos saber que en el Minimal API debemos enviarle un cuerpo a Form-data para poder que la imagen sea almacenada en la ruta que queramos.

Teniendo esto claro necesitaremos lo siguiente, en el mismo orden de ideas, seguiremos los siguientes pasos:

  • Vamos a instalar el Nuget de tewr.blazor.filereader
  • En el Program.cs agregaremos el using Tewr.Blazor.FileReader;
  • Agregaremos el servicio builder.Services.AddFileReaderService(); en el Program.cs
  • En el _Imports.cs agregaremos la línea @using Tewr.Blazor.FileReader

Ahora nuestro Blazor quedaría de la siguiente manera.

@using Tewr.Blazor.FileReader;
@inject IFileReaderService fileReader;

<input type="file" @ref="elementReference" @onchange="async () => OpenFileAsync()"/>
<MudText Typo="Typo.subtitle2">Nombre de archivo: @fileName</MudText>
<MudText Typo="Typo.subtitle2">Tamaño: @size</MudText>
<MudText Typo="Typo.subtitle2">Tipo: @type</MudText>

<MudButton OnClick="async () => UploadFileAsync()">Subir imagen</MudButton>

@code {

    ElementReference elementReference;
    string message = string.Empty;
    string imgPath = null;

    string fileName = string.Empty;
    string type = string.Empty;
    string size = string.Empty;

    Stream fileStream = null;

    async Task OpenFileAsync()
    {
        var file = (await fileReader.CreateReference(elementReference).EnumerateFilesAsync()).FirstOrDefault();

        if (file == null)
        {
            Snackbar.Add("Imagen no cargada", Severity.Error);
            return;
        }

        var fileInfo = await file.ReadFileInfoAsync();
        fileName = fileInfo.Name;
        size = $"{fileInfo.Size}";
        type = fileInfo.Type;

        using (var memoryStream = await file.CreateMemoryStreamAsync((int)fileInfo.Size))
        {
            fileStream = new MemoryStream(memoryStream.ToArray());
        }
    }

    async Task UploadFileAsync()
    {
        string url = "http://localhost:7220";

        var content = new MultipartFormDataContent();
        content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data");

        content.Add(new StreamContent(fileStream, (int)fileStream.Length), "image", fileName);

        var response = await Http.PostAsync($"{url}/uploadphoto", content);

        message = "Imagen guardada con éxito";

        Snackbar.Add($"{message}", Severity.Success);
    }
}

Espero les sea de gran ayuda esta aportación. saludos StackOverFlow Community!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.