issue with the input tag

[SaeedP]

Hello,

I need to import an image in my Blazor web assembly app. I have tested and read a lot of content from the web and AI.
But I don't know why none of my input tags are working!

<InputFile @OnChange="HandleFileUpload" />

<input type="file" @onchange="HandleFileUpload" />

<input type="file" @onchange="HandleFileUpload" />

private async Task HandleFileUpload(InputFileChangeEventArgs e)
    {
        var file = e.File;
        var buffer = new byte[file.Size];
        await file.OpenReadStream().ReadAsync(buffer);

        // Send the image to DeepAI for processing
        var generatedAvatar = await GenerateAvatar(buffer);

        // Display the generated avatar
        avatarUrl = $"data:image/png;base64,{Convert.ToBase64String(generatedAvatar)}";
        isImageUploaded = true;
        isAvatarGenerated = true;
    }

Please guide me.

thanks,

 

[Skydiver]

What exactly is not working? It's your event handler not being called? Or is there an error in the handler?

 

[JohnH]

ASP.NET Core Blazor file uploads

Learn how to upload files in Blazor with the InputFile component.

learn.microsoft.com

uses:

<InputFile OnChange="@LoadFiles"

 

[SaeedP]

What exactly is not working? It's your event handler not being called? Or is there an error in the handler?

When I run the code I just see a blank page!

Here comes my code:

@page "/"

@using System.Net.Http
@using System.Threading.Tasks
@*@using Microsoft.AspNetCore.Components.Forms*@
@using System.IO

<div>

    <h3>Index</h3>


    <InputFile OnChange="@HandleFileUpload" />

    @*<input type="file" @onchange="HandleFileUpload" />*@
    @*<input type="file" @onchange="HandleFileUpload" />*@


    @if (isImageUploaded && isAvatarGenerated)
    {
        <img src="@avatarUrl" alt="Generated Avatar" />
    }

</div>


@code {
    private bool isImageUploaded = false;
    private bool isAvatarGenerated = false;
    private string avatarUrl = "";
    private HttpClient httpClient;

    //this is ThreadExceptionEventArgs constructor. the name is Index because we write this FormUrlEncodedContent in Index class

    public Index(HttpClient httpClient)
    {
        this.httpClient = httpClient;
    }

    private async Task HandleFileUpload(InputFileChangeEventArgs e)
    {
        var file = e.File;
        var buffer = new byte[file.Size];
        await file.OpenReadStream().ReadAsync(buffer);

        // Send the image to DeepAI for processing
        var generatedAvatar = await GenerateAvatar(buffer);

        // Display the generated avatar
        avatarUrl = $"data:image/png;base64,{Convert.ToBase64String(generatedAvatar)}";
        isImageUploaded = true;
        isAvatarGenerated = true;
    }

    private async Task<byte[]> GenerateAvatar(byte[] imageBytes)
    {
        var content = new MultipartFormDataContent();
        var imageContent = new ByteArrayContent(imageBytes);
        content.Add(imageContent, "image");

        // Set your DeepAI API key
        var apiKey = "quickstart-QUdJIGlzIGNvbWluZy4uLi4K";

        using (var response = await httpClient.PostAsync($"https://api.deepai.org/api/image-to-avatar?api-key={apiKey}", content))
        {
            response.EnsureSuccessStatusCode();

            // Process the response from DeepAI
            var responseContent = await response.Content.ReadAsStringAsync();

            // Extract the generated avatar data from the response
            var responseObject = JObject.Parse(responseContent);
            var avatarUrl = responseObject["output_url"].ToString();

            // Download the generated avatar image
            using (var avatarResponse = await httpClient.GetAsync(avatarUrl))
            {
                avatarResponse.EnsureSuccessStatusCode();
                var avatarBytes = await avatarResponse.Content.ReadAsByteArrayAsync();
                return avatarBytes;
            }
        }
    }
}

 

[Skydiver]

The bottom of your page has a yellow block that says that an exception was thrown. Perhaps check on that.

 

[SaeedP]

I have seen that and tried a lot but I can't understand the expectations!