issue with the input tag

Question

issue with the input tag

Saeed Pooladzadeh 221

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,

Ping Ni-MSFT 490 Reputation points Microsoft Vendor

2023-11-13T07:58:15.6166667+00:00

Hi @Saeed Pooladzadeh , what do you mean for not working? What is your expected result?

Saeed Pooladzadeh 221

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

@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;
            }
        }
    }
}

Ping Ni-MSFT 490 Reputation points Microsoft Vendor

2023-11-14T02:30:30.3533333+00:00

Hi @Saeed Pooladzadeh, it works fine in my project. Could you pls search for your current project where contains loading content? In my created new blazor server app, it only contains default loading content in FetchData.razor .
Saeed Pooladzadeh 221 Reputation points

2023-11-14T05:25:51.59+00:00

My project is in Web Assembly, can this be the cause of the issue?

Ping Ni-MSFT 490 Reputation points Microsoft Vendor

2023-11-13T07:58:15.6166667+00:00

Hi @Saeed Pooladzadeh , what do you mean for not working? What is your expected result?
Ping Ni-MSFT 490 Reputation points Microsoft Vendor

2023-11-14T02:30:30.3533333+00:00

Hi @Saeed Pooladzadeh, it works fine in my project. Could you pls search for your current project where contains loading content? In my created new blazor server app, it only contains default loading content in FetchData.razor .
Saeed Pooladzadeh 221 Reputation points

2023-11-14T05:25:51.59+00:00

My project is in Web Assembly, can this be the cause of the issue?

Answer 1

Hi @Saeed Pooladzadeh,

You could F12 in the browser and check the Console panel to see the exception:

No parameterless constructor defined for type 'namespace.Index'

So just add the constructor:

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

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

Saeed Pooladzadeh 221 Reputation points

2023-11-16T09:24:14.33+00:00

Thanks for your help but why should I add a parameterless landscape in this class?

This is the first time that I encounter this issue.

Answer 2

Saeed Pooladzadeh 221

But why does it need a parameterless constructor?

issue with the input tag

2 answers

Activity