How do you Register a Blazor App to Upload Photos to Azure Blob Storage

George Irwin 0

I've created a simple Blazor Application based on the standard Blazor Web application template to upload photos to Azure Blob Storage. It works when I run it in my computer, but I'm having trouble getting it to run when I Publish it to an Azure App Service. I receive an error: User's image

When I use the F12 debugging tools, it shows:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

The application uses the Blazor InputFile control and Azure Blob Storage to store the files. I don't know if it's because the application needs to declare that it needs to use the file system or if it just cannot access the Azure Blob Storage account. I assume it's related to not being able to access the Blob storage.

I just modified the Counter.razor page to do the file uploads. The other 2 pages (Home and Weather) work fine. Here is the code in question:

<@page "/counter"
@rendermode InteractiveServer
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
@inject BlobServiceClient blobservice
@inject IConfiguration configuration

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button>Click me</button>
<h1>Upload Photo</h1>
@if (showUpload)
{

Sander van de Velde | MVP 30,711 Reputation points MVP

2024-05-30T08:09:28.16+00:00

welcome to this moderated Azure community forum.

Better questions with more information lead to better answers from our community members.

Please provide information about the steps you have taken, the guide you follow, and the errors (while debugging) you receive so fellow members can understand your question better.

Can you share the code that uploads the files to the blob storage? Are you aware of the credentials needed to interact with the blob storage (please do not share secrets in screendumps or code samples)?

George Irwin 0

Here's the code, I did upload it in the previous post but it was truncated:

@page "/counter"
@rendermode InteractiveServer
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
@inject BlobServiceClient blobservice
@inject IConfiguration configuration

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<h1>Upload Photo</h1>
@if (showUpload)
{
    <InputFile id="upload-photo" OnChange="@LoadFiles" />
}
@if (uploadSuccessful)
{
    <p class="bg-success">Uploaded</p>
}

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    bool showUpload = true;
    bool uploadSuccessful = false;
    bool loadedPhoto = false;
    string newBlobName = string.Empty;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        try
        {
            uploadSuccessful = false;

            // Save photo to blob storage
            blobservice = new BlobServiceClient(configuration.GetConnectionString("AzureBlobStorage"));
            var containerClient = blobservice.GetBlobContainerClient("wedding");
            await containerClient.CreateIfNotExistsAsync(PublicAccessType.Blob);
            newBlobName = $"{Guid.NewGuid().ToString()}-{e.File.Name}";
            Stream fileStream = e.File.OpenReadStream(maxAllowedSize: 1024000);
            await containerClient.UploadBlobAsync(newBlobName, fileStream);
            loadedPhoto = true;
            uploadSuccessful = true;

        }
        catch (Exception ex)
        {
            Console.WriteLine($"{ex.Message}");
            throw;
        }

    }
}

George Irwin 0 Reputation points

2024-05-30T15:51:43.5466667+00:00
Credentials

Yes, I have the Blob Connection String credentials in my secrets.json file. I added a Key Vault to my Azure subscription to store the secrets to try and resolve the issue, but I'm getting a different error when I try to access the key vault:

Azure.Identity.AuthenticationFailedException: 'ClientSecretCredential authentication failed

var keyVaultEndpoint = new Uri(Environment.GetEnvironmentVariable("VaultUri"));

builder.Configuration.AddAzureKeyVault(keyVaultEndpoint, new DefaultAzureCredential());

2 answers

Sander van de Velde | MVP 30,711 Reputation points MVP

2024-05-30T22:30:15.97+00:00
Hello @George Irwin ,

welcome to this moderated Azure community forum.

Based on the code sample you share, I tried my myself and debugged the code via a breakpoint.

I had to change the code a bit.

Instead of using the:

@inject BlobServiceClient blobservice @inject IConfiguration configuration

I used a local variable for the BlobServiceClient and put the connectionstring directly in the code:

var blobservice = new BlobServiceClient("DefaultEndpointsProtocol=https;AccountName=.....

When I run this code, it works as expected:

the file is uploaded:

It seems the code on the page is not the problem.

It seems either the injection fails or that environment variable is not working fine.

Please not your server-side Blazor app is a web application so the environment variables are read from Application settings.

Try to debug the application by setting a breakpoint both in the page and in the program.cs.

As seen in you question, internal errors (a bug in the code) are not exposed to the browser (because hackers could learn from what is going wrong internally).

If the response helped, do "Accept Answer". If it doesn't work, please let us know the progress. All community members with similar issues will benefit by doing so. Your contribution is highly appreciated.
Please sign in to rate this answer.
George Irwin 0 Reputation points

2024-05-31T17:46:59.5766667+00:00

@Sander van de Velde | MVP Thank you so much for your response! I appreciate your help.

I am also able to upload the file to my Azure Blob Storage account when I run the Blazor application in Debug mode on my computer. The problem occurs when I Publish the Application to an Azure App Service and try to run it using the published URL.

I tried moving the Blob connection string from my secrets.json file to Azure Key Vault to resolve this issue but my application isn't able to authenticate against that Key Vault.

Sorry if I wasn't clear in my original post; this is my first time using this forum.

Bruce (SqlWork.com) 59,966 Reputation points

2024-05-31T21:26:34.6833333+00:00

secrets.json is only used by the developer data protection service. it is not supported on the server. see:

https://learn.microsoft.com/en-us/aspnet/core/security/data-protection/configuration/overview?view=aspnetcore-8.0

as your hosting in azure, you probably want to use key vault. you can create a managed identity for your azure web app and use this to access the key vault.

Sander van de Velde | MVP 30,711 Reputation points MVP

2024-05-31T23:02:23+00:00

Hello @George Irwin ,

if you reference the Environment variables, you are making use of the Web application "Application settings".

Check the Azure portal, there is a dialog in the menu available.

You can combine this with the key vault but that takes a few (easy) steps.

Check this blog post for details.
Sign in to comment
Bruce (SqlWork.com) 59,966 Reputation points

2024-05-31T21:30:41.92+00:00
as your hosting in azure, you probably want to use managed identity to access the storage account.

https://learn.microsoft.com/en-us/azure/app-service/overview-managed-identity?tabs=portal%2Chttp

to use the identity in your code:

var containerClient = new BlobContainerClient( new Uri(containerEndpoint), new DefaultAzureCredential() );

you probably want to set a local dev account to use:

https://learn.microsoft.com/en-us/dotnet/azure/sdk/authentication/local-development-dev-accounts?tabs=azure-portal%2Csign-in-visual-studio%2Ccommand-line
Please sign in to rate this answer.
George Irwin 0 Reputation points

2024-06-05T13:21:00.5+00:00

@Bruce (SqlWork.com) I'm trying to use a managed identity using the links you provided, which were very helpful.

Does this approach require that you application is configured to use Authentication, when you set it up to sort out the application registration to Azure AD?

Everything seems to be connected correctly, but I'm getting an error saying the application with GUID with is not registered in my Active Directory.

Azure.Identity: Information: ClientSecretCredential.GetToken was unable to retrieve an access token. Scopes: [ https://storage.azure.com//.default ] ParentRequestId: GUID Exception: Azure.Identity.AuthenticationFailedException (0x80131500): ClientSecretCredential authentication failed: AADSTS700016: Application with identifier 'GUID' was not found in the directory 'my_Azure_AD'. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You may have sent your authentication request to the wrong tenant.

Bruce (SqlWork.com) 59,966 Reputation points

2024-06-05T16:11:28.6333333+00:00

no. authentication is for authenticating the users who use your app.
Sign in to comment

Share via

How do you Register a Blazor App to Upload Photos to Azure Blob Storage

2 answers